Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


bthakker

Question

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

1 answer to this question

Recommended Posts

  • 0
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...