[Support request] Mobile menu without hamburger icon

[Albert]

Hello, I would like to know if it is possible to make a menu like this (keeping the desktop one) in the mobile version:

https://wpjohnny.com/wordpress-themes/

Thank you

[David]

Hi there,

go to Customizer > Layout > Primary Navigation and set the Mobile Menu Breakpoint to 0 ( zero )

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

[Albert]

Perfect! Can you get the entire menu to be on one line where you can scroll horizontally?

[David]

Maybe … can you share a link to your site where i can see your menu?

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

[Albert]

https://viajar.amsterdam

[David]

You can try this CSS:

@media(max-width: 1024px) {
    .main-navigation .main-nav {
        overflow-x: auto;
    }

    .main-navigation .main-nav>ul {
        flex-wrap: nowrap;
        min-width: 1050px;
        text-align: center;
    }

    .main-navigation .main-nav>ul>li {
        flex: 1 0 150px;
    }
}

Theres a couple of factors to consider here:

1. This line: flex: 1 0 150px; sets the menu items to all 150px wide.
2. This line: min-width: 1050px; forces the menu to a min width based on the Number of menu items ( 7 ) * the menu item width ( 150px ).

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

[Albert]

I am trying to modify the width of the Menu item in the mobile version from the Generatepress options (Design – Main Navigation) but the number I put does not respect me. That could be happening?

[David]

Thats because of:

1. This line: flex: 1 0 150px; sets the menu items to all 150px wide.

That line forces the width to be 150px regardless.
If you want to reduce it for mobile then add this:

@media(max-width: 768px) {
    .main-navigation .main-nav>ul>li {
        flex: 1 0 120px;
    }
}

Adjust the 120px to suit your needs.

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

[Albert]

I’m sorry, but I’m trying to change the width of the menu items in their mobile version, but I’m entering a number and it doesn’t work.

What do you think might be wrong? attached screenshot

https://i.ibb.co/T4zBCZf/Sense-t-tol.jpg

[Ying]

Hi Albert,

That’s because the mobile breaking point is set to 0, so no matter how narrow the screen is, the system still thinks it’s on desktop.

So the settings for mobile won’t work in this case.

[Albert]

I set the breakpoint to 0 following David’s instructions. So there is no way to fix it?

[David]

You will need to use CSS – which looks like this:

@media(max-width: 768px) {
    .main-navigation .main-nav>ul>li {
        flex: 1 0 120px;
    }
    .main-navigation .main-nav ul li a {
        padding-left: 10px;
        padding-right: 10px;
    }
}

This property:

flex: 1 0 120px;

Sets the ideal width of each item in this case that is 120px.

The next rule:

.main-navigation .main-nav ul li a {
    padding-left: 10px;
    padding-right: 10px;
}

Is what the Customizer spacing does – so instead of using the customizer you set the left and padding values in CSS.

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

[Author]

Posts