• 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

Menu Scrolling and additional sticky header

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 › StudioPress Themes › Navigation Pro › Menu Scrolling and additional sticky header

This topic is: not resolved

Tagged: menu items and header

  • This topic has 5 replies, 3 voices, and was last updated 1 year, 10 months ago by Anita.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 4, 2021 at 2:06 pm #503934
    Cuz
    Participant

    Is there a way to add a scroll bar to the submenu items? I have more than can fit on the screen and they are getting cut off. Or is there a better option to handle this problem?

    I would also like to add our office number to the sticky header about the menu items. Has anyone been able to do this with the navigation pro menu?

    http://amandaljameslaw.com
    May 5, 2021 at 8:06 am #503942
    Anita
    Keymaster

    For long menu items, it recommended to remove the sticky navigation so the person can actually scroll down. Using a "scroll bar" wouldn't be accessible-friendly especially give that's a legal website. If they need to get back to the top, you can add a "back to top" to the site to take them there.

    Also having the sticky would require your new "above the nav" area for the phone number to stick. Which wouldn't work well because of your long menu item.

    You could changing the "fixed" nav to "absolute" and then try this code snippet from Codepen to make it 3 columns on hover similar to a mega menu though. Just change 405px to something like 550px and modify the other CSS the way you need it.


    Love coffee, chocolate and my Bella!

    May 5, 2021 at 10:25 am #503947
    Cuz
    Participant

    Thank you Anita. I also adjusted the min-device-width to make it work on mobile. Is it possible to add our number at the top above the menu?

    May 5, 2021 at 1:04 pm #503950
    Marcy
    Participant

    Here are 2 tutorials.

    For the first one, you can add the CSS in the Additional CSS in the Customizer or at the end of your stylesheet - adjust the settings as needed. You don’t need any of the php as long as you limit that menu item to 2 levels.

    Mega Menu Navigation for Genesis Themes using CSS

    The other tutorial is here, but is a membership tutorial - I didn’t notice at first
    https://sridharkatakam.com/mega-menus-genesis/


    Marcy | Amethyst Website Design | Twitter

    May 5, 2021 at 1:07 pm #503951
    Cuz
    Participant

    Thank you Marcy. I have the menu figured out. Looking to add our number at the top of our header.

    May 5, 2021 at 1:30 pm #503952
    Anita
    Keymaster

    @cuz another mention on the accesscible menu here from Amber Hinds.

    For the telephone number, try Carrie's tutorial on adding a Utility Bar.


    Love coffee, chocolate and my Bella!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.
Log In

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