[Support request] Making Desktop Menu a Non-Hamburger Menu

[Milos]

Good evening, about a year ago, the support staff helped me customize the header and the menu, and it’s been working great. We have been using only the hamburger menu for desktop as well as mobile. But more recently, I’ve been told by more than a few people that the desktop menu system really shouldn’t be a hamburger menu, that that’s only advisable for mobile due to size constraints.

I was wondering if someone can help me unbundle this so that the desktop menu is right below the header across the whole screen (ie like the GP homepage is, rather than just a hamburger menu.

I’ve provided a mockup photo of where I’d want the menu to be (the yellow part ‘bolted’ right under the existing header, with the hamburger menu gone). I’ve tried looking around the GP Customization Options, but I believe it’s not simply a setting, since I was also provided with some custom CSS as well to add to the “Additional CSS” section.

Thank you!

[Elvin]

Hi Milos,

You can stop the desktop from turning into a hamburger menu by going to Appearance > Customize > Layout > Primary navigation and change the Mobile Menu Breakpoint value to 768px.

You then change the Navigation Location to “Below” header to place it on the place you’ve indicated on the screenshot. 😀

[Milos]

Hi Elvin,

Thanks for getting back to me. The breakpoint value already is 768px, so that’s what I meant, there was something else that I was told to customize to make the header behave the way it does, with the button, phone number, etc, and keep the sandwich menu the same no matter the resolution. Nevertheless, I’ve just made it below header instead of float right. As you can see, due to the customization, it did not respond as you expected.

I’ve just put the website URL in the private information.

[Elvin]

Ah I see.

Your site seems to have assigned off-canvas to desktop as well.

Can you try changing the Off-canvas option to “Mobile only”? The option is set on Appearance > customize > Layout > Off Canvas Panel.

Let us know.

[Milos]

Hi Elvin,

Yes, that was what it was, thank you. I am now partway there vs what I wanted in the screenshot. Unfortunately, the phone number/online store button is now below the header as well. How would I return that to be on the same line as the header, with the menu bar below both?

[Elvin]

You can try moving the phone number and the online store button on the Header Widget Area so it goes beside the logo. 😀

But make sure you add these as a menu item for the menu assigned to the Offcanvas panel if you want them to show on the offcanvas menu on mobile. 🙂

[Milos]

Hi there, thanks, that has partially fixed it. The way I was asked to make these originally was via elements with a Hook. So I just reassigned the element location from generate_inside_navigation to generate_after_logo. That seems to have just about fixed it, other than this portion is not aligned right anymore, and the button/phone number are not aligned center.

1. I would like the phone/button to be aligned right, and the logo to be aligned left as per the original. How would I go about changing the alignment?
2. If you compare vs the live site (with the original configuration) the phone number text and button is centered vertically. On the dev site, the phone number text seems to be shifted down a little bit. How would I make it aligned centered vertically with the button so that it is like the live site currently?

I’ve pasted the live site link as well for reference.

Thank you

[Ying]

1. I would like the phone/button to be aligned right, and the logo to be aligned left as per the original. How would I go about changing the alignment?

Do you mean the phone icon or the entire button including the texts?

the phone number text seems to be shifted down a little bit.

I compared your 2 sites, they look the same to me:
https://www.screencast.com/t/hvEgUVdPVH

Let me know 🙂

[Milos]

Hello, I may have written that in a bit of a confusing way, sorry about that. #1 and #2 are two different issues. #1 is horizontal alignment, and #2 is vertical alignment.

For #1, I the phone number and “Online Store” button are aligned on the left side of the header on the dev site, next to the logo. If you look at our live site (which shows the setup with the sandwich menu still there), those two items are aligned on the right side of the header, and the logo is on the left side of the header.

For #2, that screenshot is for the vertical alignment. I’ve taken your screenshot, and added some yellow overlay to show what I mean. It the two items are misaligned vertically on the dev site vs both being centered with respect to each other on the live site.

[Ying]

Thanks for the explanation, it’s much easier to understand now 😛

For #1, try add this CSS:

.site-logo {
    margin-right: auto;
}

For #2, it’s because you have this CSS which adds margin to the online-store button:
https://www.screencast.com/t/21KIk7TlMX

Let me know if you need further assistance 🙂

[Milos]

Thank you so much, that fixed both!

How do I “bolt” the navigation to the bottom of the header? When I scroll down, it changes position and goes on top of the header. I would like it to just be static at the top, without any fades, etc, like on the live site.

Thanks again!

[Ying]

In this case, disable the sticky navigation option in customizer.

Then add this CSS:

header#masthead,#site-navigation {
    position: fixed;
    width: 100%;
}
header#masthead {
    top: 0;
}
#site-navigation {
    top: 63px;
}

Let me know 🙂

[Milos]

Great, that worked!

Probably the last issue that appeared as a result of doing the above, but I see now that in the middle resolutions (i.e. tablet) the phone number and Online Store Button are still aligned right.

Also, on the mobile menu, the menu is labelled “Menu”, which moves the sandwich menu to the next line. How do I get rid of that “Menu” label so that it is like the existing live website?

Thanks again for the help.

[Ying]

You have two container blocks, one is hide on desktop, one is hide on tablet.
https://www.screencast.com/t/CtjDuvHWnP

I think you only need 1 container block, remove the one that is hide on desktop should fix the issue.

For the menu label, go to customizer > layout > Primary Navigation, leave the Mobile Menu Label field blank.

Let me know if it works.

[Milos]

Hi Ying,

Thanks, that worked for the Menu Label.

Regarding the container blocks, they have slightly different text (Desktop has more descriptive text due to less of a size restriction) so the way support had me set this up back when the site launched was by having the two versions that you’re seeing. Removing the text in the past has interestingly led to less phonecalls historically when we did some testing, so we’d like to keep the two versions for that reason.

[Author]

Posts