Hamburger Menu Nav across all devices (version 7.1)

On 4/3/2023 at 7:35 AM, tuanphan said:

I see you figured it out?

I just ended up buying a plug-in for this 🙂

Okay coming into this thread with a new issue: 

The only items in the navigation menu that are clickable are external links and not direct pages. I have an item called "Shop" and it's an external link and it's working on the navigation but nothing else is.. hmm..

*Editing to add that the nav items are working fine on mobile but not on desktop.

My site is adriannexo.com

Here is the code I currently have:

//Hamburger Nav on Desktop//
.header .header-burger{display:flex} 
.header-nav, .header-actions {display:none} 
.header--menu-open .header-menu { opacity: 1; visibility: visible;}
/* menu links font and spacing on desktop only  */
@media screen and (min-width:768px) {
.header-menu-nav-item a {line-height: 0px!important;
    font-size: 2rem !important;
    margin: 3vw 0vw !important;
  }}
/* Remove overlay scrollbar */
@media screen and (min-width:768px) {
.header-menu-nav-folder.header-menu-nav-folder--active {
    overflow: hidden;
} }
/* Center logo on desktop */
 @media screen and (min-width:768px) { .header-layout-branding-center .header-title a {
     position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    text-align: center;
   }}

Thank you all so much!!!

On 4/5/2023 at 8:40 PM, adriannexo said:

Okay coming into this thread with a new issue: 

The only items in the navigation menu that are clickable are external links and not direct pages. I have an item called "Shop" and it's an external link and it's working on the navigation but nothing else is.. hmm..

*Editing to add that the nav items are working fine on mobile but not on desktop.

My site is adriannexo.com

Here is the code I currently have:

//Hamburger Nav on Desktop//
.header .header-burger{display:flex} 
.header-nav, .header-actions {display:none} 
.header--menu-open .header-menu { opacity: 1; visibility: visible;}
/* menu links font and spacing on desktop only  */
@media screen and (min-width:768px) {
.header-menu-nav-item a {line-height: 0px!important;
    font-size: 2rem !important;
    margin: 3vw 0vw !important;
  }}
/* Remove overlay scrollbar */
@media screen and (min-width:768px) {
.header-menu-nav-folder.header-menu-nav-folder--active {
    overflow: hidden;
} }
/* Center logo on desktop */
 @media screen and (min-width:768px) { .header-layout-branding-center .header-title a {
     position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    text-align: center;
   }}

Thank you all so much!!!

All look fine. Did you solve it?

On 4/7/2023 at 9:24 PM, tuanphan said:

All look fine. Did you solve it?

Ah yes!!! Thank you!

I noticed that this code was messing with it somehow:

@media screen and (min-width:768px) {
.header-menu-nav-item a {line-height: 0px!important;
    font-size: 2rem !important;
    margin: 3vw 0vw !important;

So I now have it as:

@media screen and (min-width:768px) {
  .header-menu-nav-item a {
  font-size: 2rem !important;
  margin: 1vw 0vw !important;}
}

In case this happened to anyone else 🙂 

Hello - I've added the Hamburger navigation and re-sized text and now the underline (which shows in the menu when you're on a specific page) is no longer beneath it but through the middle of the text. How do i fix this?

Website is www.eventden.com.au 

On 6/14/2023 at 10:50 AM, EventDen said:

Hello - I've added the Hamburger navigation and re-sized text and now the underline (which shows in the menu when you're on a specific page) is no longer beneath it but through the middle of the text. How do i fix this?

Website is www.eventden.com.au 

Because you set line height of menu items to 0, it will create some problems (eg: items not clickable)

Change it to 20px or 30px

Is it possible to include the word "menu" next to the hamburger like this site does? 

https://shmarinas.com

1 hour ago, laurensmithart said:

Is it possible to include the word "menu" next to the hamburger like this site does?

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

On 2/7/2020 at 5:50 PM, inside_the_square said:

Hey @rsmith3074 - I realize you posted this weeks ago but I just now got back onto the forum and wanted to share the answer in case you still needed it! I use CSS to do this; this code does the trick for me. Hope it helps! 

 

.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, .header-actions {visibility:hidden!important}

 

 

OMG ive been looking for this and it worked perfectly, thank you!!!

Hi! This has all been so helpful, thank you so much. I'm still running into a bit of an issue though - my social link is still left aligned and I want it centred with everything else.

This is the code I have:

//header//
.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, {visibility:hidden!important}
.header-menu-nav {text-align: center!important; }
div.header-menu-nav-item a {
    font-size: 30px !important;
    padding: 20px;
}
.header .header-burger {
    order: 1 !important;
}
.header-title-nav-wrapper {
    order: 2;
}
.header-actions.header-actions--right {
    order: 3;
}

Can someone help? Thank you!

23 hours ago, taylorlaidlaw said:

Hi! This has all been so helpful, thank you so much. I'm still running into a bit of an issue though - my social link is still left aligned and I want it centred with everything else.

 

 

This is the code I have:

//header//
.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}
.header-nav, {visibility:hidden!important}
.header-menu-nav {text-align: center!important; }
div.header-menu-nav-item a {
    font-size: 30px !important;
    padding: 20px;
}
.header .header-burger {
    order: 1 !important;
}
.header-title-nav-wrapper {
    order: 2;
}
.header-actions.header-actions--right {
    order: 3;
}

 

 

Can someone help? Thank you!

 

What is your site url?

coast-and-oak.squarespace.com

password: coast23

I removed the social links for now because I couldn't figure it out

On 7/26/2023 at 7:30 AM, taylorlaidlaw said:

coast-and-oak.squarespace.com

password: coast23

 

I removed the social links for now because I couldn't figure it out

Can you enable social? We can check problem easier