Jump to content

7.1 - Centering Site Title Between Nav Items

Recommended Posts

Site URL: http://www.kateandrewsdesign.com

Hi everyone-

I'm trying to center my navigation per this video tutorial but I'm having a slew of issues. Here's the code I'm using:



.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex-basis: 100%  !important;    
  text-align: center !important; 
  height: 4vw; 
  margin-top: -2vw; 
  padding-bottom: 1vw; 
  margin-left: -2vw;


.header-title {
  margin-bottom: -8.5% !important; 
  margin-top: 1vw;


   margin-left: 63vw !important;



Sometimes it works, but usually it doesn't. It also screws up the Shopping Cart icon which moves to a different line completely. Attached a screen grab of the design/spacing I'm going for.

Thank you! Much appreciated!


Screen Shot 2020-07-08 at 5.31.55 PM.png

Link to comment
  • Replies 4
  • Views 1.4k
  • Created
  • Last Reply
On 7/13/2020 at 7:48 PM, sarahkleist said:

hi @tuanphan I am wondering the same thing -- i used the same code as above and it works but when I use the "scroll back" site navigation style, it sticks to the top halfway off-screen. i would like to center my logo in between four nav titles and use the "scroll back" style 

Can yo ushare site url?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...


This topic is now archived and is closed to further replies.

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