Jump to content
Sign in to follow this  
andulka

Wrapping the menu and/or changing the search box width

Recommended Posts

andulka

I have added a menu tab which was dropped to a second line in FF and IE (Station Pro). Tried adding

#nav ul, #nav .mnav {width:960px;}

to custom css, which did wrap the menu but dropped the search box down so that I ended up having two lines in the menu area anyway. I guess changing the search box width might solve the problem, but where do I find that? For now I just removed the serch box and it looks like this.

Share this post


Link to post
Share on other sites
Andrew

Could you clarify what you mean by "changing the search box"; your site looks nice. Did you fix this issue?

Share this post


Link to post
Share on other sites
andulka

I mean changing the search box width - as you can see there is no search box next to the meny tabs at the moment, as I have removed it. I'd like to keep it there, but if I add it and use the code I mentioned, it's dropped down so that the tabs are all in one line the way they're now, but the search is on a line below them. If I don't use the code, the search box remains where it's supposed to be, but the last menu tab moves below the Home tab. So I guess I would need to change the search box width to keep it on the first line?

Share this post


Link to post
Share on other sites
cmunns

Are you using WP3.0 menus? or is the default way..

Share this post


Link to post
Share on other sites
bikepirate

I'm using the default way. I have the same question, how do I change the width of the search box? www.bikepirate.com

Share this post


Link to post
Share on other sites
cmunns

Just use some CSS Put this in the Custom css area of the theme options. ` #searchform {width:200px;} #s {width:170px;} `

Share this post


Link to post
Share on other sites
andulka

That indeed makes the search box narrower, but does nothing with the menu tabs wrapping issue - the last tab is still dropped underneath the others, like Capture1.JPG. Used together with

#nav ul, #nav .mnav {width:960px;}

, the menu tabs stay on the same line, but the now narrower search box is dropped to the second line, like Capture.JPG What I want is to get both the menu tabs and the search box on the same line, don't know why it does that when obviously there's enough room now and I suppose it shouldn't even need the first piece of code?

Share this post


Link to post
Share on other sites
andulka

Well, that didn't work - here are the screenshots again: Without the wrapping: Capture1.JPG With the wrapping: Capture.JPG

Share this post


Link to post
Share on other sites
andulka

Sorry for the double post, should've just changed the size of the images of course. Well, the problem is illustrated there anyhow...

Share this post


Link to post
Share on other sites
bryan-hadaway

Hi. Unfortunately, you'll need to leave the search box in place so we can see and test and fix the problem live. Thanks, Bryan

Share this post


Link to post
Share on other sites
andulka

OK, it's there now, with the wrapping enabled.

Share this post


Link to post
Share on other sites
bryan-hadaway

This was silly of me, we needed to make the nav width smaller, NOT bigger :). Okay this should work: `#nav ul, #nav .mnav{width:670px}` Thanks, Bryan

Share this post


Link to post
Share on other sites
andulka

Great, thanks! With that value it still dropped the last menu tab to the second line, but changing the width to 700px did the job and kept both menu tabs and the narrower search box on the same line. :-) Thank you!

Share this post


Link to post
Share on other sites
andulka

In all the browsers I checked it with, I might add (Opera, FF, Chrome, Safari and IE8)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×