[Resolved] Wonky navigation search question

[morriscountynj]

Trying to mess with things a bit when the mobile menu is triggered.

Right now, I have both top and left-side navigation. On mobile, I use custom jquery to append the left-side nav items into the main menu (and then remove the left sidebar), so all of the navigation is in one place.

As you might guess this can get pretty long, so what I want to do is grab the navigation search and put it as the first list item in the mobile menu.

$('.search-item').detach().prependTo('#menu-top-nav');

This has interesting behavior – it moves the <li> to the right place, BUT the <form> doesn’t move with it. So when you click on the icon for search, it actually jumps you down to the bottom of the menu, where you can type in.
http://www.awesomescreenshot.com/image/438954/4fec59353fb8148ed3d9a52ec212092d – moved to the top
http://www.awesomescreenshot.com/image/438960/7d00580a85874772a8540e325e2139fd – jumped to the bottom

I noticed in the code that the <form> actually comes right after <div class="inside-navigation grid-container grid-parent">, and not along with the <li class=”search-item”>.

So I guess my question is, is there a way to edit this so the <form> goes along with the <li>, which would allow me to do this fun jquery switching? 🙂

[Tom]

Tricky 🙂

You should be able to move it using CSS:

.navigation-search {
      top: 0;
}

Let me know if that does the trick or not.

[morriscountynj]

almost 🙂
http://www.awesomescreenshot.com/image/441087/2658756fd4e9e8d7812063c6d7f308ed

it overlays the form ofvfer the item ABOVE the search item.

[Tom]

Ah, change the “top” attribute to whatever height you have set with your menu item (default is 60):

.navigation-search {
      top: 60px;
}

[morriscountynj]

that’s it! wouldn’t have thought of that 🙂

thanks again! next time i need to break your theme’s functionality i’ll send you an email ^_^

[Tom]

I’ll be here! 🙂

[Author]

Posts