How to display menu icon in mobile as button

[Shami]

I just wished if the mobile menu icon looked something like copyblogger.com

Is it possible to achieve that? Because right now that mobile icon looks too simple and hardly grabs any attention.

[Elvin]

Hi Shami,

You can start by trying to replicate the font style looks through WP Admin > Appearance > Customize.

For font color:
go to Color > Primary Navigation.

For layout:
go to Layout > Primary Navigation.

For typography:
go to Typography > Primary Navigation.

For other styles that can’t be achieved through this, you can use WP Admin > Appearance > Customize > Additional CSS.

Let us know if it works for you.

[Shami]

I don’t really want to replicate it. That was for reference. I want to make the icon look like button in mobile. I guess it can’t be achieved with the current available options in the Customize.
It’ll probably require additional css.

[Shami]

It should stand out like a button.

[David]

Hi there,

try this CSS:

#mobile-header .menu-toggle {
    line-height: 45px;
    border: 2px solid #000; /* Change #000 for border color */
    border-radius: 45px;
    margin-right: 0.8em;
    background-color: #f00; /* Change #f00 for background */
    color: #fff; /* Set text and toggle color to white */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shami]

That looks good. It just has padding issue. Even after doing changes in the layout settings, the padding just won’t work. The border touches the edge of the screen on the right. How do I fix it?

The only CSS I used earlier was:

@media (min-width:769px) {
.site-branding {
display: inline-block;
}

.site-logo {
float: left;
margin-right: 20px;
margin-left: 10px;
}

I used this css to make the logo and the menu in a single line.

[David]

I updated the CSS here to include some margin-right

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shami]

That worked. Thanks a lot. I want to add divider lines between each menu item in mobile. Is it possible?

[Shami]

Also, I just observed another problem. When I try to increase the font size of primary navigation in mobile, the menu icon stacks below the site title due to responsiveness. Any fix?
Please note that this only happens when the site title font-size is increased. I decreased that a little and this issue is fixed.

So now I just have to add the lines between mobile items to separate them as it looks so plain in design.

[David]

The only fix to stop things from wrapping to a new line, without removing padding, is to reduce the font size – like you did for the Site Title – you can do the same for the Primary navigation.

Try this CSS:

#mobile-header li {
    border-bottom: 1px solid #000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shami]

Looking good. I just have to add margin from both sides. As the border is from edge to edge.

[Shami]

I added this:
margin-right: 35px;
margin-left: 35px;

It’s looking good now.

The last part: How to fill the menu box with color? I mean inside the border of menu icon only. Plus I want to make the ‘menu’ color white and surround it with a dark solid color.

[David]

I updated the CSS here:
https://generatepress.com/forums/topic/how-to-display-menu-icon-in-mobile-as-button/#post-1431681

it includes comments for each of the colors.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shami]

Thanks David. One last thing, I want to do the same border thing for sub menu toggle. I really appreciate your awesome support.

[David]

Try this CSS:

#mobile-header  .menu-item-has-children .dropdown-menu-toggle {
    border: 1px solid #000;
    background-color: #f00;
    color: #fff;
    border-radius: 50px;
    line-height: 50px;
    width: 50px;
    padding: 0;
    text-align: center;
    margin-right: 10px;
}

#mobile-header .main-nav > ul > li.menu-item-has-children>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts