Show single main menu item instead of hamburger menu

Hi Oliver,

It’s possible. You can set the Mobile Menu Breakpoint to 1024px in Appearance > Customize > Layout > Primary Navigition.

As for the secondary menu, you can set one in Apperance > Menus or in Appearance > Customize > Menus.

You can set the Navigation Location of the secondary menu in Appearance > Customize > Layout > Secondary Navigation.

If you want to show the menu items in the secondary navigation in the hamburger menu, you can add the menu items to the primary navigation, then, we can just hide them on Desktop through custom CSS.

Hope this clarifies.

Fernando thanks a lot for your help! English is not my first language so I might have not explained correctly. What I would like is for the button-like menu item that is seen on desktop view, to also be seen on mobile (without having to click on the hamburger menu) with the same styling (to look like a button).

In other words replace the hamburger menu for a button styled menu item

Here´s the code I found on the forum to make the menu item look like a button if it helps:

/*Styles menu item as a button*/
@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #222222;
        border: .5px solid #222222;
        color: #ffffff;
        line-height: 35px;
    }

I see.

Can you try setting the Mobile menu breakpoint in Appearance > Customize > Layout > Primary Navigation to 0px?

Kindly let us know how it goes.

Sadly it does not work. The main navigation still goes to the hamburger menu on mobile view

Can you try clearing your CDN cache: https://share.getcloudapp.com/kpu8mz5e

Also clear other caching mechanism set in your website if any.

Kindly let us know how it goes.

I deleted the cache in the browser and using WP Super Cache but still the button does not appear as a button on mobile view as the hamburger menu kicks in at some point when reducing the size

To clarify, can you double check if the mobile menu breakpoint is set to 0px for the Primary Navigation as such?: https://share.getcloudapp.com/Z4uAwEDb

Can you check if this is set to Publish as well?: https://share.getcloudapp.com/eDuX9bnz

Kindly let us know.

Yes, that is also exactly what I am doing. You can see for yourself with this login information...

Thank you for sharing your login credentials for further investigation!

Can you enable Menu Plus in Appearance > GeneratePress?: https://share.getcloudapp.com/yAu1LRgk

Then, clear cache of your caching plugins?

If that doesn’t work, can you try disabling both your caching plugins to test?

Kindly let us know how it goes.

After activating menu plus, I can now change the menu breakpoint to 0px. Can I float the menu item to the right of the site logo and can I apply the same styling in mobile as in desktop, so i can make it look like a button in mobile as it does in desktop/tablet mode

With regards to the design of the button, you’ll need to take your code out of the media query to apply it for all views.

For instance, just this:

.main-navigation #primary-menu.main-nav ul li.nav-button a {
        background-color: #222222;
        border: .5px solid #222222;
        color: #ffffff;
        line-height: 35px;
}

In total, here is a code you may try:

.inside-header nav#site-navigation {
    margin-left: 16px;
}

.main-navigation #primary-menu.main-nav ul li.nav-button a {
    background-color: #222222;
    border: .5px solid #222222;
    color: #ffffff;
    line-height: 35px;
}

@media (max-width: 768px) {
    .inside-header.grid-container {
        flex-direction: row;
    }
}

Kindly modify 16px to your preferred value.

Hope this helps!

It´s almost perfect... the problem is that whenever i modify the margin left value it is either too much or too little space for a particular view. For example if i choose 300 PX it appears in the middle of the site on desktop but way beyond to the right on mobile, so much so that one has to scroll sideways in order to see the button. (I left the 300 px value in case you want to see it) Is it possible to somehow auto position it?

If it is not, do you know of a better way to have a header with the site logo and a subscribe button at the right? maybe header widget or something?

Hi there,

where do you want the button positioned on Desktop and Mobile?
Could you provide a mockup image ?

Hi David, it should just float right like a normal menu does on desktop tablet or like a hamburger menu does on mobile.

So it would be like this: Site title floats to the left, single menu item (styled as a button) floats to the right