Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter mikeschafer

    (@mikeschafer)

    I have tried every part of that snippet to no avail. Could you indicate which part I should focus on. Thanking you.

    Looking at your website and joe’s one can I suggest these simple steps?
    In your child-theme functions.php:

    // center the logo
    add_filter('tc_logo_text_display', 'center_logo');
    add_filter('tc_logo_img_display', 'center_logo');
    function center_logo($output) {
        return str_replace('span3', 'span12', $output);
    }
    
    // center navbar //
    add_filter('tc_navbar_display', 'center_navbar');
    function center_navbar($output) {
        return str_replace('span9', '', $output);
    }

    Then in your custom css or your child-theme style.css :

    .navbar-wrapper.clearfix{
    	clear: both;
    	width: 95%;
    	margin: 0 auto;
    }

    Thread Starter mikeschafer

    (@mikeschafer)

    That was so helpful. Thank you!
    In doing that, the nav bar has jumped to the left even though the css says:

    .navbar .nav {
    float: center;
    }

    What do I need to change to center it?

    Thread Starter mikeschafer

    (@mikeschafer)

    I changed the percentage from 95% to 62% though it doesn’t quite center it. Some browsers put the menu on 2 lines with that setting.

    .navbar-wrapper.clearfix{
    clear: both;
    width: 62%;
    margin: 0 auto;

    Is there a better way?

    Wait, float:center, doesn’t exist.
    I gave you that code ’cause you talked about joe’s site, and that’s what basically he uses.
    With the code I gave you the navbar is centered, your problem is that now you don’t want the joe’s site look anymore, ’cause now you want the menu centered.
    Add this to your css:

    .navbar.notresp .nav {
        text-align: center;
        width: 100%;
    }
    .navbar.notresp .nav > li {
        display: inline-block;
        float: none;
    }

    And don’t use 62%.

    Thread Starter mikeschafer

    (@mikeschafer)

    Brilliant! Thank you very much! Sorry for my confusion!

    Np. Glad you solved ??

    @mikeschafer
    Where’s this:

    .navbar-wrapper.clearfix{
    	clear: both;
    	width: 95%;
    	margin: 0 auto;
    }

    You need that too, or better, at least you need this:

    .navbar-wrapper.clearfix{
    	clear: both;
    }

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Center Header’ is closed to new replies.