Brine Template - Mobile Menu Hidden by Hamburger Menu Overlay

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