7.1 Header Navigation: How to change positioning of cart, buttons, etc.

Hello!

I'd love to manually organise my header navigation content, 
the position of the cart and button is annoying me more than I'd like to admit..

If anyone has any advice, please alleviate my eyesore and I'll be very grateful. 

LINK: https://aardvark-jellyfish-fwmh.squarespace.com/
PASSWORD: milk

See image for current vs. goal. 

Add these code Design > Custom CSS

@media(min-width:1024px){
  .header-actions.header-actions--right{
    display: flex !important;
    .header-actions-action--cta{
      order: 1 !important;
    }
    .showOnDesktop{
      order: 2 !important;
    }
  }
}

Wow, you're incredible! I've been reading so much extensive, lengthy code and you nailed it in a few lines. Legend!

Hi @Web_Solutions Just wondering if you would be able to help me with a similar issue - I would like to get the button and the cart to sit along side the main nav menu items - at the moment they sit above and when I try to move them down it ends up sitting overtop of the nav, rather than along side it. Is there any way to do this?

Site: https://bloom-skin-aesthetics.squarespace.com

P/w: Leah2022!

On 11/2/2022 at 2:02 AM, Greenroom said:

Hi @Web_Solutions Just wondering if you would be able to help me with a similar issue - I would like to get the button and the cart to sit along side the main nav menu items - at the moment they sit above and when I try to move them down it ends up sitting overtop of the nav, rather than along side it. Is there any way to do this?

Site: https://bloom-skin-aesthetics.squarespace.com

P/w: Leah2022!

You mean make nav - button - cart same row?

Hi @tuanphan - Yes if possible - all the nav menu options, button and cart icon in one line across the width of the page below the logo

Is there a way to do that?

On 11/7/2022 at 5:14 AM, Greenroom said:

Hi @tuanphan - Yes if possible - all the nav menu options, button and cart icon in one line across the width of the page below the logo

Is there a way to do that?

Add to Last Line in Code Injection > Footer

<script>
  $(document).ready(function(){
    $('.header-display-desktop .header-actions.header-actions--right').clone().appendTo('nav.header-nav-list');
});
</script>
<style>
  .header-display-desktop>.header-actions {
    display: none !important;
}
  .header-title-nav-wrapper {
    flex: 0 0 100% !important;
}
  nav.header-nav-list {
    flex-wrap: nowrap;
    align-items: center;
}
</style>