UBUD fixed main header menu on mobiles and tablets

bonne88 · Member · Feb 25, 2016 at 8:47 am
Copy link

Add topic to favorites
Hi!

UBUD theme is letting us chose whether we want ‘scroll’ or ‘fixed’ main header menu. Is there any way we can change ‘scroll’ to ‘fixed’ main header menu for mobile and tablet versions ?
We have the upgraded version so CSS coding is an option…

Thanks … Best regards Stine ;-)

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 25, 2016 at 9:56 pm
Copy link
Hi there, we can make the mobile menu toggle wrapper with the following CSS.
```
.mobile-wrap {
    position: fixed;
    width: 100%;
    z-index: 10;
}
```
bonne88 · Member · Feb 26, 2016 at 8:14 am
Copy link
Hi,
It works for the menu button but the sub menus still scrolls.
Can you help?

Thanks!
Best, Stine
thesacredpath · Member · Feb 26, 2016 at 8:41 am
Copy link
Hi, this appears to work in my testing, but please confirm on tablet and phone, and make sure that everything works as it should on desktop as well.
```
#site-nav {
	position: fixed;
	z-index: 10;
	top: 95px;
	width: 100%;
}
```
bonne88 · Member · Feb 26, 2016 at 9:10 am
Copy link
I used the code but changed the top 95px to 45px and then it works on mobile and tablets. But I am not able to scroll down the sub menus though.
Further it pushes down the site navigation on desktop.

Can I write anything in front of the #site-nav code (above) ?
Something like .mobile-wrap #site-nav …
That way the desktop might not be affected or …?
thesacredpath · Member · Feb 29, 2016 at 8:42 am
Copy link
The reason I used 95px is so that your site title, which appears at the top of the mobile menu would be visible. If you do not care if that is visible, then 45px will work. When we “fix” the dropdown it stays fixed and I’ve not been able to find a way to get it to scroll.

I see you have used a 800px media query on #site-nav. The touch device menu actually activates at 1199px and narrower, so I would suggest changing the 800px max-width in the media query to 1199px.
bonne88 · Member · Feb 29, 2016 at 2:54 pm
Copy link
Ahh I see – that makes sense!
For now we have chosen not to display a site title though but it is great to know the tip if we decide to show it again … So thanks!

And also thank you for the tip to media query …
thesacredpath · Member · Feb 29, 2016 at 8:41 pm
Copy link
You are welcome.

No items found.