Search to left of main navigation

  • Resolved suecarroll

    (@suecarroll)


    7 years, 11 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)

    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)

    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)

    You can just put a hash tag: #

    That’s correct ??

    Thread Starter suecarroll

    (@suecarroll)

    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)

    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)

    Hi Tom, here is a temporary link

    Theme Author Tom

    (@edge22)

    It seems to be working for me?: https://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)

    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)

    Ah! Try this:

    .navigation-search {
    right: 100%;
}
    Thread Starter suecarroll

    (@suecarroll)

    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)

    Try this:

    .main-navigation li.search-item.current-menu-item a {
    border-bottom: 0;
}

    Let me know ??

    Thread Starter suecarroll

    (@suecarroll)

    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)

    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.