Support » Theme: Customizr » Shorten Header/Navbar area and center everything

  • I have been going through snippets and the navbar guide, and I just don’t even know what to call what I want to do….

    Basically, I have already centered my logo and site title. I have no site title showing. I have also removed the navbar box. I want to center my menu items and shorten the space between my logo and my menu items. The reason I want to do this is that there is too much white space right now in that space, and also because I want to be able to go to the site and see the logo, the slider, and the tops of the featured page images all without scrolling. I tried centering the block header items, but when I did that – my logo disappeared! Otherwise that worked pretty well, the whole things shortened up and looked great. So what do I need to do to accomplish this? I am fairly inexperienced, but I figure things out quickly. Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Give us a site link to look at it please

    Sorry, had a landing page plugin running and didn’t think of that….I disabled the plugin, so you should be able to view my site at Thanks!

    .navbar.notresp {
      max-height: 40px;
    .navbar .navbar-inner {
      margin: -54px 5px 10px;

    Try that for a start. Not sure if that’s all you’re trying to do?

    Read the Navbar Guide for more information

    Thank you, that’s awesome! That’s exactly what I was trying to do. I was also trying to center the navbox menu items though. I tried using the css snippets for that, but I don’t seem to be doing it correctly.

    Suggest you keep trying as that snippet is the best solution! Which bit are you struggling with?

    I know it has been weeks since I replied to this….sort of a spare time project.

    Well, I am basically struggling with all of it! I have tried using the CSS snippets for centering the header block items, and the menu items move – but they are not centered by any means . They aren’t as far over to the left, but they aren’t centered under the logo either.

    I have searched through the forum a lot, added the CSS rules in the custom CSS box, added the accompanying functions – nothing is working. The menu items move over toward the right, but they are just off kilter under the logo.

    I have a landing page up again, I’ll take it down if you need to see the site again. Should I try adding the snippet so you can see what I mean?

    I’m going out but can take a look this afternoon (UK time)

    Thank you! Should I be adding the snippets back in so you can see what it is looking like when I do?

    Just so we’re all on the same page here: Have you seen this snippet on how to Center Header Block Items? I think this is the snippet rdellconsulting was talking about above, but it wasn’t linked. If you follow that closely, you will get what you want.

    By the way, I note that your appointment system might conflict with Customizr at some point. Your CSS shows:

    .clearfix:before, .clearfix:after {
        content: " ";
        display: block;
        height: 0;
        overflow: hidden;

    from your appointment plugin and:

    .clearfix:after, .clearfix:before {
        content: "";
        display: table;
        line-height: 0;

    from the Customizr theme. The appointment plugin is taking precedence (I presume it’s loaded afterwards). It may cause unpredictable results. Nothing to worry about for now, as the layout seems to be OK. But if you see any strange layout effects (beyond the normal daily battle with CSS!), suspect a plugin conflict.

    Hi ElectricFeet – yes, that was the snippet I was working from. I am fairly new to customizing things at all, so I know I am a little clumsy with this – but I did follow the instructions from the snippet as closely as I knew how. It sort of worked. By that I mean that I saw SOME results, just not exactly the results that I wanted. The menu items shifted toward center – but not directly under the logo. I guess that maybe if I went back and removed all customizations that I have made up until this point, and then just get the menu items centered and work through things one by one – maybe that would help?

    I hadn’t thought about the plugin and how it would mesh with the theme….but that makes sense. Thanks for the heads-up! I’ll definitely be on the lookout for that.

    When I get into trouble like that, I take a copy of my style.css, create a new blank one and then copy one line or section at a time, test, and I start to see why it wasn’t working. It is very easy to get lost in your own CSS as you become more familiar with it!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Shorten Header/Navbar area and center everything’ is closed to new replies.