[Resolved] Menu title still showing next to hamburger menu

[Michelle]

The generatepress preview for mobile doesn’t show the title “Menu” next to the hamburger icon, but on mobile devices, even after clearing site and browser cache, “Menu” is there, even though I don’t have anything entered into the Mobile Menu Label in Primary Navigation, or in Desktop Toggle Label in Customizing>Layout>Off Canvas Panel. For good measure, I checked Secondary Navigation settings, and see that the Mobile Menu Label there is also blank. I don’t see where the “Menu” title is coming from.

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Michelle]

Sure. See below.

I added a generate_menu_item since I last wrote this so I can’t see the title “Menu” at the moment, perhaps since it is crowded out by the buttons that are now there. I have a feeling it is still there.

I’m trying to achieve a hamburger menu on the left of my centered site logo and a single menu item on the right, spaced nicely on mobile and sticky.

What I have is two logout buttons (one from elements generate_menu_item and one from primary navigation that I can’t seem to get rid of) and a hamburger menu that is hidden on mobile. The hamburger menu triggers Off Canvas Panel.

There is a little CSS in my Customizer that could be complicating things.

[Fernando]

Hi Michelle,

Can you try to set the Mobile Menu Breakpoint in Appearance > Customize > Layout > Primary Navigation to 2000px first, then let’s try to see what it would look like, and how we can fix it.

[Michelle]

I set it to 2000px, and the “menu” title is there; the login-logout button is not.

[Michelle]

I’ve tried to make changes to this all day, but without success. I am still without a login-logout button and my site logo is off center to the left. Any thoughts?

[Fernando]

Great! Now try adding this CSS:

.menu-bar-items .wp-block-navigation__container{
    display: block;
}

Let me know how it goes.

[Michelle]

FINALLY! Yes, it shows now.

Can I move it t o the right and keep the hamburger menu to the left? And as a button instead of the word?

I am so grateful.

[Fernando]

Try adding this:

.site-logo {
    position:absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
}

[Michelle]

Fernando?

You are a genius. That placed it to the right. Awesome!

To make it a “button”, how do I tweak this?

/*Styles login-logout nav item to look like a button*/
.main-navigation .main-nav ul li.login-logout a {
  font-size:11px;
  padding: 8px;
  background-color: #b80000;
  color: #ffffff;
	border-radius: 5px;
  line-height: 8px;
	margin: 10px 10;
}

.login-logout {
  position: -webkit-sticky;
  position: sticky;
	line-height: 0px;
	left: 20px
}

nav .inside-navigation .site-logo {
    margin-bottom: 0;
}

[Fernando]

Try replacing those with just this:

/*Styles login-logout nav item to look like a button*/
.menu-bar-items ul li.login-logout a {
  font-size:11px;
  padding: 8px;
  background-color: #b80000;
  color: #ffffff;
	border-radius: 5px;
  line-height: 8px;
	margin: 10px 10;
}

[Michelle]

You just made my week. Thank you! It’s perfect.
🙂

[Michelle]

Oops! I still see “Menu” title showing next to hamburger menu. It doesn’t show in the editing dashboard, for some reason. Only on the front end.

[Fernando]

Have you left the toggle label in Appearance > Customize > Layout > Off Canvas Panel blonk/empty?

[Michelle]

Yes

[Author]

Posts