• 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

How can I achieve a single dropdown navigation menu with text?

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 › How can I achieve a single dropdown navigation menu with text?

This topic is: not resolved

Tagged: jquery, slideToggle, toggle

  • This topic has 1 reply, 2 voices, and was last updated 2 years, 6 months ago by Brad Dalton.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • July 4, 2020 at 8:54 am #499936
    jrnielsen97
    Member

    im trying to acheive the orange drop down menu that's on the site of http://www.wpbeginner.com

    its a secondary header, drop-down navigation menu "BEGINNERS GUIDE FOR WORDPRESS" orange with 3 submenus side-by-side, with text/image and a button "VIEW ALL GUIDES"

    Can someone let me know how that's done? Thanks!

    http://www.wpbeginner.com
    July 4, 2020 at 9:14 pm #499958
    Brad Dalton
    Participant

    You'll need 3 things :

    1. jQuery
    2. HTML
    3. CSS

    1.(a) You can use the .toggle() function in Jquery https://api.jquery.com/toggle-event/

    Or

    (b) In this case, they used .slideToggle();

    2. And hook in the HTML using the genesis_after_header hook

    3. The CSS could be done using CSS grid. You can also inspect the element and find the CSS which was used in the example you're referring to.


    Get Help – Book Consultation.

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 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