Search to left of main navigation
-
Hi, I would like to put the search icon and bar to the left of the main navigation.
I have enabled ‘Search’ in Customise and have searched the GP forum and found this css
.main-navigation li.search-item { float: left; }
but this doesn’t work. I have tried various other code without luck
Any help in getting the search to the left side of the menu would be appreciated. My site is theaccidentalbook.co.uk but it is behind a ‘coming soon’ page at the moment
-
Hi there,
You could try this:
1. Hide the default search button:
.main-navigation li.search-item { display: none; }
2. Add a new custom menu link, and give it a class of
search-item custom
:
https://generatepress.com/knowledgebase/using-menus/#create-drop-down-menu-custom
https://generatepress.com/knowledgebase/using-menus/#custom-classesThen drag it over so it’s the first item in your menu.
3. Add this CSS:
.main-navigation li.search-item.custom { display: block; }
Let me know if that works or not š
Hi Tom,
What do I put as the URL in the custom menu link?
Also the class ‘search-item custom’ has a space between item and custom?
You can just put a hash tag: #
That’s correct š
Hi Tom,
Thanks. I am having problems getting it to work properly, though. I had to put
float:left
to get the custom link to move to the left, even though I dragged it above the other menu items. However, when I click the custom link it opens on the right in the place it originally was which is covering up the menu! Here are somescreenshots
Custom link on left
Search box opens on rightWhat i would like to happen is for SEARCH to be on the left of the menu and open up to the left of the search icon.
Any advice appreciated
Strange, is there any chance you can link me to the site? That way I can provide you with the CSS to fix it in one go.
Let me know š
Hi Tom, here is a temporary link
It seems to be working for me?: http://www.screencast.com/t/00zVosw8P
The only adjustment I had to make was removing the 20px of margin-top you added to the items.
Let me know š
Oh, I was expecting the search box to open on the left of the menu, to the left of the search icon, in the gap between the logo and the menu. (I’m not so keen on it covering up the menu) Is that possible?
Ah! Try this:
.navigation-search { right: 100%; }
Thanks Tom!
Sorry to bother you again but just another quick question.
I have put an orange underline border on the current menu item and it continues under the Search box.
screenshotHow can I get rid of the border under the search box?
Try this:
.main-navigation li.search-item.current-menu-item a { border-bottom: 0; }
Let me know š
That worked great (had to add a:hover to get rid of the border on hover)
Thanks Tom, your support has been fantastic.
Wishing you and your lovely family a happy holiday
Glad I could help!
Happy Holidays to you and your family as well š
- The topic ‘Search to left of main navigation’ is closed to new replies.