Menu bar and Logo image problem

[bhattigurjot]

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.

[waylaid]

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.

[bhattigurjot]

@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. :(

[bhattigurjot]

@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.

[waylaid]

> 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”

[bhattigurjot]

@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?

[Author]

Posts