Moving Search Field Above Primary Menu

[frankcitino]

I have both primary and secondary menus in place on my test site. I am wondering how I can move the search field above both of those? I would like for the search field and both menus to be fixed to the top.

Any thoughts?

Frank

[scrambler]

To fix the menus on top use the menu Fixed tp menu option in weaver to do that.

Once you do that, post a link to your site so we can give you custom CSS to move the search above both menus.

Also tell us this should also happen on mobile where vertical space is limited

[frankcitino]

Great, thanks.

Here is the link. http://www.science.smith.edu/test-4/

Also, the search should not seen on mobile devices.

Frank

[scrambler]

Hide the search on the header, and instead add it to the right of the secondary menu with the theme menu option and post back for CSS if you really want to waste the space at the top just for the search 🙂

 

[frankcitino]

I think that will work for now, THANKS. For argument sake, what is the css to move it to the top?

 

Frank

[scrambler]

You need to put it on the other menu (the one at the top)

When that is done, you could add the rules below to the theme Global Custom CSS Rule box

.is-desktop .menu-search {margin-top:-30px;}
.is-desktop #nav-primary .wvrx-menu-container {top:98.2px !important;}
.is-desktop #nav-secondary .wvrx-menu-container {top:30px !important;}
body.is-desktop {margin-top:157.4px !important;}
.is-mobile .menu-search {display:none;}

If you increase or decrease the 30px value of the menu search top margin, do the same with the same amount to all the other top and margin top (ie: -20px ; 88.2px ; 20px ; 147.4px)

Last rule will hide the search on mobile

If any issue post back with rules in place

[frankcitino]

Thank you so much.

 

Frank

[Author]

Posts