Jump to content

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

Recommended Posts

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. 

Navigation.jpg

Link to comment

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;
    }
  }
}

 

 

 

Edited by Web_Solutions

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • 6 months later...

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!

Link to comment
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?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Marcus_SQSP changed the title to 7.1 Header Navigation: How to change positioning of cart, buttons, etc.
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>

image.thumb.png.5af5d2e6755372381fb9b91617a68542.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.