WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Center logo within header, and center whole header (11 posts)

  1. Ndirstine
    Member
    Posted 7 months ago #

    Is it possible to (1) center my logo within the header/split the menu and (2) center the whole header all within the Custom CSS? I need a quick solution and not a child theme. The code I have found so far has not worked.

    http://www.ournestinthewest.com

  2. ElectricFeet
    Member
    Posted 7 months ago #

    A child theme is something that takes 3 minutes to set up. If you need something quicker than that, then you should hire someone to help you. (Though it will take you longer than 3 minutes to hire them.)

    Set up a child theme with help from this page.

    This will centre the logo. And this will centre the whole header block.

    When setting up your style.css remember that it should at the very least contain this at the top:

    /*
    Theme Name: customizr-child
    Template: customizr
    */

    then you add your CSS.

    And your functions.php should at the very least contain this at the top:
    <?php
    then you add your php code.

  3. ElectricFeet
    Member
    Posted 7 months ago #

    You can even download a child theme pre-customized for Customizr here. Upload it from the dashboard using Appearance > Themes > Add new > Upload.

  4. Ndirstine
    Member
    Posted 7 months ago #

    Thank you. I was able to create a child theme and centered the logo and header. However, I was hoping that the logo would be centered within the header/splitting the menu items (like this http://blog.freepeople.com/). Is this possible?

    Also, the menu is wrapping. I adjusted the margin and padding to no avail, any recommendations?

  5. ElectricFeet
    Member
    Posted 7 months ago #

    Hmm, nice effect, I agree.

    I think it would take a fair bit of work to get there, probably defining another menu along the way. Not easy, I'm afraid.

  6. ElectricFeet
    Member
    Posted 7 months ago #

    Before hiring a programmer, one approach I would try would be to put my Home link in the middle of my menu, assign it a class (switch this on in the screen options) so that I could make it hide in the background. And then I'd try to superimpose my logo on top. But the devil is in the details, and it may not work at all this way.

  7. Ndirstine
    Member
    Posted 7 months ago #

    I will try that, thank you. The remove word wrap code is not working. Any suggestions on other code? I tried,

    /* Prevent word-wrap */
    .navbar .nav li {
    white-space: nowrap;
    }

  8. ElectricFeet
    Member
    Posted 7 months ago #

    That stops individual menu items wrapping. To stop the whole menu wrapping you need to squash up the margins with the fonts first. Try changing the values in this:

    /* Change menu padding: 2nd and 4th for horiz padding */
    .navbar .nav > li > a {
      padding: 5px 16px 5px 16px;
    /* and change font in menu */
      font-size: 16px;
      text-shadow: none;
    }
    
    /* Change font size of first letters in menu */
    .navbar .nav > li > a:first-letter {
      font-size: 16px;
      text-shadow: none;
    }
  9. batharoy
    Member
    Posted 7 months ago #

    @Ndirstine
    I had to change and test a few things in DevTools but I think I have what you want. The down side is that your logo don't link.

    .menu-primary-navigation-container {
        background-image: url(http://www.ournestinthewest.com/wp-content/uploads/2013/12/logo-font-and-vane_final-cropped-small2.jpg);      background-repeat: repeat-y;      background-position: center;
        height: 190px;
    }
    
    #menu-item-17 {
        padding-right: 210px;
    }
    .navbar .nav {
        float: left;
        padding-top:70px;
    }

    If it doesn't work send me a link & I will fine tune it.

  10. batharoy
    Member
    Posted 7 months ago #

    Disregard my previous post, it wont work right.

    Image link to show the outcome of the new code.

    And finally the code with commented explanations.

    I hope this is what you were looking for.

  11. ElectricFeet
    Member
    Posted 7 months ago #

    Nice hack :-)

    However, you shouldn't redefine row-fluid span9, because it will mess up the rest of the theme's scaffolding. It needs more specificity to the header (not at my desk, so can't check what that would be).

Reply

You must log in to post.

About this Theme

About this Topic