---
title: "Fixed search button top bar"  
description: "Fixed search button top bar"  
author: "Royce Roy"  
published: 2013-05-20  
updated: 2013-05-20  
canonical: https://www.mindstick.com/forum/915/fixed-search-button-top-bar  
category: "facebook api"  
tags: ["facebook api"]  
reading_time: 1 minute  

---

# Fixed search button top bar

Hi Guys!\
I'm trying to make a fixed top bar with a [search button](https://answers.mindstick.com/qa/34597/what-is-site-search-button), [facebook login](https://www.mindstick.com/forum/34671/android-facebook-login-api-returns-only-name-and-id), etc... The bar is fine, the [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) is, the search button is moving along the page when it \
changes the [resolution](https://www.mindstick.com/articles/12502/looking-for-an-mba-degree-we-guide-you-with-the-perfect-resolution), I want it fixed like the facebook login bar, so it doesn't [matter if](https://answers.mindstick.com/qa/46707/do-airlines-wait-if-their-own-connecting-flight-is-late-does-it-matter-if-it-s-an-international-flight) you change the resolution, all the buttons have to move with the top bar, \
.fixbar {width: 100%;position: fixed;left: 0px;top: 0px;height: 30px;[background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp)-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;}\
what do I have to do? Thanks. in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)!

## Replies

### Reply by AVADHESH PATEL

Hi Royce!\
You need to set position:fixed .fixbar class and then u need to set position:absolute to the #[search](https://www.mindstick.com/articles/65368/best-smo-services-company-in-hyderabad-improve-search-rankings) 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>\
It may be helpful for you.


---

Original Source: https://www.mindstick.com/forum/915/fixed-search-button-top-bar

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.