[Resolved] Navigation Search Bar

Home Forums Support Navigation Search Bar

Viewing 15 posts - 1 through 15 (of 37 total)
  • Author
    Posts
  • #101532
    Mike Tolliver

    Hi Tom,

    At some point when adjusting my website, I put the site search function inside the primary navigation bar, justified to the far right.

    Following this guide:
    http://generatepress.com/forums/topic/social-networks-buttons-on-nav-menu-bar/
    I managed to put the social icons into the nav bar and justified them right using the ‘!important’ command in the css (couldnt get it to work otherwise).

    Now the social icons are all the way to the right with the search icon immediately to the left of those. I would prefer the search icon on the far right, but I cant even find the setting I originally did to place the search bar in the primary nav in the first place. I feel like I am taking crazy pills. Any suggestions?

    #101622
    Tom
    Lead Developer
    Lead Developer

    Ha, I’m actually working on this right now – check out our demo and you’ll see the same problem (http://generatepress.com/demo). I want the search on the far right as well.

    I’ll figure out a solution and will post it here 🙂

    The option to place the search icon in the navigation can be found in “Appearance > Customize > Layout” – it’s the “Navigation Search” option.

    Thanks!

    #101951
    Mike Tolliver

    Awesome! Thanks for the speeding support and direction. I would have no hope of being able to build my own website without tools like GP and customer support like yours. Thanks again!

    #102032
    Tom
    Lead Developer
    Lead Developer
    #102033
    Tom
    Lead Developer
    Lead Developer

    Found a solution. This will allow you to place the search icon wherever you like in your navigation.

    1. Add this CSS:

    .main-navigation .search-item {
    	display: none;
    }
    
    .main-navigation .search-item.custom {
    	display: block;
    }

    First block will hide the default search button.

    Second block will show our soon to be added menu item.

    2. Go to “Appearance > Menus”. At the top right, click “Screen Options” and make sure the “CSS Classes” checkbox is checked.

    On the left, open the “Custom Links” module.

    For the URL, add: #

    For the Link text, add: <i class="fa fa-search"></i>

    For the CSS class, add: search-item custom

    3. Add the menu item to your menu, and place it wherever you like.

    This hasn’t been tested as a sub-menu item, and it probably won’t work as one, so definitely keep it as a top level menu item.

    Hope this helps! 🙂

    #102046
    Mike Tolliver

    Worked like a charm!

    #102066
    Tom
    Lead Developer
    Lead Developer
    #112577
    Joseph

    I followed your css and menu setup and it worked great with the exception of two issues.

    1) The default search icon still displays although the css is saying not to.

    .main-navigation .search-item {
    display: none;
    }

    2) I increased the size of the icon to match the social media to
    <i class=”fa fa-search fa-2x”></i> and that worked perfectly but after I do a search and click on the “x” to close the search bar, the search icon goes back to original size (smaller)

    Everything is set just as mentioned above and the css is in the GP child theme.

    You can see what I am talking about here:
    (http://provinciawebdesign.com/disruptup/?page_id=46)

    Thanking you in advance!!!

    #112597
    Tom
    Lead Developer
    Lead Developer

    1. Ah – try adding !important to it – the navigation floating to the right is overwriting it:

    .main-navigation .search-item {
          display: none !important;
    }

    2. This is because the JS replaces the code between the X and search icon, and it doesn’t know to add 2x to it. Instead, try this:

    .main-navigation .search-item.custom i {
          font-size: 2em;
    }
    #112614
    Joseph

    Adding the !Important knocked both of the search icons off. I do have the Navigational Search enabled and I removed the fa-2x from the menu to <i class=”fa fa-search”></i>

    So in the Child Theme this is what I have.

    .main-navigation .search-item {
    display: none !important;
    }

    .main-navigation .search-item .custom {
    display: block;
    }

    .main-navigation .search-item .custom i {
    font-size: 2em;
    }

    Don’t know why it is hiding both icons.

    Thanks Tom!!

    #112750
    Tom
    Lead Developer
    Lead Developer

    !important is pretty strong – my mistake.

    You’ll have to also add it to the custom icon:

    .main-navigation .search-item.custom {
          display: block !important;
    }
    #112989
    Graham Leatherbarrow

    Followed your instructions and at the moment I get 2 icons on the nav menu. When clicked both seem to fade the the bottom line of nave menu.

    htpp://www.isleofskybedandbreakfast.com

    Thanks in advanced.

    Graham.

    #113002
    Tom
    Lead Developer
    Lead Developer

    Your website doesn’t seem to be loading for me.

    Let me know 🙂

    #113043
    Graham Leatherbarrow

    Sorry Tom, typing error:

    http://www.isleofskyebedandbreakfast.com

    #113079
    Tom
    Lead Developer
    Lead Developer

    If you’re using the float right navigation position, this is the CSS you should use:

    .main-navigation .search-item {
          display: none !important;
    }
    
    .main-navigation .search-item.custom {
          display: block !important;
    }
Viewing 15 posts - 1 through 15 (of 37 total)
  • You must be logged in to reply to this topic.