[Resolved] Menu decoration and position of mobile navigation

[Nils]

Hello,
the navigation menu on the left side still gives me difficulties.
In this thread I got from Tom tips for the menu

.main-navigation .main-nav ul li[class*="current-menu-"] > .sub-menu {
    position: relative;
    left: 0;
    visibility: visible;
    opacity: 1;
    height: auto;
    pointer-events: auto;
    box-shadow: 0 0 0;
}

Now I have created a second menu and here as a separator, a double line used.
border-top: 3px double #ddd;
border-bottom: 3px double #ddd;
However, this one goes the lines are displayed differently than expected

Another question would be how could I get the mobile menu in the Topbar.
In something like this picture would be great

Thx a lot 🙂

[David]

Hi there,

in this CSS:

.menu-2-unteres-menue-links-container li, .menu-item-348 li, .menu-2-unteres-menue-links-container a, .menu-2-unteres-menue-links-container a:hover, .menu-2-menue-links-englisch-container li, .menu-2-menue-links-englisch-container a, .menu-2-menue-links-englisch-container a:hover {
    font-weight: normal !important;
    font-size: 20px;
    color: #4788c5;
    line-height: 35px;
    border-top: 3px double #ddd;
    border-bottom: 3px double #ddd;
}

You are applying those properties to both the li and the a which is doubling the double border.

This topic here explains how you can add a slideout navigation toggle:

https://generatepress.com/forums/topic/trigger-slideout-menu-with-secondary-button/

[Nils]

urgs.. shame on me..

This topic here explains how you can add a slideout navigation toggle:

https://generatepress.com/forums/topic/trigger-slideout-menu-with-secondary-button/

Thanks, I will try it tonight.

Many greetings

[David]

Glad i could be of help 🙂

[Nils]

Hi David,

i have the 2nd button but a click on it the navigation menu does not open.

[David]

Have you disabled the Slideout Navigation? If so re-activate it and see if it works, we can then remove one of them.

[Nils]

the slideout-navigation is active and works great with the original button.
i used a widget to insert the code, is that correct or is there a trick?

[David]

Hmm works for me. I notice there is no: <!-- comment --> in the a Tag. Can you add that as per the original code.

[Nils]

<span class="slideout-toggle"><a><!-- comment --></a>
</span>

I have made. unfortunately no changes

[edit]

<span class="slideout-toggle"><a><!-- slideout toggle --></a>
</span>

is the same

[David]

Can you activate the slideout on desktop as well please.

[Nils]

Done, it works!
But why?

[David]

Mobile menu uses a different script to call the slideout menu. So this method only works if it is activated on desktop.

[Nils]

hmm. the mouse pointer does not change on mouse-over 🙁
is there any way to give the 1. (original) button its own class?
or easier, how can I hide the first button?

[David]

This CSS:

.slideout-toggle a {
    cursor: pointer;
}
.main-navigation .inside-navigation .menu .slideout-toggle {
    display: none !important;
}

[Nils]

.slideout-toggle a {
    cursor: pointer;
}

Sorry, I am very out of practice.
The child is pubescent, the woman is pregnant, the cat runs over my laptop and I have no more coffee ..
When I switch to the mobile view, the first button is displayed again

[Author]

Posts