Center Header Block Items 37


Last Reviewed: 13-Jul-14

If you need to center Header Block Items:

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

 

Where to copy/paste this code?
We strongly recommend you create a child theme and add this to the Child Theme functions.php.
Download a start-up child theme here.

Remember: you shouldn’t edit the theme’s functions.php.

 

Credit: Adapted from original code by @acub

To make this change, you must create a child theme. Everything you need to know about creating a child theme with Customizr here.
*New* Download a free start-up child theme here

About Dave Bardell

My name is Dave Bardell (@rdellconsulting) and have been supporting the Forum since discovering this wonderful Theme. Have learnt a lot from other Supporters (@acub, @tomaja, @ElectricFeet, in particular). Have a library of snippets I've built up which in adding here, I'll try to acknowledge the original contributor but apologies to any I miss or wrongly attribute. daveb@rdellconsulting.com


37 thoughts on “Center Header Block Items

  • Reply
    John

    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

  • Reply
    kevin

    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

  • Reply
    Cari

    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!)

    • Reply
      Dave Bardell Post author

      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.

  • Reply
    Katie Sutton

    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?

      • Reply
        Katie

        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.

  • Reply
    Ruud

    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!

    • Reply
      Dave Bardell Post author

      Change the function.php above which removes span9 from navbar-inner to:

  • Reply
    Larry

    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.

  • Reply
    Katie

    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!

  • Reply
    Buddha

    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.

    • Reply
      Dave Bardell Post author

      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.

  • Reply
    SebvandenBerg

    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!

  • Reply
    Katie

    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.

  • Reply
    Cherie Benjamin

    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.

    • Reply
      Dave Bardell Post author

      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.

  • Reply
    Brandi

    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

  • Reply
    Kelsi

    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

    • Reply
      Dave Bardell Post author

      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.

  • Reply
    Keith Brodie

    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

    • Reply
      Dave Bardell Post author

      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.

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">