CMS Development

krissyhack
Mitglied

Sticky nav bar - issue on mobile

lösung

Hey! We recently added a sticky nav bar to our desktop site at www.creativehci.com however when you go to our mobile site, you can see the entire nav bar and it essentially won't go away. See screenshots below: 

 

This is the code I added in: 

.header-container {
    position: fixed;
    height: 127px;
    z-index: 9999999;
    width: 100%;
    background: white;
}
.page-headers{ 
  margin-top: 90px
}
}

yet when you go to our mobile site, this is now what you see on every page: File (1).jpgFile.jpg

 

even if i try clicking on the menu to make it dissapear it wont. I am going to remove the CSS for the time being until I can find an answer for this, but anything helps! 

0 Upvotes
1 Akzeptierte Lösung
valerajoey
Lösung
Teilnehmer/-in | Platinum Partner
Teilnehmer/-in | Platinum Partner

Sticky nav bar - issue on mobile

lösung

Hey there, you can try to cancel out your added style on mobile 

.header-container {
    position: fixed;
    height: 127px;
    z-index: 9999999;
    width: 100%;
    background: white;
}
.page-headers{ 
  margin-top: 90px
}

@media (max-width: 768){
.header-container {
position: static;
height: auto;
z-index: 9999999;
width: 100%;
background: white;
}
}

 

Lösung in ursprünglichem Beitrag anzeigen

2 Antworten
valerajoey
Lösung
Teilnehmer/-in | Platinum Partner
Teilnehmer/-in | Platinum Partner

Sticky nav bar - issue on mobile

lösung

Hey there, you can try to cancel out your added style on mobile 

.header-container {
    position: fixed;
    height: 127px;
    z-index: 9999999;
    width: 100%;
    background: white;
}
.page-headers{ 
  margin-top: 90px
}

@media (max-width: 768){
.header-container {
position: static;
height: auto;
z-index: 9999999;
width: 100%;
background: white;
}
}

 

krissyhack
Mitglied

Sticky nav bar - issue on mobile

lösung

Inserted that code, however now our banner images are sticky and covering up the web page itself.... 

0 Upvotes