Grow your CSS skills. Land your dream job.

Menu bar and Logo image problem

  • # June 26, 2013 at 1:24 pm

    Here’s my [site](http://202.164.53.122/~gurjot/wordpress/ “website”)

    Its responsive theme for wordpress. But when I resize my browser window my Menu bar content overflows to the next line but the background bar doesn’t.

    And you can see with the decrease in the browser window size my logo size also decreases but the gap between my logo and the menu bar increases. Why is that so?

    Please help.

    # June 26, 2013 at 5:30 pm

    I think it’s because you have a height in declared in the css for the header of 184px. The width is set to auto but that height is not reducing so it “looks” like there’s more space when actually it doesn’t move at all. Try eliminating that height and see what happens.

    # June 26, 2013 at 8:03 pm

    The Menu bar has a height set to 34px. Also the background for the Menu bar is an image (http://202.164.53.122/~gurjot/wordpress/wp-content/themes/Indicate/images/menu-primary-bg.png) which has a transparent section right where the overflowing content goes when the page resizes.

    So, even if you change the Menu bar height to, say, 100px the background colour still won’t show because it will be showing the transparent section of the background image.

    My solution would be:
    In the CSS remove _height_ from **.menu-primary-container**, (or change to ‘auto’). Change background to _background: #403d3d_ (the colour from your current background image).

    In the HTML add your clearfix class to the **.menu-primary-container** div and the background should flow.

    # June 27, 2013 at 12:39 am

    @janet4now

    I did what you said but that didn’t solved the problem. By removing the height:184px, now there’s a difference between logo and the menubar. And there is still the problem of increasing difference. :(

    # June 27, 2013 at 12:44 am

    @waylaid
    Now my new code is

    .menu-primary-container {
    padding:0;
    position:relative;
    height: 34px;
    background: #403d3d;
    z-index: 400;
    }

    If i change the height settings or even remove it, my menu bar(grey bg only) displays over the logo.

    So I solved the background issue by using @media query in which I changed the height settings to 70px.

    Now the problem is there is a huge space between my menu bar and the logo. And on decreasing the browser window size it increases.

    # June 27, 2013 at 4:19 am

    > If i change the height settings or even remove it, my menu bar(grey bg only) displays over the logo.

    I don’t see that in Chrome or Firefox using the dev tools. What browser are you using?

    Re. the huge space bewteen menu bar and logo:
    When your first media query kicks in **.logo** and **.header-right** both get float: none. If you take .logo out of that bit of CSS then the gap disappears. Hard to tell quite what’s going on though, below that you have these empty containers so hard to tell what changes would be needed if you start putting content in .top-social-profiles.

    div class=”header-right”

    div id=”top-social-profiles”

    # June 30, 2013 at 4:41 am

    @waylaid
    Sorry I didn’t replied earlier.
    And I’ve enabled social profiles now. The gap was the place for those profiles. It looks good now. Feeling stupid :D

    Anyway, thankyou for the help. :)

    But I want an advice on one more thing, the website is not responsive in between the browser width 1036 and 769. How could I make it?

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".