Jump to content

Fixed header appearing over elements in mobile navigation

Recommended Posts

Site URL: https://www.michellegonzalezphotos.com/

Implemented a custom mobile navigation menu, and for some reason on mobile screens, a fixed header is appearing OVER the mobile navigation menu. Been racking my brain for hours on what could be causing this issue. Doesn't appear in the mobile screen in the Squarespace backend, but does when testing on actual phone. Which makes it difficult to target the element itself in the Inspect window. Reckon I may need to adjust the z-index of an element?

Not sure if I have another element that could be causing the issue, but I've looked at everything and can't seem to figure this out. Any help would be greatly appreciated! Also happy to provide any other info that you feel would be helpful. 

Code used to implement a fixed header & to change on scroll here: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>  
 $(window).on("scroll", function() {
    if($(window).scrollTop() > 400) {
        $(".Header").addClass("on-scroll");
    } else {
       $(".Header").removeClass("on-scroll");
    }
});
</script>
.Header{
  background-color: transparent;
  width: 100%;
  position: fixed!important;
  transition: 0.2s all linear;
  -webkit-transition:background-color .4s;
  -moz-transition:background-color .4s;
  transition:background-color .4s;
  z-index: 999;
}

.on-scroll{
    background-color: #e6dcd1!important;
  z-index: 999;
}

.on-scroll .Header-nav-item{
    color: #000!important;
}


.Header-inner--bottom {
  padding-bottom: 20px;
}

.on-scroll .Header-branding-logo {
    visibility: hidden;
}
.on-scroll .Header-branding {
    background-image: url(https://static1.squarespace.com/static/5a47c003c027d80d1f85c73d/t/5e88a47dc8efd76b478354ac/1586013309515/primary-logo-black.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  transition: .4s;
  width: 220px;
}




Code used for custom mobile navigation menu here: 
 

///Mobile Overlay///
//mobile 

.Mobile-overlay-nav-item {  
    text-align: center;
}

.Mobile-overlay-menu {
    background-image: url(https://static1.squarespace.com/static/5a47c003c027d80d1f85c73d/t/5e91ced3cfe71128e10e1bcb/1586613973454/Venice+Italy+Wedding+Anniversary+Photography+Session-+Destination+Italy+Wedding+Photographer+-+Michelle+Gonzalez+Photography+-109+%281%29.jpg);
    background-color: #f5deb3;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw !important;
}

.Mobile-overlay-close {
    z-index: 999;
background:transparent !important;
}

.Mobile-overlay-nav--primary {
padding-top:60px;
}

.mobileLogo {
width: 190px;
  margin-top: -20px;
}

//mobile branding logo//
@media only screen and (max-width: 640px) { .Mobile-bar-branding {
    -webkit-filter: invert(100%) !important;
    filter: invert(100%) !important;
    filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }}


//Add this to disable logo  on desktop
@media screen and (min-width:760px) {
.mobileLogo {
display:none;
}

.Header-nav--primary .Header-nav-item:nth-child(1) {
display:none !important;
}
}

.Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child {
    padding-top: 0em !important;
}

.Mobile-overlay-folder-item {
      text-align: center !important;
  padding-top:20px;
  font-family: 'Danmark Medium';//change as necessary
}

 .Mobile-overlay-folder {
padding-top:100px;
}

.Mobile-overlay-folder-item--toggle-label {
  font-family: 'Danmark Medium';
}


//Add this to disable logo  on desktop
@media screen and (min-width:760px) {
.mobileLogo {
display:none;
}

.Header-nav--primary .Header-nav-item:nth-child(1) {
display:none !important;
}
}

.Mobile-overlay-nav--secondary .Mobile-overlay-nav-item:first-child {
    padding-top: 0em !important;
}

.Mobile-overlay-folder-item {
      text-align: center !important;
  padding-top:20px;
  font-family: 'Danmark Medium';//change as necessary
}

 .Mobile-overlay-folder {
padding-top:100px;
}

.Mobile-overlay-folder-item--toggle-label {
  font-family: 'Danmark Medium';
}

The image of what the issue looks like on a mobile screen is attached. I've also attached a screen recording of the issue. Hopefully someone can help me narrow this down!

 

WhatsApp Image 2020-04-14 at 2.55.06 PM.jpeg

Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.