Search to left of main navigation

Resolved suecarroll
(@suecarroll)

8 years, 7 months ago
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

Viewing 13 replies - 1 through 13 (of 13 total)

Theme Author Tom
(@edge22)

8 years, 7 months ago
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-classes

Then 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 🙂
Thread Starter suecarroll
(@suecarroll)

8 years, 7 months ago

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?

Theme Author Tom
(@edge22)

8 years, 7 months ago

You can just put a hash tag: #

That’s correct 🙂

Thread Starter suecarroll
(@suecarroll)

8 years, 7 months ago

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 right

What 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

Theme Author Tom
(@edge22)

8 years, 7 months ago

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 🙂

Thread Starter suecarroll
(@suecarroll)

8 years, 7 months ago

Hi Tom, here is a temporary link

Theme Author Tom
(@edge22)

8 years, 7 months ago

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 🙂

Thread Starter suecarroll
(@suecarroll)

8 years, 6 months ago

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?
Theme Author Tom
(@edge22)

8 years, 6 months ago
Ah! Try this:
```
.navigation-search {
    right: 100%;
}
```
Thread Starter suecarroll
(@suecarroll)

8 years, 6 months ago

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.
screenshot

How can I get rid of the border under the search box?
Theme Author Tom
(@edge22)

8 years, 6 months ago
Try this:
```
.main-navigation li.search-item.current-menu-item a {
    border-bottom: 0;
}
```
Let me know 🙂
Thread Starter suecarroll
(@suecarroll)

8 years, 6 months ago

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

Theme Author Tom
(@edge22)

8 years, 6 months ago

Glad I could help!

Happy Holidays to you and your family as well 🙂

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘Search to left of main navigation’ is closed to new replies.

Tags