CMS Development

krissyhack
Member

Sticky nav bar - issue on mobile

SOLVE

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 Accepted solution
valerajoey
Solution
Participant | Platinum Partner
Participant | Platinum Partner

Sticky nav bar - issue on mobile

SOLVE

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;
}
}

 

View solution in original post

2 Replies 2
valerajoey
Solution
Participant | Platinum Partner
Participant | Platinum Partner

Sticky nav bar - issue on mobile

SOLVE

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
Member

Sticky nav bar - issue on mobile

SOLVE

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

0 Upvotes