Change the Menu Expander Color

Illdy
1

Hello–

I used custom CSS to make the background of my menu nav/header white.

This means that on mobile screens, you can’t see the three white bars that expand the hidden menu (I attached a picture of the three bars that I’m talking about).

How can I change these bars to be black so that it shows up on a white background?

Thanks,

2

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.open-responsive-menu .fa {
    color: black!important;
}

You may change the color to whatever you’d like.

I hope this helps :slight_smile:

Best Regards,
Support

3

Thanks that works perfectly!

Now, I just noticed another problem.

I’m using the following code to keep the nav fixed as you scroll. However, the “position:fixed” css line is preventing the responsive menu from opening properly. The responsive menu is at the very top of the page and you can’t see the first menu link because it is “hidden” underneath the fixed header nav.

I’ve attached two photos to demonstrate my problem. The first is with the code I have and the second is what it should look like (when I remove “position:fixed” from .top-header.

Current code I’m using:

.top-header {

top: 0;
left: 0;
width: 100%;
z-index: 9999;
background-color: #fff;
box-shadow: 0 1px 0 0 rgba(0,0,0,0.066);
box-sizing: border-box;
height:85px

}

#header .top-header .header-navigation ul li a{
color:#5e5e5e!Important;
}

#header .top-header .header-navigation ul li a:hover{
color:#f1d204!Important;
}

#header .top-header{

padding:5px;
}

.open-responsive-menu .fa {

color: black!important;
}
}

Thoughts on how to fix this?

4

Hey there,
Hope you’re doing well today

For this, I’ll need to have a look at your site first-hand so that I can look through the code and see what’s happening at that point. I have a feeling you may be using an incorrect selector, but I’d like to just have a look for myself and try to solve the problem from there.

I look forward to your reply :slight_smile:

Best Regards,
Support

5

My site URL is: www.scriptdbox.com

Thanks for your help! The main menu functions perfectly. It’s just the mobile friendly menu that seems to be acting weird.

6

Hi again,
Thanks for keeping in touch with us.

Kindly add and save the following code to Appearance > Customize > Additional CSS:

@media only screen and (max-width: 992px){
.responsive-menu.active {
    z-index: 9!important;
    position: fixed!important;
}}

I hope this helps :slight_smile:

Best Regards,
Support