Jump to content

Center logo and Right align navigation

Recommended Posts

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?

Link to comment
  • 2 weeks later...
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. 

Link to comment

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.

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
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.

Link to comment

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.

 

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
  • 9 months later...

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.

Edited by IgnitePerth
correction

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment

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

 

Edited by IgnitePerth
correction

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment
  • 2 weeks later...

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! 🙂 

Link to comment
  • 2 months later...

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.

 

rightMenu.png

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

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.