Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

sticky secondary navigation

  • Dear –

    Trying to copy the secondary menu from Apple website :
    https://www.apple.com/imac/

    Some details :
    – Text on the left + Link with CTA on the right
    – Highlight the curent page
    – Only on desktop
    – Sticky when scrolling
    – Different secondary menu item from from one section to another

    Would you able to guide me to achieve this ?

    thx

  • Hi there,

    can you explain this ?

    Different secondary menu item from from one section to another

    And can you share a link to the site you want to apply this to ?

  • here it is

    what I meant by Different secondary menu item from from one section to another is that from
    There are 2 sections with different content in each secondary menu
    https://www.apple.com/imac/
    https://www.apple.com/ipad-pro/

    link to the site : https://le-briand.fr/

    thx

  • 1. Enable secondary nav at customzier > layout > secondary navigation, set navigation location to below header.

    2. Create multiple menus at appearance > menus for your secondary nav for different pages.

    3. Use this PHP code to switch menus for secondary nav on different pages, note that the 1 of $args['menu'] = 1; is the menu ID, you can find the ID in the URL when editing a menu.

    add_filter( 'wp_nav_menu_args', function ( $args ) {
        // if the menu is the secondary menu && is page with ID 100
        if ( 'secondary' === $args['theme_location'] && is_page(100)  ) {
                $args['menu'] = 1;
        }// if the menu is the secondary menu && is page with ID 200
        if ( 'secondary' === $args['theme_location'] && is_page(200)  ) {
                $args['menu'] = 2;
        }// if the menu is the secondary menu && is page with ID 300
        if ( 'secondary' === $args['theme_location'] && is_page(300)  ) {
                $args['menu'] = 3;
        }// you can keep on adding conditional for more pages and more menus
        return $args;
    } );

    4. To add the CTA button, create a block element – hook, set hook to inside_secondary_navigation, location to entire site, and set the order of the button block to 10 so it sits at the end of the secondary nav.

    5. To add the different text on the left, you need to create multiple block element – hook, set the hook to inside_secondary_navigation as well, but location to different pages. And select the headline block, set margin-right to auto to push the menu and CTA button to the right.

    6. To stick the secondary nav, add this CSS:

    nav#secondary-navigation {
        position: sticky;
        top: 0;
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.