Hi!

I got the search bar in the menu under my header. On my laptop (where i styled it) its perfect, but when I change to another pc with bigger screen or resize the screen the searchbar is moving. I want it to be stuck on the same place (in the menu) on any screen sizes.

How do I do that?

Here is the code ive been using:

width: 200px;
margin: 0;
padding: 0;
position:absolute;
right: 0px;
top:175px;

www.beautyfuzz.com is the site

width: 200px;
margin: 0;
padding: 0;
position:absolute;
right: 0px;
top:175px;

these are the CSS rules, but without knowing what CSS selector you are applying them, it makes more work for someone to help you.

Originally Posted by juggledad

these are the CSS rules, but without knowing what CSS selector you are applying them, it makes more work for someone to help you.

Is to the Searchbar in the logo area.

Style & Edit HEADER AREA > Search box - Style the searchbox in the header.

I dont know the CSS selector or where I can find it in the documents :/

Btw: When I used the relative (position) it worked, but then the logo area ( big white space) showed between the header and the menu. And I dont want the logo area to show (just the search bar) :/

The only way to actually guarantee this would be to add the HTML code that makes up the search area into the code that makes up the menu. This would involve editing the theme code and you would have to re-do it each time the theme is updated.

ahh ok

But can I fix the width of the logo area? Maybe That will work?

If I set the logo area to 1280px wide the search box wont go further right (It can´t go outside the logo area) If you understand what I mean ?

Try it, the best way to find out if something is going to work is to try it.

BTW - you might want to make the site a fixed width. Take a look if you resize the window small...

Originally Posted by juggledad

Try it, the best way to find out if something is going to work is to try it.

BTW - you might want to make the site a fixed width. Take a look if you resize the window small...

Yeah I know. But If I have fixed width (say 1250px) will those with smaller screen (mobilscreens) get a scrollerbar ?
Is there a mobil/handheld (stylesheet) included in atahualupa?

If anyone know the CSS selector to the Logo area is please tell me

Thanks
Malin (BeautyFuzz)

I think it is #logoarea. Use the Firebug extension for Firefox to be sure.

It didn´t work with #logoarea. I tried #logoarea{width:1250px;}

I think if I can manage to set a fixed width on the "logo area" the search bar won´t move around (when resize the window) But how..

I think I made it!

Logo Area: Styling (Style & Edit HEADER AREA)

position:absolute;
top: 100px;
width:1250px;


Search Box (Style & Edit HEADER AREA)

position:absolute;
right:2px;
top:79px;

When I put the "absolute" and top/right values in both it worked...


Thanks for the help and for the tip about Firebug, I didn´t know about that :D