Nav Component to be Responsive

[bluetroop2]

Hi X Team.

43RD ARW MOTORPOOL | Custom Auto Detailing | Denton, Argyle

I eliminated the masthead on this site, and created a global component with a top image and an inline navigation below it (see the home page). My question is how to cause this new menu to respond down in size to a square hamburger menu on a small screen like a phone (as it would have before with a regular masthead)?

[ruenel]

Hello @bluetroop2,

Thanks for writing in!

Keep in mind that the Navigation Inline is best to use on desktop screens. On mobile, it is recommended that you use Navigation Dropdown or Navigation Off-Canvas or Navigation Modal. You can place both elements in your column. You just have to show/hide the element on the respective screen sizes using the “Hide During Breakpoints” option.

• https://theme.co/docs/hide-or-show-content-by-device-size

Best Regards.

[bluetroop2]

Thank you for your help.

[nabeel]

You’re most welcome!

[bluetroop2]

Hi Team,
I ran into an issue with the submenu being tucked under the next section. Can you please tell how to bring it forward so it is visible?

[tristup]

Hi @bluetroop2,

It might be a problem with the Z Index value, I would suggest you set the Z Index value of the section under the navigation to 0 from the default 1 and check if that works for you.

Thanks

[bluetroop2]

Thank you for the direction, but I must be doing something wrong. It is part of a portion that was built in a component. Does that make a difference?.. https://43rdarwmotorpool.com/

[christian]

Hey @bluetroop2,

Set the Z Index of the first section to 2.

[bluetroop2]

Works great now, thank you so much for the guidance.

[tristup]

Hi @bluetroop2,

Glad that we are able to help you.

Thanks