Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] How-to get the Search bar stick to the menu, and not moving when changing th


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old May 14, 2012, 12:53 PM
Beautyfuzz
 
12 posts · May 2012
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
  #2  
Old May 14, 2012, 01:00 PM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old May 14, 2012, 01:07 PM
Beautyfuzz
 
12 posts · May 2012
Quote:
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 :/
  #4  
Old May 14, 2012, 01:10 PM
Beautyfuzz
 
12 posts · May 2012
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) :/

Last edited by Beautyfuzz; May 14, 2012 at 01:13 PM.
  #5  
Old May 14, 2012, 02:10 PM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old May 14, 2012, 03:11 PM
Beautyfuzz
 
12 posts · May 2012
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 ?
  #7  
Old May 14, 2012, 06:23 PM
juggledad's Avatar
juggledad
 
22,269 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old May 14, 2012, 06:48 PM
Beautyfuzz
 
12 posts · May 2012
Quote:
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?

Last edited by Beautyfuzz; May 14, 2012 at 07:00 PM.
  #9  
Old May 14, 2012, 06:52 PM
Beautyfuzz
 
12 posts · May 2012
If anyone know the CSS selector to the Logo area is please tell me

Thanks
Malin (BeautyFuzz)
  #10  
Old May 14, 2012, 09:08 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
I think it is #logoarea. Use the Firebug extension for Firefox to be sure.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old May 14, 2012, 11:00 PM
Beautyfuzz
 
12 posts · May 2012
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..
  #12  
Old May 14, 2012, 11:33 PM
Beautyfuzz
 
12 posts · May 2012
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Changing the header image width and moving the posts section up neondevil Header configuration & styling 3 May 9, 2011 05:57 AM
[SOLVED] Moving the search box & RSS icons odea Header configuration & styling 2 Feb 19, 2011 10:59 AM
Make the background stick when changing the size on the text Glalax Header configuration & styling 0 Jan 5, 2010 09:39 AM


All times are GMT -6. The time now is 10:43 PM.


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