Brine Template - Mobile Menu Hidden by Hamburger Menu Overlay

Site URL: https://tangerine-kumquat-nw9z.squarespace.com/

Hi there! I'm having some trouble with the Brine Template. I have applied some CSS to adjust my overlay menu in mobile (center the menu, make it slightly transparent), but when the overlay is active, the header - including the hamburger - disappears. I have played with the z-index, but to no avail. One odd behaviour is that the buttons for the title and menu are still clickable, but not the text / icon. Any ideas out there?

Thanks!!

Can you post code you used here?

On 4/30/2020 at 7:58 AM, tuanphan said:

Can you post code you used here?

Hi tuanphan, thanks for the reply! Here's my custom css:

 

//DIN - LOAD

@font-face {
  font-family: din-regular;
  src: url(https://static1.squarespace.com/static/5e98d5de4ed53233e4203774/t/5e99ed0fd8a69125568a4096/1587145999867/DINOT.ttf)
}

@font-face {
  font-family: din-italic;
  src: url(https://static1.squarespace.com/static/5e98d5de4ed53233e4203774/t/5e99ed1fa9d15b419de7eef1/1587146015705/DINOT-Italic.ttf)
}

@font-face {
  font-family: din-medium;
  src: url(https://static1.squarespace.com/static/5e98d5de4ed53233e4203774/t/5e99ed17189d1a5455af50fe/1587146007309/DINOT-Medium.ttf)
}

// DIN - ASSIGN

.has-site-title .Header-branding, .has-site-title .Mobile-bar-branding, .Header-nav, .Footer-nav, body, .Index-gallery-item-content-heading {
  font-family: 'din-regular';
  letter-spacing: .1em;
  font-weight: normal;
}

.Mobile-overlay-nav-item {
  font-family: 'din-regular'!important;
  letter-spacing: .1em!important;
  font-weight: normal!important;
}

//PAGE TITLE TEXT
h1 {
  font-family: 'din-regular';
  letter-spacing: .1em;
  font-weight: normal;
  font-size: 22px;
  line-height: 26px;
}

//PAGE BODY TEXT
h2 {
  font-family: 'din-regular'; 
  letter-spacing: 0em; 
  font-weight: normal!important;
  font-size: 15px;
  line-height: 18px;
}

//PAGE BODY TEXT ITALIC
h3 {
  font-family: 'din-italic'; 
  letter-spacing: 0em; 
  font-weight: normal!important;
  font-size: 15px;
  line-height: 18px;
}

p {font-family: 'din-italic';
  font-weight: normal;
  letter-spacing: 0em;
  font-size: 12px;
  line-height: 15px;
}

//HEADER

.Header {
  position: fixed!important;
  z-index: 890;
  width: 95%;
}

.Header-nav-item:hover { text-decoration: underline!important;
}

@media (max-width: 767px) {
  .Main {
    padding-top: 0px;
  }
}

@media (min-width: 768px) {
  .Main {
    padding-top: 80px;
  }
}

.Mobile-bar {
  position: fixed!important;
  z-index: 890;
}

.tweak-mobile-bar-top-fixed .Mobile-bar--top {
  position: fixed;
  padding-top: 18px;
  padding-bottom: 34px;
  padding-left: 2.5%;
  padding-right: 2.5%;
  z-index: 1010;
}

.Mobile-bar-branding, .Mobile-bar-menu  {
  padding: 0px;
}

.Mobile-bar .Mobile-bar--bottom {
  padding: 0px;
}

//MOBILE OVERLAY 

.Mobile-overlay {
  display: none;
  position: fixed;
  top: 70px;
  left: 2.5%;
  right: 2.5%;
  width: 95%;
  height: 75vh;
  background-color: transparent;
  opacity: .85;
}

.Mobile-overlay-menu {
  position: absolute;
  top: 0px;
  width: 100%;
  bottom: 0px;
}

.Mobile-overlay-menu-main {
  position: relative;
  display: flex;
  top: 0px;
  align-items: center;
  justify-content: center;
  height: 100%;
}

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

.Mobile-overlay-nav-item:hover { text-decoration: underline!important;
}

//ACTIVE OVERLAY

.tweak-mobile-overlay-slide-origin-left .Mobile-overlay-menu {
  transform: translate3d(0,0,0);
}

.enable-load-effects .Mobile-overlay {
  animation: none;
}

.is-mobile-overlay-active .Mobile-overlay {
  display: block;
  position: fixed;
  top: 70px;
  left: 2.5%;
  right: 2.5%;
  width: 95%;
  height: 75vh;
  background-color: transparent;
  opacity: .85;
}

.Mobile-overlay-close {
  display: none;
}

.is-mobile-overlay-active .Mobile-overlay-close {
  display: none;
}

//FOOTER

.Footer-blocks--top {
  display: none;
  visibility: hidden;
}

.Footer-middle {
  display: none;
  visibility: hidden;
}

.Footer-blocks h3 {
  font-size: 9px;
  letter-spacing: .1em;
}

#collection-5e99f28dced7333fd3e2de20 .Footer-blocks {
  display: none;
  visibility: hidden;
}

.tweak-footer-layout-columns .Footer-blocks--bottom { 
  position: fixed;
  z-index: 1000;
  background-color: #e6e6e6;
  left: 2.5%;
  right: 2.5%;
  bottom: 0px;
  padding-top: 0px;
}

#block-yui_3_17_2_1_1587741109394_5185 {
  padding-top: 0px!important;
}

//SCROLLBARS

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

//BUTTONS

button, body {
  -webkit-tap-highlight-color: transparent;
}

//GALLERY - HOME

@media (max-width: 767px) {
  #block-yui_3_17_2_1_1588183452388_5073 {
  display: none; 
  }
}

@media (min-width: 768px) {
  #block-yui_3_17_2_1_1587159120139_7619 {
  display: none; 
  }
}

@media (max-width: 767px) { .sqs-gallery-design-stacked {
  min-height: calc(100vh - 100%);
  height: 75vh!important;
  }
}

@media (min-width: 768px) { .sqs-gallery-design-stacked {
  min-height: calc(100vh - 100%);
  height: 85vh!important;
  }
}

.sqs-gallery-design-stacked-slide {
  top: 50%!important;
  left: 50%!important;
  transform: translate(-50%, -50%);
}

.horizontalrule-block {
  padding-top: 0px;
  transform: translate(0,-8px);
}

//GALLERY - WORK

@media screen and (max-width: 767px) { 
    .sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 0px!important;
    padding-bottom: 0px;
  }
}

.sqs-block-gallery {
  padding-top: 12px;
  padding-bottom: 0px;
}

@media (max-width: 767px) { #block-yui_3_17_2_1_1588001368263_7446 {
  min-height: calc(100vh - 100%);
  height: 75vh!important;
  }
}

@media (min-width: 768px) { #block-yui_3_17_2_1_1588001368263_7446 {
  min-height: calc(100vh - 100%);
  height: 90vh!important;
  }
}

.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
    text-align: left;
    font-size: 12px;
    margin-top: 3px;
}

@media (max-width: 767px) {.sqs-gallery-block-grid .slide .margin-wrapper {
  margin-bottom: 6px!important;
  }
}

@media (max-width: 767px) {
.sqs-gallery-design-grid-slide {
  width: 100%!important;
  }
}

.horizontalrule-block {
  padding-bottom: 0px;
}

//PROJECT PAGES

@media (max-width: 767px) {
  .sqs-gallery-block-grid .slide .margin-wrapper {
    margin-bottom: 12px!important;
  }
}

.image-block {
  padding-top: 0px;
}

@media (max-width: 767px) {
  .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .image-block-wrapper {
  height: 50vh;
  padding: 0!important;
  }
.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img {
  height: 50vh!important;
  width: initial!important;
  left: 50%!important;
  top: 50%!important;
  transform: translate(-50%, -50%);
  }
}

@media (min-width: 768px) {
  .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .image-block-wrapper {
  height: 85vh;
  padding: 0!important;
  }
.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img {
  height: initial!important;
  width: 100%!important;
  left: 50%!important;
  top: 50%!important;
  transform: translate(-50%, -50%);
  }
}

//STUDIO GALLERY

@media (max-width: 767px) {
  .sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 .sqs-gallery-design-grid-slide {
    width: (100%/2)!important;
    clear: none!important;
  }
}

//LIGHTBOX

.sqs-lightbox-close {
  color: #404040!important;
  padding: 0px!important;
  top: 17px!important;
  right: 2.5%!important;
}

.sqs-lightbox-slideshow {
  height: 100vh!important;
}

//RELATED SUMMARY

.sqs-block-summary-v2 {
  margin-right: -12px;
  padding-bottom: 0px;
}

@media (max-width: 767px) {
  .summary-title {
    font-size: 9px!important;
    transform: translateY(-10px);
  }
}

@media (min-width: 768px) {
  .summary-title {
    font-size: 12px!important;
    transform: translateY(-8px);
  }
}

@media (max-width: 767px) {
  .summary-heading {
    display: block!important;
    font-size: 12px!important;
  }
}

@media (min-width: 768px) {
  .summary-heading {
    display: block!important;
    font-size: 15px!important;
  }
}

@media (max-width: 767px) {.summary-item {
  width: (100%/2)!important;
  clear: none!important;
  }
  .sqs-gallery-design-autogrid-slide:nth-child(n+3) {
    display: none;
  }
}

@media (min-width: 768px) {.summary-item {
  width: (100%/5)!important;
  clear: none!important;
  }
    .sqs-gallery-design-autogrid-slide:nth-child(n+6) {
      display: none;
  }
}

.sqs-block-summary-v2 .summary-block-setting-show-title .summary-thumbnail-container {
  margin-right: 12px;
  margin-bottom: 12px;
}

.summary-metadata {
  display: none!important;
}

Hi. It seems you solved?

Hey I was having the same issue! What seemed to work for me was moving my brand icon to the top left (previously had it top center) and shifting primary nav to secondary nav. Problem solved. Not my ideal layout for the header BUT I'd rather have it look a little differently than I anticipated over the most important parts of my menu not appearing at all on mobile. Honestly this is probably a sign of the times that we need to switch to 7.1 if we haven't already...(that'd be me haha)

Hey there,

Have you been able to resolve this issue? I'm having the same issue after adding few tweeks to extend the first section's banner image to the top nav bar and changing the nav BG color when scrolling down.

Cheers,

AB

If you share site url, we can check easier