Hi guys,

 

Im adding a top bar to my site, basically it will be a fixed bar that has just a few functions so the user doesn't have to scroll right back to the top all time. Its going okay but I've hit a bit of a problem. basically when the browser window is resized all the divs on the bar seem to overlap my search box. This usually wouldn't be a problem but my site resizes itself on iphones,ipads etc so this needs to look right.

 

Ive tried all sorts of random code, adding float, clear tags etc but cannot figure this out. As you can proberly see from the code below, CSS isn't my strong point.

 

PICTURES OF PROBLEM

 

Before

 

 

After

 

 

 

CSS

 

#floattop {
background-color: black;
width: 100%;
height: 39px;
z-index: 1000;
position:fixed;
left:0px;
right:0px;
overflow:hidden;

}

#topsearch {
width:30%;
margin: 0px auto;
min-width:200px;
max-width:300px;
position:relative;


}

.topsocial {
position:relative;
top:-30px;
float:right;
margin-right:2px;
padding-right:5px;
margin-left:2px;


}

#homeicon {
float:left;
position:relative;
top:-36px;

}

.login {
position:relative;
top:-32px;
float:right;
vertical-align:middle;
margin-right:2px;
margin-left:2px;
color:white;
margin-right:4px;
}

.login a {
color:white;
}

#topnav {
display:block;
float:left;
margin: 0 auto;
height:42px;
position:relative;
top:-20px;
}

 

 

Any help would be greatly appreciated. Thanks in advance

 

Jack

What does your markup look like? I can see a couple of problems in your CSS already, but helps to have both. The main issue is you're mixing relative and fixed positioning - position: fixed is like position: absolute, it removes a element from the document flow, so you can't use floats to reflow it.

change positions to absolute and place everything inside a container

so like this

 

<div class="topBar">

[indent]<div class="barcontainer">
[indent]<img src="" class="img"></img> etc. etc.[/indent]

</div[/indent]
</div>

 

then

.img{
margin-left:150px;
position:absolute;
}

 

 

et

What does your markup look like? I can see a couple of problems in your CSS already, but helps to have both. The main issue is you're mixing relative and fixed positioning - position: fixed is like position: absolute, it removes a element from the document flow, so you can't use floats to reflow it.

 

Sorry for the late reply, was away from my computer yesterday. Anyway here is my dodgy markup lol thanks again.

 

<!-- Start Top Fixed Banner -->
	<div id="floattop">
					<div id="topsearch">
                   	<?php get_search_form(); ?>
                   	</div>

                   	<div class="login">
                   	<?php wp_loginout(); ?>
                   	</div>

                   	<div class="login">
                   	<?php wp_register('', ''); ?>
                   	</div>

                   	<div class="topsocial">
                   	<img src="<?php bloginfo('template_directory'); ?>/library/images/fb.png" title="" alt="" />
                   	</div>
                   	<div class="topsocial">
                   	<img src="<?php bloginfo('template_directory'); ?>/library/images/gplus.png" title="" alt="" />
                   	</div>
                   	<div class="topsocial">
                   	<img src="<?php bloginfo('template_directory'); ?>/library/images/twitter.png" title="" alt="" />
                   	</div>
                   	<div class="topsocial">
                   	<img src="<?php bloginfo('template_directory'); ?>/library/images/youtube.png" title="" alt="" />
                   	</div>

                   	<div id="homeicon">
                   	<img src="<?php bloginfo('template_directory'); ?>/library/images/homeicon.png" title="" alt="" />
                   	</div>

                   	<div id="nav2" class="nav">
                   	<?php wp_nav_menu( array('menu' => 'topmenu' )); ?>
                   	</div>
	</div>
	<!-- End Top Fixed Banner -->

change positions to absolute and place everything inside a container

so like this

 

<div class="topBar">

[indent]<div class="barcontainer">
[indent]<img src="" class="img"></img> etc. etc.[/indent]

</div[/indent]
</div>

 

then

.img{
margin-left:150px;
position:absolute;
}

 

 

et

 

Hi D,

 

If you look at my markup, above (just posted) my code is all inside a container called floattop ? is that what you mean? On changing my positioning to absolute my bar went a little crazy and everything has disappeared? Any ideas what ive done wrong haha ?