Jump to content

Hayden: How do I center a logo and navigation?

Recommended Posts

  • 2 weeks later...
  • Replies 11
  • Created
  • Last Reply
  • 2 weeks later...

I have been able to center my logo in Hayden with the code below in the page-specific advanced settings. www.mindful-financial.com

First, it includes code to hide the main navigation because I am doing that in addition to centering the logo on my homepage (but not on other pages). It’s probably different if you want to keep top navigation, if you want to get both of them centered, or if you want them centered on all pages.

Second, I made sure the image would allow itself to be centered by setting both side margins to auto. (from a tip on W3's website)

Third, being that the container for the logo is the logoWrapper, and the default style is set to have the wrapper 150px wide, I set the width to 100% of the page, and the max-width to 100%. Setting the text alignment in the wrapper puts the logo in the center. Now the wrapper is as wide as the page and the logo is in the center, but for the mobile view only.

So fourth, I had to do a second entry for the computer-size CSS (#header #logoWrapper). It didn’t require repeating the text alignment or max-width.

Then on the computer size views, the description text was overlapping the centered logo. So last I added extra padding to the container the description text is in.

Google Chrome’s Developer Tools were indispensable! And that makes a fun afternoon learning CSS. haha


<style>
#mainNavigation {
 display: none
}
#logoImage {
 margin-left: auto;
 margin-right: auto !important
}
#logoWrapper {
 width: 100%;
 max-width: 100%;
 text-align: center !important
}
#header #logoWrapper {
 width: 100% !important
}
.desc-wrapper {
 padding-top: 60px !important
}
</style>

Link to comment
  • 5 months later...

Hi mindful500, nice site! Thanks for the tips here. I signed up for your email and love how the form changes to "thank you" after. Would you mind sharing how that's done? (I may be in touch soon about your business services..) thanks!

Link to comment
  • 1 year later...
  • 2 months later...

OK this is doing my head in.

I can center the logo and the nav. But when i view the site it automatically switches to the mobile view with the hamburger to the right even if on desktop or laptop.

Do i have to adjust the height of the nav area??

here's the code


#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;
}

Any ideas anyone?

Link to comment

@Foz - I understand where you're coming from-

@mindful500 's code is good, but I want to move the navigation bar to be under the logo, not make it disappear.

Your code, when viewed on my small screen at work, works perfectly- logo centred on top, navigation centered just below. But when viewed on my iPhone, the navigation get pushed to a side panel on the right, on doesn't display the page names, just a blank nav box accesses by the "hamburger" list icon.

However, when viewed on my computer at home, I get the issue that you mentioned- the nav is relocated to the side, as if on a mobile browser. What's annoying is that I cant get a code to work the same way on all three screens.


A friend has pointed me towards using "@media screen" commands, e.g.


@media only screen and (min-width:960px){
       /* styles for browsers larger than 960px; */
   }
   @media only screen and (min-width:1440px){
       /* styles for browsers larger than 1440px; */
   }
   @media only screen and (min-width:2000px){
       /* for sumo sized (mac) screens */
   }
   @media only screen and (max-device-width:480px){
      /* styles for mobile browsers smaller than 480px; (iPhone) */
   }
   @media only screen and (device-width:768px){
      /* default iPad screens */
   }
   /* different techniques for iPad screening */
   @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
     /* For portrait layouts only */
   }

   @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
     /* For landscape layouts only */
   }

I'm going to experiment with these, maybe you should try the same?

Link to comment
  • 3 months later...
  • 3 months later...
  • 5 months later...

Hey guys! I am still new to working with code, but all i wanted was to center the text of the navigation in the Hayden template, but not my logo... Anywho - if that's what you want to do, this little piece of code worked for me!


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




Link to comment

Archived

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

Guest
This topic is now 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.