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

Brine Template - Mobile Menu Hidden by Hamburger Menu Overlay


TravisDavidson

Question

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!!

Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

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

Link to post
  • 0

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)

Link to post
  • 0

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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...