Sticky nav bar - issue on mobile

SOLVE
New Contributor

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! 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Regular Contributor

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

 

2 Replies 2
Highlighted
Regular Contributor

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

 

New Contributor

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

Reply
0 Upvotes