TravisDavidson Posted April 29, 2020 Share Posted April 29, 2020 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 comment
tuanphan Posted April 30, 2020 Share Posted April 30, 2020 Can you post code you used here? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
TravisDavidson Posted May 1, 2020 Author Share Posted May 1, 2020 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 comment
tuanphan Posted May 2, 2020 Share Posted May 2, 2020 Hi. It seems you solved? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
raeowens Posted May 3, 2020 Share Posted May 3, 2020 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 comment
abawagih Posted November 30, 2020 Share Posted November 30, 2020 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 comment
tuanphan Posted December 3, 2020 Share Posted December 3, 2020 If you share site url, we can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.