Hamburger Menu Nav across all devices (version 7.1)

tuanphan · October 10, 2022

On 10/9/2022 at 3:46 AM, thedesigndaily said:

No, just looking for them to be under the "x" (when the hamburger is "open"). -- Like they would appear on mobile.

Can you take a screenshot current items in Pages > Main Navigation?

thedesigndaily · October 10, 2022

On 10/10/2022 at 5:43 AM, tuanphan said:

Can you take a screenshot current items in Pages > Main Navigation?

@tuanphan It's actually currently empty, b/c the pages were generating another hamburger in the middle of the header, right under my logo. That's why I'm baffled as to where to even add any menu items.

When I *did* have pages in the main nav, the menu was showing up normally on mobile.

Edited October 11, 2022 by thedesigndaily

tuanphan · October 12, 2022

On 10/10/2022 at 11:57 PM, thedesigndaily said:

@tuanphan It's actually currently empty, b/c the pages were generating another hamburger in the middle of the header, right under my logo. That's why I'm baffled as to where to even add any menu items.

When I *did* have pages in the main nav, the menu was showing up normally on mobile.

If you don't add any items to Main Navigation, no way to show items on burger menu.

By default, for items to appear in Normal nav or burger nav, those items need to be placed in Pages > Main Navigation.

You can bring them back & find another way.

thedesigndaily · October 12, 2022

4 hours ago, tuanphan said:

If you don't add any items to Main Navigation, no way to show items on burger menu.

By default, for items to appear in Normal nav or burger nav, those items need to be placed in Pages > Main Navigation.

You can bring them back & find another way.

@tuanphan Thank you. The pages are added back. Nothing still showing on desktop when the hamburger is open. Social icon also gone. (At least the "2nd" hamburger is no longer showing under the logo). Menu items *do* show on mobile, but social icon gone and now links there are underlined. Thanks again for all of your help!

https://swordfish-toucan-ymsh.squarespace.com/config/pages

pw: blueangel

Edited October 12, 2022 by thedesigndaily

tuanphan · October 15, 2022

On 10/12/2022 at 11:35 PM, thedesigndaily said:

@tuanphan Thank you. The pages are added back. Nothing still showing on desktop when the hamburger is open. Social icon also gone. (At least the "2nd" hamburger is no longer showing under the logo). Menu items *do* show on mobile, but social icon gone and now links there are underlined. Thanks again for all of your help!

https://swordfish-toucan-ymsh.squarespace.com/config/pages

pw: blueangel

Can you send all code in your CSS box?

LaurelMcQ · October 17, 2022

I have tried all codes in this thread and still nothing is working.

My website is https://nectarine-chiton-2sne.squarespace.com/ PW: crest

How do I force the hamburger menu on desktop/at all times?

thedesigndaily · October 18, 2022

On 10/15/2022 at 2:19 AM, tuanphan said:

Can you send all code in your CSS box?

Thanks @tuanphan -

.header-burger {
display: block !important;
}

/* Pagination arrows width */
.item-pagination-link .item-pagination-icon svg {
width: 10px;
//Remove Link Underline
h1,h2,h3,h4,p,code,nav {
a,span {
background-image: none!important;
text-decoration: none!important;
}
}
}
a {
text-decoration: none !important;
}

.sqs-widgets-audio-player.light {
background: #edebe8;
}

.sqs-block-horizontalrule hr {
color: #EDEBE8;
background-color: #EDEBE8;
height: 2px;}

body.tweak-site-width-option-full-width.tweak-footer-show:not(.tweak-site-border-show), body.tweak-site-width-option-full-background.tweak-footer-show:not(.tweak-site-border-show) {
background-color: #EDEBE8;
}
a{
background-image:unset !Important;
}

.blog-more-link::after {
background: none !important;
}

body:not([data-animation-state="booted"]) > * {
opacity: 0;
}
/* Make list images clickable */
li.list-item {
position: relative !important;
}
.list-item-content__button-container {
position: absolute !important;
top: 0;
bottom: 0;
left: 0;
right: 0;

a.list-item-content__button.sqs-block-button-element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
color: transparent !important;
background-color: transparent !important;
}
}
/* Make list images clickable */
li.list-item {
position: relative !important;
}
.list-item-content__button-container {
position: absolute !important;
top: 0;
bottom: 0;
left: 0;
right: 0;

a.list-item-content__button.sqs-block-button-element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
color: transparent !important;
background-color: transparent !important;
}}

@media screen and (max-width:767px) {
.header-title-logo {
text-align: center;
}
}

a.header-nav-folder-title:before {
content: "\e030";
font-family: 'squarespace-ui-font';
visibility: visible;
font-size: 30px;
}

/* Header - Show social icons */
.header-actions.header-actions--right {
display: flex !important;
}

.header-nav {visibility:hidden!important}

tuanphan · October 23, 2022

On 10/18/2022 at 2:00 AM, LaurelMcQ said:

I have tried all codes in this thread and still nothing is working.

My website is https://nectarine-chiton-2sne.squarespace.com/ PW: crest

How do I force the hamburger menu on desktop/at all times?

Add to Design > Custom CSS

/* 768 for tablet - desktop - 992 for desktop */
@media screen and (min-width:768px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

tuanphan · October 23, 2022

On 10/18/2022 at 10:16 PM, thedesigndaily said:

Thanks @tuanphan -

.header-burger {
display: block !important;
}

/* Pagination arrows width */
.item-pagination-link .item-pagination-icon svg {
width: 10px;
//Remove Link Underline
h1,h2,h3,h4,p,code,nav {
a,span {
background-image: none!important;
text-decoration: none!important;
}
}
}
a {
text-decoration: none !important;
}

.sqs-widgets-audio-player.light {
background: #edebe8;
}

.sqs-block-horizontalrule hr {
color: #EDEBE8;
background-color: #EDEBE8;
height: 2px;}

body.tweak-site-width-option-full-width.tweak-footer-show:not(.tweak-site-border-show), body.tweak-site-width-option-full-background.tweak-footer-show:not(.tweak-site-border-show) {
background-color: #EDEBE8;
}
a{
background-image:unset !Important;
}

.blog-more-link::after {
background: none !important;
}

body:not([data-animation-state="booted"]) > * {
opacity: 0;
}
/* Make list images clickable */
li.list-item {
position: relative !important;
}
.list-item-content__button-container {
position: absolute !important;
top: 0;
bottom: 0;
left: 0;
right: 0;

a.list-item-content__button.sqs-block-button-element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
color: transparent !important;
background-color: transparent !important;
}
}
/* Make list images clickable */
li.list-item {
position: relative !important;
}
.list-item-content__button-container {
position: absolute !important;
top: 0;
bottom: 0;
left: 0;
right: 0;

a.list-item-content__button.sqs-block-button-element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
color: transparent !important;
background-color: transparent !important;
}}

@media screen and (max-width:767px) {
.header-title-logo {
text-align: center;
}
}

a.header-nav-folder-title:before {
content: "\e030";
font-family: 'squarespace-ui-font';
visibility: visible;
font-size: 30px;
}

/* Header - Show social icons */
.header-actions.header-actions--right {
display: flex !important;
}

.header-nav {visibility:hidden!important}

Remove this code

.header-nav {
    visibility: hidden !important
}

thedesigndaily · October 29, 2022

On 10/22/2022 at 6:15 PM, tuanphan said:
Remove this code
.header-nav {
    visibility: hidden !important
}

Thank you. Tried this. It just restores the main nav again. Hamburger still doing / showing nothing (it becomes the "x" when clicked, but nothing else shows).

tuanphan · October 31, 2022

On 10/30/2022 at 3:38 AM, thedesigndaily said:

Thank you. Tried this. It just restores the main nav again. Hamburger still doing / showing nothing (it becomes the "x" when clicked, but nothing else shows).

It shows fine to me

manyhats · December 13, 2022

Jumping on board this thread in the hopes that one of you fine people can help me. I have extremely little understanding of code but I'm skilled at copy/paste which is how I got this far! :)

On our church's website we have a welcome page which has a different design/layout from all the others. I'm adding code to the advanced section on this specific page so that it applies only to that page.

What I'm trying to accomplish:

replace logo with all white version [done]
show hamburger button in place of the menu on the right [done]
make the hamburger button white when closed [edit: done!]
make the hamburger button black when open [edit: done!]
make the menu that opens only take 1/3 of the screen on the right [edit: done!]
make the menu options not show up on the left side of the screen when clicking through

Here is the code that I'm currently using:

Quote

<style>
/* remove gradient style from header on this page */
body:not(.header--menu-open) .header .header-announcement-bar-wrapper [data-header-style="gradient"][data-gradient-type="faded"].header-background-gradient {
background: unset !important;
}
</style>

<style>
/* replace the logo with white version */
div.header-title-logo a {
content:url("https://images.squarespace-cdn.com/content/5f8b075cff3eff7346e39c38/81b95a06-be43-4924-a389-90599ad635b4/DEFC_PrimaryMark_white.png?content-type=image%2Fpng") !important;
max-width: 290px;
/* if logo needs to be centered */
margin-left: auto;
margin-right: auto;
}
</style>

<style>
/* show burger menu on desktop */
.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}
</style>

Thanks for the help!

Edited December 19, 2022 by manyhats
marking what was solved

tuanphan · December 17, 2022

On 12/14/2022 at 12:06 AM, manyhats said:

Jumping on board this thread in the hopes that one of you fine people can help me. I have extremely little understanding of code but I'm skilled at copy/paste which is how I got this far! 🙂

site: https://www.dewittefc.org/test-welcome
no password

On our church's website we have a welcome page which has a different design/layout from all the others. I'm adding code to the advanced section on this specific page so that it applies only to that page.

What I'm trying to accomplish:

replace logo with all white version [done]

show hamburger button in place of the menu on the right [done]

make the hamburger button white when closed

make the hamburger button black when open

make the menu that opens only take 1/3 of the screen on the right

make the menu options not show up on the left side of the screen when clicking through

Here is the code that I'm currently using:

Thanks for the help!

Use this CSS under your code

<style>
  body:not(.header--menu-open) .burger-inner>div {
    background-color: white !important;
}
  @media screen and (min-width:768px) {
  .header-menu {
    left: unset;
    width: 33.333%;
}
  }
</style>

manyhats · December 19, 2022

Fantastic! Thank you so much!

BrookeMadison · January 18, 2023

How can I make sure the hamburger menu is positioned to the left instead of the right?

https://www.neflsoberlivingalliance.org/home

tuanphan · January 19, 2023

On 1/18/2023 at 11:47 PM, BrookeMadison said:

How can I make sure the hamburger menu is positioned to the left instead of the right?

https://www.neflsoberlivingalliance.org/home

Add to Design > Custom CSS

.header .header-burger {
    order: 1 !important;
}
.header-title-nav-wrapper {
    order: 2;
}
.header-actions.header-actions--right {
    order: 3;
}

mbockmaster · January 23, 2023

On 1/19/2023 at 6:36 PM, tuanphan said:
Add to Design > Custom CSS
.header .header-burger {
    order: 1 !important;
}
.header-title-nav-wrapper {
    order: 2;
}
.header-actions.header-actions--right {
    order: 3;
}

This thread has been immensely helpful! Hoping you can help with one thing: After adding the code above, my logo is off centre. I'm still wrapping my head around flex, can you help?

tuanphan · January 27, 2023

On 1/24/2023 at 1:42 AM, mbockmaster said:

This thread has been immensely helpful! Hoping you can help with one thing: After adding the code above, my logo is off centre. I'm still wrapping my head around flex, can you help?

Hi,

What is your site url? We can check easier

mbockmaster · January 31, 2023

On 1/26/2023 at 8:59 PM, tuanphan said:

Hi,

What is your site url? We can check easier

Thanks!

https://flatworm-chimes-lxjd.squarespace.com/

PW: SarahKris

tuanphan · February 3, 2023

On 1/31/2023 at 11:40 PM, mbockmaster said:

Thanks!

https://flatworm-chimes-lxjd.squarespace.com/

PW: SarahKris

Add this code under

.header-layout-branding-center .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

mbockmaster · February 3, 2023

11 hours ago, tuanphan said:

Add this code under

.header-layout-branding-center .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

Thank you SO much!!!

atfirstblink · March 25, 2023

@tuanphan can you help me isolate the "plan your visit" call to action button from the burger menu I've created and display it on the left side of the logo in the navigation pls?

https://playseum-trial.squarespace.com/

pw: playseum

tuanphan · March 29, 2023

On 3/25/2023 at 9:31 PM, atfirstblink said:

@tuanphan can you help me isolate the "plan your visit" call to action button from the burger menu I've created and display it on the left side of the logo in the navigation pls?

https://playseum-trial.squarespace.com/

pw: playseum

Add to Design > Custom CSS

/* Button next to burger */
.header-actions.header-actions--right {
    visibility: visible !important;
}

atfirstblink · March 30, 2023

@tuanphan This worked thanks but there are some glitches here. This is how the burger menu shows up when I click on the lines.

Also I need to move the button to the left of the logo and keep the burger lines on the right instead of both being adjacent to each other.

Pls help me fix this. https://playseum-trial.squarespace.com/

pw: playseum

tuanphan · April 3, 2023

On 3/30/2023 at 1:40 PM, atfirstblink said:

@tuanphan This worked thanks but there are some glitches here. This is how the burger menu shows up when I click on the lines.

Also I need to move the button to the left of the logo and keep the burger lines on the right instead of both being adjacent to each other.

Pls help me fix this. https://playseum-trial.squarespace.com/

pw: playseum

I see you figured it out?

Hamburger Menu Nav across all devices (version 7.1)

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

inside_the_square

JOHNMD

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources