[Resolved] Hamburger Menu hides in Mobile

[Sars]

HI Team,
I have a small Issue,
On reading one of the threads , I added this code in Custom CSS

@media (min-width:768px) {
    .main-navigation .main-nav ul li.slideout-toggle a {
        background-color: #00aced;
    .main-navigation .main-nav ul li.slideout-toggle a:hover {
        background-color: #4843D2;
    }
}

But Unfortunately, I am facing 2 issues,
1) The hamburger menu and the social icons disappears in mobile
2) The hover background does not change even when I add the background color.

Thank you

[Leo]

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

[Sars]

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.

[Leo]

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

Does that help?

[Sars]

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.

[Leo]

Hmm give this CSS a shot:

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

[Sars]

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

[Leo]

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;
}

[Sars]

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

[Leo]

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

[Sars]

I have done as your advice Leo. Still no change 🙁

Thank You

[Leo]

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

Give it another shot?

[Sars]

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

[Leo]

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

[Sars]

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.

[Author]

Posts