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 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.