Inline navigation not seen on mobile devices

My inline header disappears on my mobile device. How do I customize and add the hamburger icon for my menu in the X theme?

Hi There @plphoto

Thanks for writing in! You can add a Navigation Collapsed element and set it to hide on large screens like desktops and laptops.

Then you can also hide your inline navigation on the small screens.

Hope you get the idea.

For detailed information, please check our knowledge base article here (https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103). We also have a separate guide on hide during breakpoints (https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378).

Thanks!

To Mldarshana, I understand the concept but do not have a clue where to add the elements. I do not use PRO only X. I can not add containers and elements to the Header. All I have are 2 fields for adjusting mobile navbar button size and alignment. button size 28 px and button alignment 14 px. I also need a tutorial on how to use the widget bar icon.

In short I still do not have a solution. Can you help more specifically?

Hello There,

Sorry for the confusion.

I have check your licenses and inspected the site which have been assigned to it. I can see that you are using X theme and the Ethos stack. Actually the hamburger menu is present. It is just not visible because it is in white color. To resolve this, please change the site link color and link hover color in X > Theme Options > Typography > Site Links.

Or you may also add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-btn-navbar,
.x-btn-navbar.collapsed:hover,
.x-btn-navbar.collapsed,
.x-btn-navbar:hover{
    color: black;
}

Hope this helps.

Got it. The Global CSS code worked as needed. Thanks until next time.

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.