Jump to content

Mobile nav is not taking on cutoms css like desktop

Recommended Posts

Hi @Maksymrewko

The mobile menu uses a different class to the desktop menu. Add this to Custom CSS for the mobile menu.

Alternatively you can use the standard button element in the header. You can turn this on by selecting Edit Header > Elements > Button.

.header-menu-nav-item:nth-child(12) a{
    color: #000;
    background-color: #fff;
    padding-left: 1vw;
    padding-right: 1vw;


Link to comment
15 hours ago, Maksymrewko said:

@meganheath thaks for your help but this doesnt seem to be achiveing the exact results I require. The nth child item is not taking on the colour associated to it and the background (currently black) span the width of the nav compared to desktop?

Any suggestions?

Screenshot 2022-02-13 at 2.09.44 PM.png

Hi @Maksymrewko

Try this instead

.header-menu-nav-item:nth-child(12) a:not(.btn){
    color: #253551;
    background-color: #000;
    padding-left: 2vw;
    padding-right: 1vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    display: inline-block;

You can add a width property if you want to change the width of the background.

Hope that helps.


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.