• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Displaying the search box in mobile menu width of Essence Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Displaying the search box in mobile menu width of Essence Pro

This topic is: not resolved

Tagged: Essence Pro, nav menu, Search Form

  • This topic has 5 replies, 3 voices, and was last updated 4 years, 6 months ago by Brad Dalton.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 28, 2018 at 12:17 am #221181
    lvvvvvl
    Participant

    Hey,

    I really like the Essence pro theme though the one thing I'd like to see is the ability to have the search box nicely fit into the mobile/tablet navigation.

    I thought an alternative would be to use the MegaMenu.com plugin I'm using now but would have no clue as to how to implement it into this theme and I doubt it would flow as nicely as the native one does.

    Are there any tutorials or something out there on how this could be done?

    Thank you

    June 30, 2018 at 12:22 am #221231
    Brad Dalton
    Participant

    Where exactly in the mobile navigation drop down menu did you want to position the search box?


    Get Help – Book Consultation.

    July 4, 2018 at 1:08 am #221318
    lvvvvvl
    Participant

    Hey Brad,

    Love wpsites, it's been very useful. I think it would look best at the very top of all the navigation links. What do you think?

    July 4, 2018 at 2:13 am #221320
    Brad Dalton
    Participant

    Thanks for the positive feedback.

    I think you would need to add it in the drop down menu before the menu items.

    I know its fairly easy to add it to the menu using code like this https://my.studiopress.com/snippets/nav-extras/

    You could then use media queries to hide it so it only displays on smaller screens.

    Foodie Pro uses this method which you could look at and then modify so the search is added before the drop down rather than after it as is the default.

    Not a 2 minute job but very good question.


    Get Help – Book Consultation.

    July 25, 2018 at 1:56 am #221966
    graceg
    Member

    Thanks for that tip! However, I need help in the code to set the search box to appear only on mobile version of the website...

    Where do I put the @mobile query?

    Thank you in advance!!

    July 25, 2018 at 2:08 am #221967
    Brad Dalton
    Participant

    Link to your site please.

    Which theme are you using?


    Get Help – Book Consultation.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble