-
Hi!
I’m working on a website where the navigation is currently placed below the header and spans the full width of the page.
I would like to achieve two things, but I’m not sure if they are possible:
I want the menu to always open via the mobile menu button, regardless of screen size. In the Customizer, I’ve set the breakpoint for switching to the mobile menu button to 90000px to force this behavior. However, I’m wondering if there is a more appropriate or recommended way to achieve this.
On the mobile version, I’d like the menu button to no longer appear in the navigation area below the header. Instead, I want it to be placed inside the header, positioned before the logo. Is there a function or hook I can use to accomplish this?
Thank you.
-
Hi there,
1. It is correct.
2. Go to customize > layout > primary navigation, set Navigation location to Float left.
-
Hi Ying
Regarding point 2, what I need is for the menu to appear below the header only on mobile. If I follow your instructions, the menu position changes on both mobile and desktop.
-
Then you need custom CSS.
Can I see your site?
-
Hello Ying,
This is a website currently in development, so I don’t have an online version to share. In any case, I can confirm that it’s not possible to reposition the menu button using CSS alone, since the navigation element is located outside the header.
That’s why I was asking whether there is a way to duplicate the mobile menu button and place it right before the logo, while still keeping the existing button in the bottom navigation bar. I would then handle visibility using CSS media queries to show or hide one of the buttons as needed.
-
It’s hard for me to imagine your layout without seeing it.
Any chance you can make it online and show me a mockup of what you want to achieve?
- You must be logged in to reply to this topic.