Change Position of nobile Nagivation

[PYUREcrew]

Hello Support,
i would like to have only a mobile top navigation.
when i open the website, the website title and menu-bar is in front of the background images and layerslider-buttons. when i scroll down, it changes to top navigation.
my wish would be:
only a static menu bar on the top: on the left our website title, on the right the menu-bar.
How can i do that?
thanks 🙂

• This topic was modified 5 years ago by PYUREcrew.

[PYUREcrew]

here is a visualization of what i want: https://www.dropbox.com/s/5oqfxks4t7yyv5j/Mobile.png?dl=0

• This reply was modified 5 years ago by PYUREcrew.

[Zex]

Hello, PYUREcrew!

Based on your current settings, next code should work for you:
(Insert the code in Customizing->General->Additional CSS)

https://prnt.sc/jus5qa

@media (max-width:994px) {
.sticky-header.sticky-header-shrink {
 position: fixed!important;	
}   
nav.mobile-menu {
 position: fixed!important;
 width: 100%;
 top: 60px;
 height: 250px;
 overflow: auto;
 z-index:9999;
}

h1.site-title a {
 width: 80%!important;
 text-align: left!important;
}  
.mobile-menu-icons{
 width: 20%!important;
 clear: none!important;
 text-align: right!important;
}	
}

A search button can be enabled only in the primary navigation menu.

Regards

[PYUREcrew]

hey zex,
thanks, that worked! 🙂
on some sub-pages, like http://www.pyure-crew.net/events we use the logo instead of the title.
in this case it doesn’t work yet, as the logo is still in the middle and above the menu.
can you please add the code, so that the logo will be at same position like the title?

[Zex]

Hi,

Replace the code that I gave you in the previous post with the following:

@media (max-width:994px) {
.sticky-header.sticky-header-shrink {
 position: fixed!important;	
}   
nav.mobile-menu {
 position: fixed!important;
 width: 100%;
 top: 60px;
 height: 250px;
 overflow: auto;
 z-index:9999;
}

h1.site-title a {
 width: 80%!important;
 text-align: left!important;
}  

.logo{
 float: left!important;
} 

.mobile-menu-icons{
 width: 20%!important;
 clear: none!important;
 text-align: right!important;
}	
}

Regards

[PYUREcrew]

perferct.
one last question about the mobile menu.

as it opens, it doesn’t open completey. i have to scroll down in the menu to get to last menu point, which is kind of not working very well, because the background scrolls down!
let’s say most of the time if i try to scroll down the menu, the background react, but not the menu, only sometimes i’m able to scroll down in the menu, but I don’t know on what it depends…

to avoid that people are not able to navigate to the lowest menu points, i would prefer the menu to open completly and that the scroll funtion for the menu works if i touch the menu – and that the scroll funtion für the background works, if i touch the background.

thanks for your help!

[Zex]

Try to go with the following code:

@media (max-width:994px) {
.sticky-header.sticky-header-shrink {
 position: fixed!important;	
}   
nav.mobile-menu {
 position: fixed!important;
 width: 100%;
}

h1.site-title a {
 width: 80%!important;
 text-align: left!important;
}  

.logo{
 float: left!important;
} 

.mobile-menu-icons{
 width: 20%!important;
 clear: none!important;
 text-align: right!important;
}	
}

Regards

[PYUREcrew]

perfect, topic solved! thanks <3

[Author]

Posts