When I load the website (https://notes.goncaloperes.com) 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.