Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to center logo and navigation?


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;



Edited by gaber008

Share this post

Link to post

6 answers to this question

Recommended Posts

  • 0

Hi Hope this helps.

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

   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; 

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

Share this post

Link to post
  • 0

Do I put this code on the 'Custom CSS' portion of the interface, via the 'Design' sidebar button?

Here is what I have but it still won't center my logo:

Share this post

Link to post
  • 0

1.   #logoWrapper {display: block !important;     padding-top: 50px;
2.       margin: auto !important;}
4.   header{
5.       position: fixed;
6.       height: 200px;
7.       padding: 0px;
8.       text-align: center;
10.      border-bottom: 0px solid #999999;}
12.    #header #headerNav { 
13.      display: inline-block;
14.      margin-top: 45px;
15.      text-align: center; 
16.      margin-right:;
17.    }
19.    #headerNav nav a {
20.      padding-left: 15px;
21.      padding-right: 15px;}

Share this post

Link to post
  • 0

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.

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...