Archived topic

Menu decoration and position of mobile navigation

25 replies · Started by Nils on September 10, 2018

Viewing posts 1–15 of 26

September 10, 2018 at 2:21 am #673021

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

left menu

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 :)

September 10, 2018 at 4:58 am #673126

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/

September 11, 2018 at 7:11 am #674298

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

September 11, 2018 at 7:40 am #674320

Glad i could be of help :)

September 13, 2018 at 3:58 am #676143

Hi David,

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

September 13, 2018 at 6:40 am #676241

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

September 13, 2018 at 8:05 am #676432

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?

September 13, 2018 at 8:18 am #676445

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

September 13, 2018 at 8:28 am #676451

<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

September 13, 2018 at 8:43 am #676472

Can you activate the slideout on desktop as well please.

September 13, 2018 at 8:51 am #676490

Done, it works!
But why?

September 13, 2018 at 9:01 am #676496

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

September 13, 2018 at 9:27 am #676526

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?

September 13, 2018 at 9:52 am #676542

This CSS:

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

September 13, 2018 at 12:19 pm #676629

.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

This archived topic is closed to new replies.

Start building better websites today.