Menu Bar Search Bar & Link Buttons

[GR8FL]

I asked this a while ago and could not get it to work. Perhaps there is an update now. 

What I want is the Right HTML on the menu bar to display the search bar to appear, followed by a space and then the link buttons I defined to follow on the same line. 

Right now I have the following in the Right HTML menu bar: [buttons start='first-to-show' end='last-to-show' list='4,5,6' wrap='div'] 

When I add [search]   [buttons start='first-to-show' end='last-to-show' list='4,5,6' wrap='div'] it causes it to appear on two lines. 

Is there a fix?

Site: http://hattiesgarden.com/

[Gillian]

First, your syntax for the buttons has more in it than it needs.  The start and end options are an alternative to the list option.  Also, wrap=’div’ is the default option, so you don’t need to specifically include it (you can use wrap=’span’ instead, though).  So you have two choices for the shortcode in its simplest form:

[buttons start='4' end='6']

or

[buttons list='4,5,6']

(you would usually only use list for non-contiguous numbers, especially with a long list).

Have you tried including a div around both elements with style=”display: block;” ?  If this doesn’t work, I’m sure @scrambler will have the answer 🙂

 

[scrambler]

there is probably a default clear on the search. Bit right now it does not appear to be in. I only see the social buttons.

I need both in place to see and eventually get the CSS to avoid the clear.

But Gillian is right use the simplest syntax to start with

[search]   [buttons list='4,5,6']

[scrambler]

OK, so I tested on my site, the issue is they are both in divs, and so the divs must be floated to be on the same line

Add the rule below in Main Options > Menus > Primary menu bar > HTML text Color CSS+ box

div {float:left;}

[GR8FL]

That works great!

Can you tell me how I can change the default text of “Search… ” to something else?

[scrambler]

I don’t believe you can change the search text in the search box with Xtreme.

You may have to use the translation file. @weaver will have to confirm

[GR8FL]

For some reason, having the search bar on the menu bar just before the social icons, looks awful on mobile. How can I disable this in mobile view?

Or how can I replace the search button icon that is in the header with the search bar? I know how to disable the icon (magnifying glass), but I would like the search bar in that same place instead.

Thank you.

[scrambler]

You may want to put it in and explain what is ugly in case we can help with that.

If you want it hidden on mobile, you can place the [search] shortcode in a hide_if shortcode. look in the Add-Ons page for the syntax to use, for example.

[hide_if device=mobile][search][/hide_if]

If what you want is for the Search in the header to always have its box opened, you can follow the tutorial #2 below

http://forum.weavertheme.com/discussion/12930/weaver-xtreme-tips-and-tutorial-part-8

[Author]

Posts