Mobile Menu Issues for Pro Integrity

[ephoenix]

Hello. I have two issues.

1. My mobile navbar menu button “jumps” down over the content area. It does not display all the submenu items. I want the “Selections” Menu to stay fixed on top at all times. I want to be able to access all the submenu items. I tried the below css a few different ways unsuccessfully.

@media (max-width: 979px){
.x-navbar-fixed-top,
.x-navbar-fixed-left,
.x-navbar-fixed-right {
position: fixed;
overflow-y: none;
height: 40px;
}
}

2. My menu @768-979 px spilling over into the next line, covering my logo text. I would like this to stay in proper alignment, but can’t seem to align correctly. I tried a few different ways, the most current below.

@media (min-width: 768px) and (max-width: 979px){
.x-nav-wrap.desktop {
display: block !important;
}
.x-btn-navbar.collapsed {
display:none !important;
}
a.x-brand.text {
text-align: left !important;
float: left;
}
}

Thanks for any help.

[ruenel]

Hey There,

Thanks for writing in! I can see that you are using the default navbar. You have several menu items which in a smaller screens, there is no longer enough space which is why it goes to a second row. With the default, there is not much you can do but limit the number of menu items or use complex css. Since you are using Pro theme, please create a custom header instead. You can set a custom layout or duplicate the current navbar with more controls over the elements in the navbar. To get you started with, please check out this knowledge base:
Header and Footer Builder Introduction428

Video Tutorial:

[ephoenix]

Thanks so much!!! That is awesome! Just what I needed!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.