Move Search Bar to the Right of the Category Names

How can I move the "search bar" to the right of the category names in the green navigation bar on PantrySpa.com?

If it helps, I have granted support access via the wpmu plugin.

Thanks for your help!

  • Michael Bissett
    • Recruit

    Hey @d-invent, it's Michael, from the live chat earlier today. :slight_smile:

    Since you've used "float: right" with those menu items (courtesy of some custom CSS code), we'll need to use some extra CSS code to undo that for most of the items, while keeping them to the right of that logo (and preserving the appropriate spacing):

    @media only screen and (min-width: 1024px) {
    
    #menu-main-menu li#menu-item-4305,
    #menu-main-menu li#menu-item-4306,
    #menu-main-menu li#menu-item-4307,
    #menu-main-menu li#menu-item-4308,
    #menu-main-menu li#menu-item-4310 {
        float: none;
    }
    
    #menu-main-menu li#menu-item-4305 {
        margin-left: 142px;
    }
    
    }

    The arrangement of the menu items will be reversed though, bear that in mind.

    Let me know if this helps please! :slight_smile:

    Kind Regards,
    Michael

    P.S. Bonus item: I noticed that your site's logo wasn't showing up on the green menu bar properly between the screen widths of 1024px & 1139px (it got moved down, so it was basically below the bar). Here's a bit of CSS code that should help with that:

    @media only screen and (min-width: 1024px) and (max-width: 1139px) {
    
    span.nav-logo {
        margin-top: -58px;
        margin-left: -25px;
    }
    
    }
  • d-invent
    • The Incredible Code Injector

    Perfect, thank you so much Michael! And thank you for the bonus bit too :slight_smile:

    I figured out how to setup google custom search (it is currently in the top of the sidebar on the home page)... how can I replace the default wordpress search bar that is now in the nav bar with the google custom search bar?

    Thank you again... you are amazing!!!

  • d-invent
    • The Incredible Code Injector

    Oh one more thing (related to your bonus tip!)... I noticed that at a small set of screen widths, the logo still is appearing beneath the navigation bar (behind the ad unit) rather than on the navigation bar... any help on fixing that would be fabulous!!!

  • Michael Bissett
    • Recruit

    Hey @d-invent,

    I figured out how to setup google custom search (it is currently in the top of the sidebar on the home page)... how can I replace the default wordpress search bar that is now in the nav bar with the google custom search bar?

    As shared on the live chat today, since that's added as a widget, one thing you could try would be to use this plugin to widget a widget area that can be inserted into a page via shortcode:

    https://wordpress.org/plugins/amr-shortcode-any-widget/

    Then, you could try combining that this with plugin, as it'll allow to insert shortcodes into your menu as menu items:

    https://wordpress.org/plugins/shortcode-in-menus/

    Oh one more thing (related to your bonus tip!)... I noticed that at a small set of screen widths, the logo still is appearing beneath the navigation bar (behind the ad unit) rather than on the navigation bar... any help on fixing that would be fabulous!!!

    Seems to be fine on my end over here inside of Google Chrome now, did you change something in the meantime? (it wasn't working quite right earlier on the live chat)

    Please advise,
    Michael

  • d-invent
    • The Incredible Code Injector

    How odd?! I didn't change anything, but the logo seems to be working on my end too... except that it is still being displayed twice when you click on the hamburger menu for the categories to be displayed in the dropdown menu on the mobile-width version of the site... how do I change that?

  • Bojan Radonic
    • Head of Support

    Hey there @d-invent, hope you're well today!

    You can remove one or the other in mobile resolutions with some custom CSS. Which one would you like to remove? I'll add code for both here so you can see how it looks in both versions :slight_smile:

    To remove top one please add the following:

    @media only screen and (max-width: 770px) {
    .nav-primary .wrap {
    background: none;
    }
    }

    To remove the one that is being displayed when hamburger menu is opened please add the following:

    @media only screen and (max-width: 770px) {
    .nav-logo {
    display: none;
    }
    }

    Hope this helps :slight_smile:

    Best regards,
    Bojan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.