Jump to content

How can I make text background color appear also in mobile navigation like desktop navi ?

Recommended Posts

Site URL: https://popcinema.org/home-eng

Hi

How can I make text background color appear also in mobile navigation just like desktop navi ?

here code I use for desktop navi text backgroud  

#header .header-nav-wrapper .header-nav-item:nth-child(13) a{color:#000; background-color:#fff;
padding-left: 1.5vw;
padding-right: 1.5vw;
}
#header .header-nav-wrapper .header-nav-item:nth-child(14) a{color:#000; background-color:#fff;
padding-left: 1.5vw;
padding-right: 1.5vw;
}

thank you in advance 

 

 

Screenshot 2022-05-09 at 9.30.52 PM.png

Screenshot 2022-05-09 at 9.31.28 PM.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

1 hour ago, SHANE_POPCINEMA said:

Site URL: https://popcinema.org/home-eng

Hi

How can I make text background color appear also in mobile navigation just like desktop navi ?

here code I use for desktop navi text backgroud  

#header .header-nav-wrapper .header-nav-item:nth-child(13) a{color:#000; background-color:#fff;
padding-left: 1.5vw;
padding-right: 1.5vw;
}
#header .header-nav-wrapper .header-nav-item:nth-child(14) a{color:#000; background-color:#fff;
padding-left: 1.5vw;
padding-right: 1.5vw;
}

thank you in advance 

#yui_3_17_2_1_1652128674627_1531 {
color:#000; background-color:#fff;
padding-left: 1.5vw;// Adjust the paddings as you wish to
padding-right: 1.5vw; // Adjust the paddings as you wish to
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works. Thanks

Get Our MultiCurrency Extension for Your Site (7.0 & 7.1)

Feel free to reach out for help and projects!

The Squarespacer Limited

Link to comment
28 minutes ago, TheSquareSpacer said:

#yui_3_17_2_1_1652128674627_1531 {
color:#000; background-color:#fff;
padding-left: 1.5vw;// Adjust the paddings as you wish to
padding-right: 1.5vw; // Adjust the paddings as you wish to
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works. Thanks

thank you for helping me I tried but it doesn't seem to work 

Link to comment
32 minutes ago, TheSquareSpacer said:

#yui_3_17_2_1_1652128674627_1531 {
color:#000; background-color:#fff;
padding-left: 1.5vw;// Adjust the paddings as you wish to
padding-right: 1.5vw; // Adjust the paddings as you wish to
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works. Thanks

I want to change where text highlight EN look just like in desktop version 

Link to comment
58 minutes ago, TheSquareSpacer said:

#yui_3_17_2_1_1652128674627_1531 {
color:#000; background-color:#fff;
padding-left: 1.5vw;// Adjust the paddings as you wish to
padding-right: 1.5vw; // Adjust the paddings as you wish to
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works. Thanks

I'm able to put color how don't know how to make it highlight only text 

Screenshot 2022-05-09 at 11.36.21 PM.png

Edited by SHANE_POPCINEMA
Link to comment
1 hour ago, TheSquareSpacer said:

#yui_3_17_2_1_1652128674627_1531 {
color:#000; background-color:#fff;
padding-left: 1.5vw;// Adjust the paddings as you wish to
padding-right: 1.5vw; // Adjust the paddings as you wish to
}
Please let me know how it goes, and ask for help if it does not work. Please mark the answer as correct if it works. Thanks

#header .header-menu-nav-item:nth-child(13) a{color:#000; background-color:#fff;
width: 40px;
padding-left: 1.5vw;
padding-right: 1.5vw; 
}

#header .header-menu-nav-item:nth-child(14) a{color:#000; background-color:#fff;
width: 25px;
padding-left: 1.5vw;
padding-right: 1.5vw; 
}

 

I got it to work now thank you so much 

Screenshot 2022-05-09 at 11.54.11 PM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.