[Resolved] Move secondary navigation to other locations

[Tom]

Hmm, I tested this on my localhost and had it working with the above CSS.

Any chance you’ll be throwing that site onto a live server soon so I can see?

[Paul]

Here is the CSS I’m using:

.secondary-navigation {
        display: none;
}
#generate-section-2 .secondary-navigation {
        display: block !important;
}
.site-main .inside-navigation {
    margin: 0;
    overflow: visible;
}

The PHP (in functions.php in my child theme folder):

 function generate_secondary_navigation_shortcode() {
      return generate_secondary_navigation_position();
}
add_shortcode( 'generate_secondary_navigation', 'generate_secondary_navigation_shortcode' );

And I pasted this short code into Section #2 on the home page:

[generate_secondary_navigation]

[Tom]

Try adjusting this part of the CSS to this:

.site-main .inside-navigation,
.site-main .secondary-navigation {
    margin: 0;
    overflow: visible;
}

[Paul]

Nope. The menu mobilizes, but still isn’t dropping down to show sub-pages.

It is confounding.

[Tom]

Wait, are we talking about the dropdown menu on desktop, or on mobile?

[Paul]

I’m talking about the menu when the site is being viewed on a mobile device.

FWIW, I am using the Responsive Design View tool on Firefox. Normally, all menus mobilize properly when looking at the site using this tool. It is only when I view this particular menu (secondary menu embedded into a page section using the shortcode you suggested in this thread) that the drop-down of sub-pages doesn’t appear within the section (section #2 on the home page) I embedded it in, otherwise, all the rest of the menus work fine while the site is being viewed on mobile.

[John]

This is why I love GP so much!!!! You guys are all so great!

And thanks for the added step-by-step Paul, you’re awesome!

[Author]

Posts