Changing icons mobile menu

Hi there,

I'm not too sure I'm seeing the difference between that example and the default theme style?

Changing the SVGs to other SVGs is possible using filters: https://generatepress.com/forums/topic/mobile-menu-icon/#post-1620506

Changing from SVGs to a completely different method is more challenging. I wrote some info on that here: https://docs.generatepress.com/article/animated-hamburgers/

Hi Tom,

I my example the hamburger menu is a black square with the 3 horizontal white lines in it. My hamburger menu are only 3 black lines without the square.

I am going to try to change the SVGs with the method you have provided in the above post.

Thanks for your help!

Sorry,

Two questions about the above method:

1) I am using the Off Canvas Panel for my mobile menu, so I really don't need the close (X) icon when the hamburger menu is clicked (because there is already a close (X) icon in the Off Canvas Panel). What filter do I need to make sure the hamburger icon does not change into the (X) icon when clicked? I know it's only a fraction of a second when I see the (X) icon, because the Off Canvas Panel appears after clicking the hamburger menu, but I still want to disable it.

2) I noticed the entire "inside-navigation grid-container" is clickable in the mobile view. But I want only the hamburger menu and the Mobile Menu Label (Menu) to be clickable. Is this possible?

Thanks!

Hi Henk,

Try this CSS to hide the x icon.

.toggled .icon-menu-bars svg:nth-child(2) {
    display: none;
}

For the 2nd question, could you link us to the site in question? You could use the private info field.

Thanks!

Hello Ying,

Thanks for the CSS provided, it worked!

For my second question, my website is not live yet, but I have provided a screenshot in the private information field so you can see the problem that occurs.

Here is an EXAMPLE of what I am trying to achieve (watch in mobile view to see the hamburger menu).

Is this achievable with GeneratePress?

And I still have not managed to fix the problem I described in the post above.

Any suggestions?

Thanks!

Hi there,

try adding this CSS:

@media(max-width: 768px) {
  .main-navigation .inside-navigation {
    justify-content: center;
  }

  .main-navigation button.menu-toggle {
    flex-grow: unset;
    background-color: #00f; /* background color toggle */
    border-radius: 100%;
    line-height: 55px; /* Adjust height to match elements width */
  }

  .main-navigation .main-nav {
    flex-basis: 100%;
    order: 3;
  }

  .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav>ul {
    display: block;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
  }

  .main-navigation:not(.slideout-navigation).toggled .main-nav>ul {
    max-height: 2000px;
    overflow: visible;
    transition: all 0.3s ease-in-out;
  }
}

Hi David,

The CSS you provided gives me a very small oval icon. I want a round icon that overlays my hero image, just like the example. I tried to tweak the above css, but I was not able to get the same result.

I commented tis line in the CSS:

line-height: 55px; /* Adjust height to match elements width */

You will need to inspect the button.menu-toggle to see its total width, and set the line-height to match.

Positioning it over a header element - its doable but tricky if we can't see the site. Any chance you can open a tunnel to it or upload it to a staging site.

Hello David,

There is was no width in the button.menu-toggle So I added it width: 48px; height: 48px;
I don't know what you mean by "set the line-height to match". Does this mean the line height should be 48px too?

I don't feel comfortable opening a tunnel and I have no host yet, that's why I am designing my site locally. Is is possible to share the 'Positioning over a header element' code and adjust it along the way? I can send screenshots and share code.

My current code:

@media(max-width: 768px) {
.main-navigation .inside-navigation {
justify-content: center;
}

.main-navigation button.menu-toggle {
width: 48px;
height: 48px;
color: #ffffff;
border: 4px solid #ffffff;
flex-grow: unset;
background-color: #006699; /* background color toggle */
border-radius: 100%;
line-height: 48px; /* Adjust height to match elements width */
}

.main-navigation .main-nav {
flex-basis: 100%;
order: 3;
}

I have added a width and height to the button.menu-toggle but I am not sure what the line-height: 55px; does, and how much it should be?

When you select an element in the Developers Tools, and remain hovered over the element in the list, it will show you the computed width / height of the element:

https://www.screencast.com/t/zxZeYpX6BDU

the line-height should match the width value the element displays. This will keep the element square.

Thanks david!

It was 23px. The button looks exactly the way I want to.

I still need some help to positioning it over the hero/header element.

I have been trying to copy the css from my example website to get the same effect, but so far no luck.

In your .main-navigation button.menu-toggle CSS add some top negative margin

eg, margin-top: -10px;

This should pull the toggle up over the element above it.