Hamburger Menu hides in Mobile

Hi there,

1) Have you solved this? I'm seeing the menu toggle on mobile:
https://www.screencast.com/t/1zOhEKZ37

The code you've added should be unrelated to social icons so you will have to figure why it's hidden on mobile.

2) The first block of your CSS is missing a closing bracket }
https://www.screencast.com/t/pI4L41p1h5lO

Hi Leo,
Thanks a lot for your valuable time.

The menu is showing, but on hover it disappears.
I tried adding a background, the background is shown on desktop, but not on mobile.

Thanks a lot for your time.

Your code above is wrapped in @media (min-width:768px) { so it's desktop only.

Does that help?

Thanks a lot @leo. I removed the media wrap. Still the background of the hamburger menu disappears on hover.

VEry sorry to ask such basic questions.

Hmm give this CSS a shot:

button.menu-toggle {
    background-color: #00aced;
}

Thanks Leo,

I added this:

li.slideout-toggle a {
        background-color: #00aced;
    .main-navigation .main-nav ul li.slideout-toggle a:hover {
        background-color: #000;
    }
			button.menu-toggle {
    background-color: #00aced;
}

Still the background disappears on mouse hover

You are missing a closing } for this block of CSS:

li.slideout-toggle a {
        background-color: #00aced;

Try this instead:

.main-navigation .main-nav ul li.slideout-toggle a {
    background-color: #00aced;
}
.main-navigation .main-nav ul li.slideout-toggle a:hover {
    background-color: #000;
}
button.menu-toggle {
    background-color: #00aced !important;
}

Thank you ,

Now the code is:

@media (min-width:769px) {
.main-navigation .main-nav ul li.slideout-toggle a {
    background-color: #00aced;
}
.main-navigation .main-nav ul li.slideout-toggle a:hover {
    background-color: #000;
}
button.menu-toggle {
    background-color: #00aced;
}
}

Unfortunately, Still the color is not changing.

Thank you

Can you just copy and paste my code here?
https://generatepress.com/forums/topic/hamburger-menu-hides-in-mobile/#post-1478932

I have done as your advice Leo. Still no change :(

Thank You

We are close. Just edited the code slightly:
https://generatepress.com/forums/topic/hamburger-menu-hides-in-mobile/#post-1478932

Give it another shot?

Tried the edited code Leo . But still on hover the hamburger icon becomes transparent :(

.main-navigation .main-nav ul li.slideout-toggle a {
    background-color: #00aced;
}
.main-navigation .main-nav ul li.slideout-toggle a:hover {
    background-color: #000;
}
button.menu-toggle {
    background-color: #00aced !important;
}

Thank You

It seems to work for me now?
https://www.screencast.com/t/BHGLSFouZ

On Mobile, There is a fixed #00aced color Leo. On desktop, On Hover, the hamburger becomes transparent.

I am trying this:
Normal : #00aced color
On hover -> some other color
for both mobile and desktop.

Thanks again for your time.