menus - Second nav is merged with the first in mobile

admin管理员组

文章数量:1277374

When I load the website () on mobile one can see the two menus/navigations that exist

However, when it loads, the two navs are merged and the second menu buttons can only be found in the burguer menu on top.

The primary nav looks fine on the burguer menu, however, it would be helpful to see the second menu as it appears before the merge (as seen in the first image). How do I do that?

---

Information that may help:

When checking the code in the console, I can see that the id genesis-nav-secondary and class nav-secondary genesis-responsive-menu has the style "display: none". But if I make it visible, it still doesn't solve the issue, as the menu items were moved to the genesis-nav-primary (as one can see in the image bellow). Note that even the class in a line that was moved, such as the one with the blue color, has "moved-item-nav-secondary".

This is how the section for the second nav looks like

As one can see from the image, it is hidden ("style="display: none;" and we see from the grey color).

If, in the HTML, in the browser console, one removes the style="display: none;" and adds the following in the Additional CSS

nav#genesis-nav-secondary.nav-secondary.genesis-responsive-menu{
display: inline;
}

or

nav#genesis-nav-secondary.nav-secondary.genesis-responsive-menu{
display: unset;
}

One can see that there's a new line that appears. This seems to define the bottom line from the second nav section.

When I load the website (https://notes.goncaloperes) on mobile one can see the two menus/navigations that exist

However, when it loads, the two navs are merged and the second menu buttons can only be found in the burguer menu on top.

The primary nav looks fine on the burguer menu, however, it would be helpful to see the second menu as it appears before the merge (as seen in the first image). How do I do that?

---

Information that may help:

When checking the code in the console, I can see that the id genesis-nav-secondary and class nav-secondary genesis-responsive-menu has the style "display: none". But if I make it visible, it still doesn't solve the issue, as the menu items were moved to the genesis-nav-primary (as one can see in the image bellow). Note that even the class in a line that was moved, such as the one with the blue color, has "moved-item-nav-secondary".

This is how the section for the second nav looks like

As one can see from the image, it is hidden ("style="display: none;" and we see from the grey color).

If, in the HTML, in the browser console, one removes the style="display: none;" and adds the following in the Additional CSS

nav#genesis-nav-secondary.nav-secondary.genesis-responsive-menu{
display: inline;
}

or

nav#genesis-nav-secondary.nav-secondary.genesis-responsive-menu{
display: unset;
}

One can see that there's a new line that appears. This seems to define the bottom line from the second nav section.

• menus
• navigation
• mobile
• genesis-theme-framework
• merging

Share Improve this question asked Feb 23, 2021 at 0:09 Gonçalo PeresGonçalo Peres 11711 gold badge11 silver badge1111 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In functions.php, change the function magazine_responsive_menu_settings() to the following:

function magazine_responsive_menu_settings() {

    $settings = [
        'mainMenu'    => __( 'Menu', 'magazine-pro' ),
        'subMenu'     => __( 'Submenu', 'magazine-pro' ),
        'menuClasses' => [
            'combine' => [
                '.nav-primary',
                '.nav-header',
            ],
        ],
    ];

    return $settings;

}

Basically, in the combine, I removed '.nav-secondary',

This is how it looks like now

本文标签： menusSecond nav is merged with the first in mobile