- This topic is empty.
June 26, 2013 at 1:24 pm #45893
Here’s my [site](http://188.8.131.52/~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 8:03 pm #140646waylaidMember
The Menu bar has a height set to 34px. Also the background for the Menu bar is an image (http://184.108.40.206/~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 #140657
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 #140658
Now my new code is
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 #140672waylaidMember
> 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 id=”top-social-profiles”June 30, 2013 at 4:41 am #141021
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?
- The forum ‘CSS’ is closed to new topics and replies.