Sticky Header & Menu Drop Down on Navigation

Support
#1

  1. I would like to have a sticky header/ navigation on the site. Where do I find the settings in X and in Pro. [ I have license for both, using X, but if it’s only available in Pro thanks fine.

  2. I would like on Mobile for the menu items in the burger, to all remain open. Rather than having to click the arrow. Please advise how to do this.

Thank you

#2

Hi @paleopolly,

For X, please choose FIXED TOP for Navbar Position:

For Pro, please inspect Bar, then set Sticky Bar to ON

Try adding this custom CSS on Theme Options > Global CSS

.x-navbar .mobile .x-nav ul.x-collapsed {
    display: block;
}

Hope this helps.

#4

Hi there,

I have recreated the header using PRO> Test> The header looks like how I want it in desktop, however when we move to a mobile device, it looks awful.

How do we style this?

Why does X theme not have the option of a simple sticky header, this seems insane, all this extra work to create a sticky header function???

Any advice on how to make the header created in Pro- responsive, and similar to the standard Icon nav on mobiles would be greatly appreciated.

#5

Hi @paleopolly,

X has the basic Fixed Top header area which you can freely customize through a child theme.

As for Pro, aside from adding a Navigation Inline element, also add a mobile navigation elements such as the Navigation Collapsed element.

Once you have the Navigation Inline and the Navigation Collapsed element in the same container, you can click on each of the element’s customize setting and use the Hide During Breakpoints to hide the Navigation Collapsed element on desktop and the Navigation Inline element on mobile:

Hope this helps.

#6

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