Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Fixed header appearing over elements in mobile navigation


BrookeP

Question

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 post
  • Answers 0
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

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


×
×
  • Create New...