0

I'm trying to make a fixed top bar with a search button, facebook login, etc... The bar is fine, the problem is, the search button is moving along the page when it changes the resolution, I want it fixed like the facebook login bar, so it doesn't matter if you change the resolution, all the buttons have to move with the topbar, what do I have to do? Thanks.

.fixbar {
width: 100%;
position: fixed;
left: 0px;
top: 0px;
height: 30px;
background-image: url(../img/fixbar.png);
background-repeat: repeat-x;
z-index: 1;
bottom: 0px;
}


#search {
position: fixed;
left: 396px;
top: 0px;
width: 100%;
height: 22px;
z-index: 2;
}

2 Answers 2

1

You need to set position:fixed .fixbar class and then u need to set position:absolute to the #search id.

CSS

.fixbar {
    width: 100%;
    height:30px;
    position: fixed;
    left: 0px;
    top: 0px;
    right:0 height: 30px;
    background: red;
    z-index: 1;
}
#search {
    position: absolute;
    right:20px;
    top: 0px;
    width: 30px;
    height: 22px;
    z-index: 2;
    background:blue;

}

HTML

<div class="fixbar">
    <div id="search"></div>
</div>

output in here

DEMO

2
  • yes but that way the search button moves as the page changes the resolution, I wanted it fixed in a position no matter the resolution is May 19, 2013 at 18:59
  • Search id within a parent element called .fixbar class.So if are changing resolution #search bar going together with parent element.This is the way we are doing it normaly
    – underscore
    May 19, 2013 at 19:03
0

Sorry I do not understood your question. Let's play with a live example and i'll try to unsderstand and maybe can help you. Have a look at: http://jsfiddle.net/xdEUN/

<div class="wrapper">
<div class="fixbar">
<input type="search" id="search" />
</div>
</div>
1
  • I want a bar just like the facebook one, with home button, search and whatever. May 19, 2013 at 21:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.