Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] How-to get the Search bar stick to the menu, and not moving when changing th (http://forum.bytesforall.com/showthread.php?t=17555)

Beautyfuzz May 14, 2012 12:53 PM

[SOLVED] How-to get the Search bar stick to the menu, and not moving when changing th
 
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 :)

juggledad May 14, 2012 01:00 PM

Quote:

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.

Beautyfuzz May 14, 2012 01:07 PM

Quote:

Originally Posted by juggledad (Post 85100)
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 :/

Beautyfuzz May 14, 2012 01:10 PM

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) :/

juggledad May 14, 2012 02:10 PM

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.

Beautyfuzz May 14, 2012 03:11 PM

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 :) ?

juggledad May 14, 2012 06:23 PM

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...

Beautyfuzz May 14, 2012 06:48 PM

Quote:

Originally Posted by juggledad (Post 85124)
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?

Beautyfuzz May 14, 2012 06:52 PM

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

Thanks
Malin (BeautyFuzz)

lmilesw May 14, 2012 09:08 PM

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

Beautyfuzz May 14, 2012 11:00 PM

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..:confused:

Beautyfuzz May 14, 2012 11:33 PM

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


All times are GMT -6. The time now is 04:09 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.