Center logo and Right align navigation

I've been using the 7.1 version of squarespace.  For your header, it only allows you to align things a certain way.  For example, if you want the logo in the middle then your navigation links will be to the left and buttons to the right.  So right now my logo is in the middle, the "shop" link is to the left, and the "cart" button is to the right.  I want to move my "shop" link to the right, next to the cart icon and keep the logo centered.  What is the css to do this?

Have you solved this yet? If not, can you share site url? We can check easiser.

So I like that the header is in the center and the cart icon is on the right, but you can see how the "Shop" navigation link is on the left side.  I would like to move it next to the cart icon while keeping the logo in the center.

Please set up a site-wide password. Post the password here and then we can take a look at your issue.

https://seal-kale-pb64.squarespace.com/

On 9/28/2020 at 1:17 AM, tuanphan said:

Have you solved this yet? If not, can you share site url? We can check easiser.

I sent a screenshot. Are you able to help without url? I don't have any code on the item and it is squarespace 7.1, I am looking for a code to be able to move the "Shop" button to the right side of the page.  In the header settings, it only allows you to choose left alignment. 

If you can't provide site url, we need to create a trial site, make layout same as you, then test code. It is very time consuming, and I don't think anyone here is willing to do it. Whereas if you share the url, we only take 3-5 minutes to check.

9 hours ago, tuanphan said:

If you can't provide site url, we need to create a trial site, make layout same as you, then test code. It is very time consuming, and I don't think anyone here is willing to do it. Whereas if you share the url, we only take 3-5 minutes to check.

For some reason it does not allow me to create a site password to share the URL, and my site is not yet published. Are you able to share a code for me to try myself?  There is not other coding.

If you have problem with password, you can contact Squarespace Customer Care.

We need to check page structure code to give the code.

if not checked, we have no idea what the code will need.

Did you manage to solve this? I'm looking to do the same thing!

Site URL: https://chicory-sprout-9x46.squarespace.com/config/design/custom-css

Hello - I'm looking to place my navigation on the right side of the center logo. Does anyone have a code that can do this? Thanks!

A simple solution without seeing your site or it's code is to set the logo to be on the left with menu right and then change the flex box to allow the logo to rest up against your menu.

Try this to see what you get:

.header-title-nav-wrapper{
	flex-grow: 1;
	flex-shrink: 0;
	margin-left:auto;
}

.header-layout-nav-right .header-nav {

	margin-left: unset !important;

}

.header-nav {
	flex-grow: unset !important;

}

.header-title {
	margin-left: auto;
}

The only way to get a logo that sits exactly in the middle with your nav items wrapping to the right is to change a lot of the code/styles - which as has been mentioned above, would require a shared link to your site.

As an addition to the above, if for some reason you ABSOLUTELY cannot share a site link, play with the header-title margin-left value.  a value of around 50% should place the logo somewhere near the middle, but again without seeing your site we cannot see what other elements you have in the header to know.

 

.header-title {
	margin-left: 50%;
}

Hi there! I believe I'm having this same issue so I am curious to know if this issue was fixed and code was found for the issue? 

@IgnitePerth I tried your suggested code and it worked great with a 40% margin on the web view to get the site title centered, but once the site is viewed via the mobile view, the margin code sets the the site title over the top of the mobile nav burger. Do you know of a mobile nav adjustment for this code injection? 

Thank you! 🙂 

Can you share a link to your site so we can take a look?

Hey @IgnitePerth I dm'd you the link and info. Thanks for offering to help! 🙂 

In order to apply that code only to desktop, place your code inside a media query. 

@media screen and (min-width:768px) {

The above code goes inside here

}

The real question here is why doesn't squarespace 7.1 have a setting for right aligned navigation??????!!! 

I am looking to do the same thing and that code above does not work for me. Here is my site: https://pufferfish-goby-6zrd.squarespace.com/config/design password: peanut

@tuanphan @IgnitePerth

Hi Margmorg - you absolutely can choose right aligned - the option just isn't very intuitive.

When you select edit site header, on the right hand side of your screen, you get a popup menu.  The initial settings tab is for GLOBAL.  Select the monitor icon for Desktop.  The options you are looking for are in there.

 

@IgnitePerth THANK YOU ❤️❤️  

On 10/19/2021 at 2:00 AM, IgnitePerth said:

Hi Margmorg - you absolutely can choose right aligned - the option just isn't very intuitive.

When you select edit site header, on the right hand side of your screen, you get a popup menu.  The initial settings tab is for GLOBAL.  Select the monitor icon for Desktop.  The options you are looking for are in there.

 

Hello. 
Is there an option in to have the logo in the middle and navigation items on the right side? It is kind of frustrating that there is every option BUT having navigation on the right. 
I feel like this may only be possible with code.

11 hours ago, pietro445 said:

Is there an option in to have the logo in the middle and navigation items on the right side?

No.

Quote

It is kind of frustrating that there is every option BUT having navigation on the right.

I would be grand if SS would revisit the header layouts and add a few more options!

Quote

I feel like this may only be possible with code.

It is.

Add the following to Design > Custom CSS.

/* begin header branding center navigation right */

  .header-display-desktop,
  .header-title-nav-wrapper
  
    {
    
      flex-direction : row-reverse;
      
      }
      
  .header-actions--right {
  
    flex-direction : row-reverse;
    
    }
    
  /* end header branding center navigation right */

This is for v7.1.

Without being able to see your site I can't be sure how this will work, but it's a starting point.

Let us know how it goes.

On 4/29/2023 at 2:55 AM, creedon said:

No.

I would be grand if SS would revisit the header layouts and add a few more options!

It is.

Add the following to Design > Custom CSS.

/* begin header branding center navigation right */

  .header-display-desktop,
  .header-title-nav-wrapper
  
    {
    
      flex-direction : row-reverse;
      
      }
      
  .header-actions--right {
  
    flex-direction : row-reverse;
    
    }
    
  /* end header branding center navigation right */

This is for v7.1.

Without being able to see your site I can't be sure how this will work, but it's a starting point.

Let us know how it goes.

I really appreciate this, thank you so much @creedon! Have a fantastic rest of your Sunday.