Jump to content

Drop down Navigation Menu change the color at the time when nav folder item is selected in mobile

Recommended Posts

Site URL: https://yasmintork.com/

I was able to add the custom css to change the background color on hover for desktop. What do I add to get the similar affect for mobile. I want the background of the nav folder item to be white when user touches on the mobile screen.

Select Services -> Pick any service

I don't want the background to show the active nav item something like below: 

/* mobile */
.header-menu-nav-item--active>a {
  background: white;
}

I want to change the color as an effect of selecting a nav folder item rather than having an effect after the fact to show what's active. 

This is what I have so far in the Custom CSS

/* Remove dropdown padidng */
.header-nav-folder-content {
    padding: 0 !important;
}
/* add border */
.header-nav-folder-item {
    padding: 5px;
    border-bottom: 1px solid white;
}
/* change bg on hover */
.header-nav-folder-item:hover {
    background: white;
}

Link to comment
On 9/17/2021 at 4:54 AM, bthakker said:

Site URL: https://yasmintork.com/

I was able to add the custom css to change the background color on hover for desktop. What do I add to get the similar affect for mobile. I want the background of the nav folder item to be white when user touches on the mobile screen.

Select Services -> Pick any service

I don't want the background to show the active nav item something like below: 

/* mobile */
.header-menu-nav-item--active>a {
  background: white;
}

I want to change the color as an effect of selecting a nav folder item rather than having an effect after the fact to show what's active. 

This is what I have so far in the Custom CSS

/* Remove dropdown padidng */
.header-nav-folder-content {
    padding: 0 !important;
}
/* add border */
.header-nav-folder-item {
    padding: 5px;
    border-bottom: 1px solid white;
}
/* change bg on hover */
.header-nav-folder-item:hover {
    background: white;
}

try this

.header-menu-nav-item:active>a {
  background: white;
}

 

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.