[Resolved] Slideout Navigation,. GeneratePress Premium Version: 2.3

[Nils]

Hello again,
I have a curiosity with the website navigation.
Depending on the zoom level, some menu items are not displayed correctly and sometimes even covered 🙁

The behavior is difficult to describe but can be found at https://biologika-register.de.

In addition, the drop-down arrow in the menu is often not displayed, or only displayed truncated.

Any ides?

Greetings from the brooding warm Berlin 🙂

[David]

Hi there,

i am not able to replicate that issue on any browser on Mac OSX. Do you notice the issue on a different browser? Do you have any extensions on the browser that may effect it?

[Nils]

Hi David,
I have only 2. Windows PCs available but Windows 7 & 10 with Chrome, Firefox and Internet Explorer show the same behavior.

The problem seems to arise during scaling or zooming (110% and above).
If you expand the menu item “Was ist Rabbit”, then set a zoomlevel of 110% and scroll down or up, you would have to get the same result.
For the purpose of testing, I had disabled all browser plugins and tried it on my notebook, unfortunately, no change.

Maybe Safari does it better, I’ll test it right away.
Nevertheless it has to work with the other browsers too ..

Like last time;
Unfortunately, my English is still not much better than the last time, so it is difficult for me to describe the problem 🙁

Thank you for your time!

[Nils]

I could set up a Hyper-V installation for you and give you TeamViewer logins, maybe that would be easier?

[Tom]

Definitely something strange going on with the arrows there. Can you temporarily remove any navigation-related custom CSS you’ve added to see if something is conflicting?

[Nils]

Done, you can find the page now under http://in-it-services.de/web
Unfortunately, the problem still exists without my adjustments.
The website I started last year with WP 4.9.x and now only after some time, so there were a lot of updates. Maybe a mistake has crept in here

[Tom]

Here’s what I was seeing previously: https://www.screencast.com/t/LlkewoUUi

Here’s what I’m seeing on the site you just linked to: https://www.screencast.com/t/yYeeb2Dkva

Are you seeing something different?

[Nils]

That’s right, you can find a language switcher on the top right.
The background of the menu is gone, the arrows are not indented, is that what you mean?
I have now deleted all my own CSS entries but no change with the menu Probelm (lower menu items are hidden when scrolling)

Most changes because of the menu we had discussed here in the forum;
https://generatepress.com/forums/topic/menu-decoration-and-position-of-mobile-navigation/page/1/

[Tom]

I thought the issue was the arrows were missing/half cut off?

If so, that doesn’t seem to be an issue without the custom CSS: https://www.screencast.com/t/HAdvOZsZq3

If we can confirm that, we know what we’re looking for.

[Nils]

The arrows are now displayed correctly. I will test tonight where the problem is. I think that has to do with the indented submenus.

The bigger problem is the lower menu items are be covered when;
1. I click on the arrow next to “What is RABBIT” to open the submenu.
2. Set a zoom of 110% or resize the window
3. and now scroll down/up.

I tried to show that on the first post with the picture but it was not that great ..

[Tom]

What if you add this CSS?:

#sticky-placeholder {
    opacity: 0;
}

[Nils]

no change to see

[Tom]

Where did you add the CSS? I’m not seeing it on your site.

[Nils]

You are on
https://in-it-services.de/web/
?

In the source text, line 503 – 505.

I have tested the arrows and somewhere must be a mistake here.
Here is a screencast without custom css;

Unfortunately, depending on the zoom or window movement, the arrows are not always displayed correctly

[Tom]

So that’s happening because there’s no space for the arrows, so they drop down.

You can try preventing this with this CSS:

.sidebar .menu-item-has-children .dropdown-menu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.sidebar #primary-menu ul li.menu-item-has-children>a {
    padding-right: 30px !important;
}

.sidebar .main-navigation .main-nav ul li a {
    line-height: normal;
    padding-top: 10px;
    padding-bottom: 10px;
}

[Author]

Posts