Logo and Navigation Bar Not Adjusting

  • I have tried many of the things in the forums here but no matter what I do, the navbar does not ever go across the full screen. I was trying a couple different things. One, I’d like to make the logo to the right and navbar to the left and have each take up 50%. Then I’d also like to try putting the navbar below the logo and see what that looks like. I was unable to do either.

    Right now I am using this code:

    .site-logo > img {
    max-height: 120px;
    max-width: 600px;
}
.navbar-wrapper .brand {width: 100%; float: left}
.navbar-wrapper .navbar {width: 100%; float: right}

    The thing is, the line that is supposed to change the width of the “.brand” does nothing, no matter what I have it set to. Also, the navbar never goes all the way across the screen. The navbar always starts at like the 23% margin on the left no matter what I put these settings at. It’s like there is another setting somewhere controlling that margin.

Viewing 6 replies - 1 through 6 (of 6 total)

  • you need to post a link to your site so we can see your code and design.

    Thread Starter dfoley75

    (@dfoley75)

    I have the same problem on both of these sites:

    https://www.docelticjewelry.com/

    https://mallardsboosters.com/

    Try adding this to your child-theme’s style.css file to move the nav bar under the logo

    .tc-header .outside {
display: block;
}

    the problem is, the html is using span columns to divide the page.

    The best way to modify is to open the header.php file and modify the span columns to be how you want. It should be fairly simple, where every row adds up to 12. Now the logo is span3 and the nav is span9, so you would adjust how you want.

    Sorry, have to intervene as hacking core files is not the recommended approach. Czr has been built with a host of Hooks which enable you to modify the Theme by adding code to the child theme functions.php.

    Some recommended reading:

    Hooks API

    How to customise

    Center Heading, but ignore the logo centering

    Thread Starter dfoley75

    (@dfoley75)

    Thanks. So I read these things. I already have a child theme. I can definitely edit the functions.php but other than centering the heading I’m not seeing how I would use this to do either of the things I was hoping to do in the OP.

    Then I’d also like to try putting the navbar below the logo and see what that looks like.

    rdellconsulting’s third link will show you how to do this.

    What’s driving all the positioning under the covers is the Twitter Bootstrap 2.3.2 scaffolding. The logo is span3 and the navbar-wrapper is span9.

    You can see in the link that rdellconsulting gave you that he changes these in php.

    Regarding the CSS for the logo/menu swap/50%:

    The theme also uses media queries to define what happens at each of a set of breakpoints. At 979/980px the navbar becomes responsive, under the logo. So you only need to swap the logo/navbar above that point.

    So the CSS becomes:

    @media (min-width: 980px) {
    .brand.span3 {
        float: right;
        width: 48%;
    }
    .navbar-wrapper.clearfix.span9 {
        float: left;
        margin-left: 2%;
        width: 50%;
    }
}
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Logo and Navigation Bar Not Adjusting’ is closed to new replies.