Jordaniels1 Posted November 12, 2014 Share Posted November 12, 2014 How do I center a logo and navigation in the Hayden template? Link to comment
Kensington Posted November 25, 2014 Share Posted November 25, 2014 Did you fix it? I need the same. Link to comment
Jordaniels1 Posted November 26, 2014 Author Share Posted November 26, 2014 No, I would love someone to tell me!! I looked at the codin but didnt understand it Link to comment
mindful500 Posted December 6, 2014 Share Posted December 6, 2014 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
junecz Posted May 28, 2015 Share Posted May 28, 2015 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
BrittneyB Posted May 31, 2016 Share Posted May 31, 2016 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. Link to comment
Foz Posted August 28, 2016 Share Posted August 28, 2016 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
Formalis Posted September 2, 2016 Share Posted September 2, 2016 @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
kylienic Posted December 27, 2016 Share Posted December 27, 2016 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. Link to comment
Guest Posted March 31, 2017 Share Posted March 31, 2017 I'm looking for help with this as well! Anyone? Link to comment
Guest Posted September 1, 2017 Share Posted September 1, 2017 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.