Hamburger Menu Nav 7.1

Hey @tuanphan and @inside_the_square

How can we add other styling details, such as changing the background colour and aligning the text left, changing the line spacing and text colour?

I've tried adding things like background: #ffffff; but nothing is changing!

I’m looking for the same answer. Nothing to be found about this for the 7.1 version. Anyone?

You can try CSS for this.

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}

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}

 

 

Hi! Inside the square, I love your yourtube channel. I use this CSS code. How do I center the logo afterwards? I tried the "Edit Site Header" but I get this ( see image)

On 2/8/2020 at 8:50 AM, 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}

 

 Hey inside_the_square do you know how to make the hamburger menu display on the right hand side instead of left using this CSS in Squarespace 7.1?

When I currently shrink the browser window the hamburger is jumping from the left to the right so I just need it on the right the whole time please. 

Hi @nancydesignI have the same challenge for my website, please let me know if you found a way around this - thanks!

11 hours ago, user5475811 said:

Hi @nancydesignI have the same challenge for my website, please let me know if you found a way around this - thanks!

Can you share link to your site?

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

@inside_the_square

Thanks so much for sharing! When I do as you suggested, it pushes the logo to strange spots in the header (as it did with others). In my case, the logo is meant to be centered. Any ideas on that? Would also LOVE to move the hamburger to the right side if anybody knows how to do that. 

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

 

 

Agree with iannoli -- does anyone have code to fix the floating header issue?  Thanks!

On 3/26/2020 at 6:20 PM, nancydesign said:

Hey @tuanphan and @inside_the_square

How can we add other styling details, such as changing the background colour and aligning the text left, changing the line spacing and text colour?

I've tried adding things like background: #ffffff; but nothing is changing!

I have a similar issue to @nancydesign I think. I can't work out how to control the background colour of the hamburger navigation. My white logo gets lost on the white background. 

@MartyMeh To style on  version 7.1.

Link Alignment:

.header-menu-nav {text-align: left!important; margin-left: 15%!important;}

Page Background color:

.header-menu-bg {background: red!important;}

Add image as background to Page: (replace with your image.)

.header-menu-bg {background-image: url('https://static1.squarespace.com/static/5e04314e1e03733084a0d51a/t/5ece9831d9f131439a22411a/1590598888064/Cork-City-Centre-at-Night.png'); 
  background-repeat: no-repeat;
  background-size: cover;}

Space between links:  

.header-menu-nav-item {line-height: 20px!important;}

Link text :
.header-menu-nav-item > a {color: green!important;}

Floating header is set in the Header Edit option. Select Style > and toggle to Fixed. 

- John