Jump to content

How to center logo and navigation?

Recommended Posts

I'm using the Bryant template and trying to center the logo and navigation (I'd like the navigation to appear under the logo).

Using custom code I found on this forum (thank you "@foz" which I'll include below). The logo is centered but it also results in the navigation automatically switching to the mobile view with the hamburger to the right (even on desktop).

This is what my header currently looks like on a large display:

alt text

And this is a model of what I'd like it to look like:

alt text

I did tried the "@media screen" code unsuccessfully. Any help is GREATLY appreciated. Here is a link to the site I'm working on: squarespace site Thank you!!


#logoImage {
   margin-left: auto;
   margin-right: auto !important
 }
 #logoWrapper {
   display: block !important;
   width: 100%;
   max-width: 100%;
   text-align: center !important
 }
 #header #logoWrapper {
   width: 100% !important
 }

#headerNav {
  display: block !important;
  text-align: center !important;
}


screen-shot-2017-03-31-at-123204-am.png.1c7d04596d50bb9962e1e5fb9f980a89.png

screen-shot-2017-03-31-at-123047-am.png.1664e6115bccb2eb70bbec71f331311a.png

Link to comment
  • 2 months later...
  • Replies 6
  • Views 13.6k
  • Created
  • Last Reply

Hi Hope this helps.


#logoWrapper {display: block !important;     padding-top: 40px;
   margin: auto !important;}

header{
   position: fixed;
   height: 190px;
   padding: 0px;
   text-align: center;
   background-color: rgba(74,74,74,1);
   border-bottom: 0px solid #999999;}

 #header #headerNav { 
   display: inline-block;
   margin-top: 45px;
   text-align: center; 
   margin-right:;
 }

 #headerNav nav a {
   padding-left: 15px;
   padding-right: 15px;}


Link to comment
  • 2 weeks later...

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

Thank you for the solutions. I ended up having to hire someone to fix this for me so I don't want to try these solutions out. Hopeful these will be helpful for someone else. I really appreciate your time & effort.

Link to comment
  • 3 months later...

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.