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

Hayden: How do I center a logo and navigation?

Question

11 answers to this question

Recommended Posts

  • 2

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>

Edited by mindful500

Share this post


Link to post
  • 2

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?

Edited by Foz
Initial Revision

Share this post


Link to post
  • 1

This is fantastic for centering my logo, but I'd love to keep the top navigation and have it centered underneath on all pages (as mindful500 mentions). Anyone know what to do? I'm using Bedford, by the way.

Edited by BrittneyB
Initial Revision

Share this post


Link to post
  • 1

@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?

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

I have the same problem. I have been able to center the logo, and the navigation, but once I click save the navigation collapses to the mobile/ hamburger version even on my large computer screen.

Share this post


Link to post
  • 0

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




Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...