S.Exx S.Exx - 4 months ago 8
CSS Question

Creating a responsive 'topbar'

I'm currently having difficulty creating a responsive 'topbar' while fiddling around.

I've created it normally and works fine when using a standard laptop sized display, but when I try to resize the screen down to a mobile size, i'm having trouble figuring out how to keep my content drifting from the view.

I've currently used 2 divs for the example.

top-bar-holder
is a container div and
top-bar
is used to keep content to a certain max-width.

I've also used a two tuple table which i've just used images in each for this example. The problem can be seen by trying to resize the viewport the images are disappearing to the left instead of staying on the screen.

I've attached a fiddle for better explanation.

Please ask if i've not been detailed enough in this question.



.top-bar-holder {
position:fixed;
width:100%;
height:70px;
background-color:#384452;
z-index:1;
}

.top-bar {
position:relative;
max-width:1100px;
width:100%;
border:1px solid orange;
height:70px;
left:50%;
margin-left:-550px;
}

.top-bar table tr th {
border:1px solid green;
height:65px;
max-width:50%;
}

<div class="top-bar-holder">
<div class="top-bar">
<table style="width:100%">
<tr>
<th> <img src="company-logo.png" width:"120" height="55" /> </th>
<th> <img src="company-logo.png" width:"120" height="55" /> </th>
</tr>
</table>
</div>
</div>




Answer

before I answer - you should avoid using tables for layout (if you have questions about this a quick google search will do good)

your positioning of .top-bar is causing the issue

.top-bar {
  left:50%; 
  margin-left:-550px;
}

This is your current css - margin-left will always stay at 550px. If your display is less than that you end up with no content. Generally, the agreed on way to horizontally center things is by setting the horizontal margins to auto. change the css above to this

.top-bar {
  margin:0 auto;
}

This is the same as using

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

and will center your header content the way I think you intended; as well as fixing your screen issue