Cancid

Hey @tuanphan, It does open rn on the live site, however we original had it moved over to be left of the "Contribute" button. I can successfully move it there and it works while the site is in edit mode, however on the live site the button becomes unclickable.

Oh gosh, so sorry I didn't include it and the late response. It is okapiconservation.org Thanks @tuanphan you're a legend!

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>

Thank you so much! Works perfectly.

Left of button. Between the button and the social icons.

Hi tuanphan, Thanks for responding again! You helped in the past. The password is HillMountainRiver3

Site URL: https://koi-paddlefish-bb2e.squarespace.com/ I have a custom desktop burger menu. I would like to position it to the left of the rest of the menu buttons instead of to the right. I can do this with: @media screen and (min-width:992px) { .header-title-nav-wrapper { order: 1; } .header .header-burger { order: 2; } .header-actions.header-actions--right { order: 3; } } However, this places the burger menu in the middle of the header, not next to the action buttons. How can I shift the burger menu to the right? I have tried using positioning properties, but depending on the screen size it is very inconsistent as to where the menu ends up, but admittedly I know very little about what I am doing. Thank you!

Site URL: https://koi-paddlefish-bb2e.squarespace.com/ Hello, I have managed to create a desktop burger menu using the following code: @media only screen and (min-width: 760px) { .header .header-burger { display:flex; margin: 30px; } .header-nav {display:none} .header--menu-open .header-menu { display: flex; opacity: 1; visibility: visible; text-align: left; } .header-menu-actions { display: none; } .header-menu-cta { display: none; } .header-menu-nav-item a { font-size: 45px; line-height: .8; } } However, the text appears on the far left side of the screen due to it being left-aligned. I would like to keep the text left-aligned, but center it to the screen. Any help would be appreciated! Site Password: HillMountainRiver3

Hi tuanphan, That does place them in the correct order, but leaves a large gap between the burger menu and the rest of the nav items. On another note, I would like the text of the burger menu to be left-aligned but centered on the screen. I have achieved the left align but cannot get it to center. Do you have any idea how to do this? Thank you!

Woops sorry! Here is the password: HillMountainRiver3 https://koi-paddlefish-bb2e.squarespace.com/

Site URL: https://koi-paddlefish-bb2e.squarespace.com/ Hello, I was able to recreate the mobile burger nav on desktop using the following code: @media only screen and (min-width: 760px) { .header-burger { display: flex; color: white; } .header-nav {display:none} } However, I would like to align the burger menu just left of the social icons. No alignment techniques I have used so far have worked except for hardcoding position, which does not resize correctly. Like so: .header-burger { display: flex; position: relative; left: 70%; color: white; } Any help would be great! Thanks!