[Resolved] Changing icons mobile menu

[Henk]

Hello,

I want to change the standard hamburger menu icon/close icon with a custom one just like in this example. How would I do that without downloading the responsive menu plugin?

I just want to replace the current SVG icons with simple CSS buttons.

[Tom]

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/

[Henk]

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!

[Henk]

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!

[Ying]

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!

[Henk]

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.

[Henk]

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!

[David]

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

[Henk]

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.

[David]

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.

[Henk]

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.

[Henk]

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?

[David]

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:

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

[Henk]

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.

[David]

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.

[Author]

Posts