If you need to center Header Block Items, 3.2.* release created more options for doing this in the Customize>Header panel reducing the need to use this Snippet. Check those options first and only use parts of this code as needed:
Where to copy/paste this code?
There are 2 coding blocks that need to be cut & paste.
CODE BLOCK 1 is CSS, and needs to be added to the Child Theme style.css
CODE BLOCK 2 is php, and needs to be added to the Child Theme functions.php
Where you see Options (eg Hide/Center), delete the code you DO NOT wish to use. For example, delete OPTION 3/2 if you wish to hide the Social Icons.
NOTE: There are 2 sets of code for 3.2.* and 3.1.*
/* START OF Center Header Block Items 3.2.* (Needs additional php CODE BLOCK 2 in Child Theme functions.php) */ /* STEP 1 - CENTER LOGO */ /* /* Built in to 3.2.1 */ /* STEP 2 - CENTER TAGLINE */ /* OPTION 2/1 - HIDE TAGLINE */ /* /* Built in to 3.2.1 */ /* OPTION 2/2 - CENTER TAGLINE */ .navbar-wrapper .navbar.resp h2 { display: block; text-align: center; margin: 0px 0%; /* Adjust +/- % if needed */ } /* STEP 3 - CENTER SOCIAL ICONS */ /* OPTION 3/1 - HIDE SOCIAL ICONS */ .navbar-wrapper .navbar.resp .social-block { display: none; } /* OPTION 3/2 - CENTER SOCIAL ICONS */ .navbar-wrapper .navbar.resp .social-block { display: block; margin: 0 37%; /* Adjust +/- % if needed */ } /* STEP 4 */ /* OPTION 4/1 - CENTER MENU */ .navbar-wrapper .navbar.resp ul.nav.tc-hover-menu { display: block; float: none; width: 100%; margin: 0 10%; /* Adjust +/- % if needed */ } /* Variable number of floating elements */ .navbar-wrapper .navbar.resp .nav { float: none; width: 100%; text-align: center; } .navbar-wrapper .navbar.resp .nav > li { float: none; display: inline-block; } /* Fix 2nd level
- s */
.navbar-wrapper .navbar.resp .nav > li .dropdown-menu li {
float: left;
width: 100%;
text-align: left;
}/* Adjust margin/padding */
.navbar-wrapper .navbar.resp .navbar-inner {
margin: 0px 0px;
padding: 0px 0px;
}/* STEP 5 */
/* OPTION 1/1 – HIDE NAVBAR BOX */
/*
/* Built in to 3.2.1 *//* STEP 6 */
/* RESPONSIVENESS */
@media (max-width: 979px) {
.tc-header .brand {
width: auto;
}
.row-fluid .offset1:first-child {
margin-left: 0;
}
}
/* END OF Center Header Block Items 3.2.* (Needs additional php CODE BLOCK 2 in Child Theme functions.php) */
Remember: you shouldn’t edit the theme’s functions.php.
// START OF Center Header Block Items (Needs additional CSS CODE BLOCK 1 in Child Theme style.css) // NAVBAR WRAPPER // // center the Navbar // // Built in to 3.2.1 // // LOGO // // center the Logo // // Built in to 3.2.1 // // TAGLINE // // center the Tagline add_filter('tc_tagline_class', 'rdc_tagline_class'); function rdc_tagline_class() { return 'span12'; } // SOCIAL ICONS // // center the output of tc_social_in_header: add_filter('tc_social_header_block_class', 'rdc_social_header_block_class'); function rdc_social_header_block_class($social_header_block_class) { if ('span5' == $social_header_block_class) { $social_header_block_class = 'span12'; } return $social_header_block_class; } // END OF Center Header Block Items (Needs additional CSS CODE BLOCK 1 in Child Theme style.css)
/* START OF Center Header Block Items 3.1.* (Needs additional php CODE BLOCK 2 in Child Theme functions.php) */ /* STEP 1 - CENTER LOGO */ .brand.span12 { float: none; } /* STEP 2 */ /* OPTION 1/2 - CENTER TAGLINE */ .tc-header .outside { display: block; text-align: center; } .site-description { margin: 0px 0px; } .inside.site-description { display: none; } /* OPTION 2/2 - HIDE TAGLINE */ .tc-header .outside, .site-description, .inside.site-description { display: none; } /* STEP 3 */ /* OPTION 1/2 - CENTER SOCIAL ICONS */ .social-block { text-align: center; position: relative; z-index: 1; } /* OPTION 2/2 - HIDE SOCIAL ICONS */ .social-block.span12 { display: none; } /* STEP 4 */ /* OPTION 1/1 - CENTER MENU */ .navbar-wrapper .navbar.notresp { float: none; width: 90%; margin: 0 auto; } /* Variable number of floating elements */ .navbar-wrapper .navbar.notresp .nav { float: none; width: 100%; text-align: center; } .navbar-wrapper .navbar.notresp .nav > li { float: none; display: inline-block; } /* Fix 2nd level
- s */
.navbar-wrapper .navbar.notresp .nav > li .dropdown-menu li {
float: left;
width: 100%;
text-align: left;
}/* Adjust margin/padding */
.navbar-wrapper .navbar.notresp .navbar-inner {
margin: 0px 0px;
padding: 0px 0px;
}/* STEP 5 */
/* OPTION 1/1 – HIDE NAVBAR BOX */
.navbar-wrapper .navbar.notresp .navbar-inner {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}/* STEP 6 */
/* RESPONSIVENESS */
@media (max-width: 979px) {
.tc-header .brand {
width: auto;
}
.row-fluid .offset1:first-child {
margin-left: 0;
}
}
/* END OF Center Header Block Items 3.1.* (Needs additional php CODE BLOCK 2 in Child Theme functions.php) */
Remember: you shouldn’t edit the theme’s functions.php.
// START OF Center Header Block Items 3.1.* (Needs additional CSS CODE BLOCK 1 in Child Theme style.css) // NAVBAR WRAPPER // add_filter( 'tc_navbar_wrapper_class', 'rdc_navbar_wrapper_class' ); function rdc_navbar_wrapper_class() { // 'navbar-wrapper clearfix span12' for a full-width navbar. You can change this to make it narrower if you want. For example, 'navbar-wrapper clearfix span6 offset3' return 'navbar-wrapper clearfix span12'; } // LOGO // // center the logo add_filter( 'tc_logo_class', 'rdc_logo_class' ); function rdc_logo_class() { // Change to accommodate your logo. For example: // 'brand span12' for a full-width logo; 'brand span4 offset4' for a medium logo; 'brand span2 offset5' for a very small logo return 'brand span12'; } // TAGLINE // // center the Tagline add_filter('tc_tagline_class', 'rdc_tagline_class'); function rdc_tagline_class() { return 'span12'; } // SOCIAL ICONS // // center the output of tc_social_in_header: add_filter('tc_social_header_block_class', 'rdc_social_header_block_class'); function rdc_social_header_block_class($social_header_block_class) { if ('span5' == $social_header_block_class) { $social_header_block_class = 'span12'; } return $social_header_block_class; } // END OF Center Header Block Items 3.1.* (Needs additional CSS CODE BLOCK 1 in Child Theme style.css)
Credit: Adapted from original code by @acub, updated by @rdellconsulting/@ElectricFeet
64 thoughts on “Center Header Block Items (3.1/3.2)”
Hi
I’m on customizr pro and not good with css yet. My issue is with the navbar menu which isn’t centered. It looks fine on the desktop, but I want it to span the width of the screen on smaller displays where it keeps aligning left.
Troys suggestion sounded elegant, but it breaks the social icons and the menu onto two lines instead of one.
Site is: scanfoam.org.
Any suggestions would be great.
Hi,
The developer team handles support for Customizr-Pro at http://presscustomizr.com/support/. Please post your query there with a link to your site.
Skip the snippet when centering the _horizontal_ menu on your site. The better practice is always good CSS. Make sure your menu is aligned to the left. Aligning right will open up a `float: right` rule we don’t want.
Drop the following in your Advanced-Options > Custom CSS editor in _Customize_ and Flexbox to the rescue. The following code centers the nav bar and the nav items for the horizontal menu. The media rule applies the flex directive just to the horizontal menu and before the vertical menu can take over.
This works and it’s not going away soon.
“`
@media (min-width: 980px) {
.navbar{
display: flex !important;
justify-content: space-around !important;
}
.menu-primary-container ul {
display: flex !important;
justify-content: space-around !important;
}
}
“`
hi, i coded like this snippet says but, if you have the browser page at 1200px of weight the menu is correctly centered but if i resize the windows to a 1920px width the menu … slides a bit to the left… am i doing anything wrong?
Thanks!
Angelo
See the Forum for latest update on this:
https://wordpress.org/support/topic/menu-center
Hi,
I tried this filer with version 3.3.26 and I’ve noticed that function tc_set_logo_title_layout override the parameters $_classes sent to the function.
Hi,
Thank you for this great theme. It’s my favorite one.
I just have one thing I can’t manage. And that’s to centre the menu without a logo. So I don’t want the logo at the menubar, but I see there some space for it. On a 13” it looks ok but on a widescreen it doesn’t.
I hope you can help me.
Hi Monique !
This has been adressed in several forum topics that may help you :
https://wordpress.org/support/topic/center-menu-items-3
https://wordpress.org/support/topic/moving-menu-to-center
https://wordpress.org/support/topic/center-customizr-menu
https://wordpress.org/support/topic/how-to-center-the-navigation
http://presscustomizr.com/support-forums/topic/how-do-i-put-menu-items-center-aligned/
I hope thiw helps !
I just add the code (function and css) for version 3.2.10 but I don’t see any change in my menu. Please help me.
I followed this and it doesn’t seem to do anything on the live site. Strangely if I go to customize in Appearance the menu shows as centered in there. It just doesn’t show centered on the live site.
How can I do this in Customizr Pro?
Thanks
Hi Radu,
Customizr and Customizr Pro share the same core code so this snippet will also work for the pro version of the theme.
Cheers 🙂
Hi Nicolas,
So I thought it must be but..
I try the 3.2 version but nothing happened. I will tray again later.
Thanks
I am now getting the implode error on tc_logo_class
add_filter( 'tc_logo_class', 'rdc_logo_class' );
function rdc_logo_class() {
return 'brand span12';
}
use `return array(‘brand’, ‘span12’);`
Thank you. I got it.
I understand how to copy and paste but where do I find the
Child Theme style.css ?? Can anyone give me easy instructions on how to change the style.css I want to center my menu items! please help!
Hi Dana,
if you need to make minor CSS changes to your website, you may consider using the custom CSS feature.
in your WP admin, navigate to Appearance > Customize > Advanced Options > Custom CSS
Then copy your CSS code here and it will be instantly applied to your website preview.
Hope this helps!
Snippet has been updated to handle the 3.2.* update. If you find any problems, please report them in the Forum rather than here.
Thanks
Many apologies for the snippet failing after the 3.2.1 update. I am working on an Update and will publish as soon as possible.
In the meantime, I suggest you revert to the
3.1.24 version.
Thanks so much Dave 🙂 And sorry about the double post. I thought my first didn’t go through.
I need a brain that is smarter than mine- please 🙂
Put this in my child themes functions.php:
And I’m getting this rad error now:
I’m wallowing in pitiful right now, please help <3
SO this super rad code works BUT I’m getting a couple of errors.
Using just this code:
And receiving these errors:
Is this because of an update maybe? The parent theme is fresh and unedited..
Any help would be *greatly* appreciated 🙂
Thank you and electricfeet on the wordpress forum.
A further update of the functions.php code by @ElectricFeet to take advantage of improved filters since originally written.
Hi! How can I get the navbar to extend across the page as an orange bar? Thanks!
Changed unnecessary preg_replace with str_replace, easier to understand.
Have updated CSS Step 4 with tighter specificity
.navbar-wrapper .navbar.notresp
, and added Start/End comments to make copy/paste area more obvious.Is there a code snippet. or place to adjust the navbox/header re-alignment characteristics? Specifically, everything looks great, but when you resize the screen slightly smaller, or use the zoom function to app. 125%, the navbox drops and there is a gap between it and the top of the screen. Yet the logo and social icons stay up at the top. here’s my site for reference: http://www.pmtrainingclass.com
Hi Keith.
You need to add some @media code to make any adjustments you need. See this Snippet for more information.
If still stuck, I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
Thanks for this fix Dave! Everything worked for my navigation but I’m having trouble getting my logo to be centered and enlarged. I created a child theme and I think I copied the code into the right place [Appearance >> Editor] but it’s still not working. I know very little about HTML and CSS so I appreciate the help!
My site: oneelevenmissoula.com
Hi Kelsi, it looks like you fixed your problem?
If not, I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
This worked perfectly for me, with 1 tiny exception:
All of the other functions in my dashboard are fine except for the “customize” option – I get an internal server error. I don’t know enough about php to be able to troubleshoot (besides removing all of the code mentioned above). I did have a bit of code already in my child functions.php file – could there be some conflict?
http://www.blgbusinesssolutions.com
Thanks Brandi. I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include the link to your Site.
Wonderful Snippet, Dave! Thank you! One issue that I’m experiencing is that the social buttons have lost their linking functions. Any ideas?
http://woodlandjewel.com/newsitetest/
Still investigating this. Can see and have marked where the problem lies, but not found a solution yet. Stay tuned!
Fixed by @acub!
See Step3 Option 1/2
.social-block {
text-align: center;
position: relative;
z-index: 1;
}
I have completely revamped this Snippet. Hope it’s clear. Please advise of any problems.
Thanks to @If designs (daniel) for pointing out error in Step 1.
Thanks to @Norman Fetter for pointing out error with Social Icons (Still under investigation – a weird one!). I’ve highlighted the code to avoid until fixed.
Thanks your really helped me.
Just as a note in the functions.php above there is an extra curly bracket at the end that when someone copies and pastes the code it renders the theme not to work.
Thanks. Fixed!
Hi, I created my own css class for a right border so that I could apply it to ONLY the first three items on my menu and not the last one (because it looks weird to have a right-border after the last item, at least on my design).
This theme has a great feature in the Appearance>Menus section of the Dashboard where you can apply CSS directly to an individual menu item (just make sure you select CSS classes in “Show advanced menu properties” in Screen Options tab at the top of your Dashboard). So just create your new class in your child theme css and then add that class to the CSS Class window for the relevant menu items.
You’ll have to adjust the class back to remove the border for screen sizes below 979px if you don’t want borders on your mini-menu.
Spot on, thanks Katie!
Hi everyone,
first of all: my compliments for a superb theme. And also for the above snipet, just what the doctor ordered!
The only problem that I am facing with it: is that I want to have vertical lines between the menu items. I’d figured a simple border-left and border-right would do the trick. But I have been trying to apply that to all css classes that I could imagine had something to do with it, but NO luck. I am getting desperate.
Most logically, I had thought it would need to be applied to ‘.navbar .nav > li > a’. But that doesn’t work.
Can anyone help? Which CSS class would I need to put borders on?
Many thanks!
I have created a Child Theme, and the parent theme is running the 3.0.15. Now, from the snippets above, I used the one titled 3.0.14 update in the functions.php file within the child theme directory.
1. The logo is centered but this center alignment is not perfect. Please check here: http://projectparampara.com
2. Also, the menu is not center aligned. It is still left aligned.
Please suggest a way to solve these two issues.
Had latency problems accessing your site, leading to Firefox crashing. I did see your site briefly. There was no logo loaded, and a blank menu/navbar.
I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
Thanks for getting back to me so quickly Dave. To anyone who has the same problem I was having, we figured out that there was an overlapping Div that must have been blocking the link to “back home” embedded under the logo. I used this css to fix it:
.
This is a great theme and appreciate the support!
I have installed a plugin that has messed up the way the menu renders. I believe it is because of the order that the references are now populated in the header. For the life of me I can’t find the function that is used to created the tags so I can reorder them. Any help you can provide is greatly appreciated.
TIA.
Assuming you understand php, the place to start is:
customizr/parts/class-header-menu.php
customizr/parts/class-header-nav_walker.php
Hey,
Is it possible to get the navbar on 100% width?
Because the right site of the navbar keeps on getting a white background.
I want to get it from left to right with a grey background or image.
Which code can I use in my child theme?
Thanks!
Change the function.php above which removes span9 from navbar-inner to:
Hi, thanks for this snippet and all of them! Very helpful. However, I notice that adding the PHP snippet to remove the span 9 seems to cause the “Go Home” hyperlink functionality of the logo to stop working. Any way we can get that back and still have a centered menu?
Must be something else causing it Katie, as code works on my sites. Send me a link and I’ll take a look, or publish a new topic in the Forum
Hi – Thanks Dave – I do have a lot of custom CSS so that well could be, although as soon as I take the new Span 9 function out it works again. Is there a way to send you a link privately? Site is for a client and they do not want it public yet.
Hey Katie, it you still have this problem in version 3.2. I had the same problem and solved it by setting .navbar-wrapper from position: relative back to position: static. Perhaps this helps.
Thanks for the 3.0.14 update worked perfectly.
Thanks for this feedback Paul. Enjoy the theme.
Hi 🙂
I was wondering if I could center the menu below a large image in the header with this theme. I’d love to continue using this for various website!!
I found this snippet but it appears it centers the items within the navbar vs. centers the navbar – am I understanding wrong?
http://www.jeanneesti.com/test is where I’m starting to work (STARTING being the keyword for this one!)
Most of these Snippets are tested standalone, so it is possible that when added to other CSS code they don’t work quite as intended. I’d suggest the Forum would be a better place to get a solution for this, and include a link to your Site.
Cari, I recognise you from the Forum so I hope you resolved this!
Thanks for using Customizr.
i noticed you resolved your issue. im trying to do the exact same. where did you find the code?
Hi everyone, I wonder if you can help…. I can’t find it listed unless I’ve missed it. I love this theme but can’t quite get my head around why the logo is above the menu bar, it seems to be on the same horizontal space as the menu on all of the other sites with the customizr theme. Am I missing something and can this be resolved with a snippet?
Thanks in advance.
Kev
John & Kevin, I suggest you try the Forum for specific problems you have, giving a link to your site if you can. Refer to this Snippet if you think there’s a problem in it.
Thanks.
Hey Dave,
This snippet centre is awesome! Thank you so much for putting all of these tips here.
I was wondering if you could help me out with the header? I want to have the logo and menu line up with the width of the rest of the front page but have no idea where to start. Could you perhaps give me some pointers? I’ve only just started building my site and I’m trying to learn CSS but I’ve no idea which tags to look for within the code.
Many thanks again,
John