7.1 - Centering Site Title Between Nav Items

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:

Quote

 

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

}

.header-nav-item:nth-child(3){
   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!

http://www.kateandrewsdesign.com

Hi. Did you solve?

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 

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?

@tuanphanStill not solved!