Topbar resize issue

HTML & CSS
1

Hi,

The current website I am working on - http://www.mobilebuddy.co.uk/encompass/ needed the topbar content above the main content area. I did this by adding a margin-left & margin-right of 500px.
However, when resizing the browser this causes the topbar height to increase drastically, any solution to fix the responsiveness would be greatly appreciated. Thank you.

2

Hi,

The easiest option would be to nest an inner div inside the topbar and set it to margin:auto and max-width:940px.

Without touching the html you can try this:



#topbar{
padding-left:0;
padding-right:0;
max-width:940px;
margin:auto;
}

#topbar:before,
#topbar:after{
content:"";
position:absolute;
left:-1000em;
top:0;
height:100%;
background:#404040;
width:1000em;
}

#topbar:after{
right:-1000em;
left:auto
}

The above is additional code and follows after the original rules. It should work in IE9+ (and possibly ie8).

3

Thank you! This solved my issue.

4