Jump to content

CSS Stops working once site is published

Recommended Posts

Hello,

I have custom css to create a burger menu on desktop. This works while the site is in edit mode, however as soon as it is published, the burger menu displays but will not open the nav bar menu. Any help is appreciated! Code below:

EDIT: Upon further inverstigation, it is the JS below that breaks the menu, it works without the menu being moved next to the language picker.

@media only screen and (min-width: 760px) {
  
 	.header-burger {
		display:flex!important;
      	margin: 12px!important;
  	} 
  
	.header-nav {display:none!important}
  
	.header--menu-open .header-menu {
      display: flex!important; 
      opacity: 1!important; 			  
      visibility:visible!important;
  	}
  
  
	.header-menu-actions {
      display: none;
  	}
 
  
  	.header-menu-cta {
		display: none;
	}
  
	.header-menu-nav-item a {
    	font-size: 45px;
    	line-height: .8;
	}
}

 

<script>
  $(document).ready(function() { 
		$('.header-display-desktop .header-burger').insertAfter('.language-picker-desktop');
	});
</script>

 

Edited by Cancid
Update
Link to comment
  • Replies 4
  • Views 189
  • Created
  • Last Reply

Top Posters In This Topic

  • 4 weeks later...
On 2/10/2023 at 4:31 AM, Cancid said:

Oh gosh, so sorry I didn't include it and the late response. It is okapiconservation.org

Thanks @tuanphan you're a legend!

Hi,

It is fine to me. Click burger >> still open menu.

You can check again

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.