Jump to content

Centering Navigation-Flatiron Template

Recommended Posts

Love the flatiron template. Only issue is not being able to center the navigation. I would like to have either title one one centered line with navigation below, or title in center with navigation on either side (prefer). This is what I have tried entering into custom CSS below, but it did nothing. Any help very greatly appreciated! Thanks!

 

1.   #logoWrapper {display: block !important;     padding-top: 50px;
2.       margin: auto !important;}
3.   
4.   header{
5.       position: fixed;
6.       height: 200px;
7.       padding: 0px;
8.       text-align: center;
9.       
10.      border-bottom: 0px solid #999999;}
11.      
12.    #header #headerNav { 
13.      display: inline-block;
14.      margin-top: 45px;
15.      text-align: center; 
16.      margin-right:;
17.    }
18.    
19.    #headerNav nav a {
20.      padding-left: 15px;
21.      padding-right: 15px;}
Link to comment
  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply

Try adding the following to the custom css area, after any other code that may be there. 

#navigator .siteTitle {
    float: none;
    padding: 0;
	padding-top: 20px;
    max-width: 100%;
    text-align: center;
}
#navigator header#topBar ul#nav {
    float: none;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
    width: 60%;
    text-align: center;
}

 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

@AKTH Can you share site url? I just tried colin's code. It worked...

 

colin.png

 

or try (Add to Home > Design > Custom CSS)

#navigator .siteTitle {
    float: none;
    text-align: center;
    max-width: 100%;
    padding-bottom: 0;
}
#navigator header#topBar ul#nav {
    float: none !important;
    max-width: 100% !important;
    text-align: center;
}

 

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

Archived

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.