Sub Menu broken after Update

[rbnbm]

Re: Sub Menu Background

Hi Marius,

sorry for getting back at you with this old thing... after an update I did on a test-site, the points in the sub-menu arrange themselves horizontally (but should vertically).

In 2.9.6 everything is fine, so I am not sure where exactly the error occurs.

Here is the CSS again:

.primary .sub-menu {
display: none;
position: absolute;
background-color: white;
border: 0px solid grey;
padding: 10px 0px 10px 10px;
}
.primary .sub-menu li{
display: block;
}
.menu-item:hover .sub-menu{
display: block;
}

Thanks a lot!
Robin

[Richard]

Dear Robin @rbnbm

I know its a test-site but is it online so that i can have a better look? :)

Best
Richard

[rbnbm]

Hi Richard,

Thanks for the fast reply!
Here is the site:

https://www.stage.ah-fotografie.de/

Best
Robin

[Richard]

Dear Robin @rbnbm

Thanks :) Just to be sure in Appearance > menu is the menu-point arrangement set to vertical?

Best
Richard

[rbnbm]

Hello,

no, that is set to horizontal, since the main menu points are supposed appear like that. On vertical, the menu a) overlaps with the content and b) the lower main menu points are being concealed by the sub menu points.

As you may have guessed, this is the actual site: https://ah-fotografie.de/

It should look like that (although in a perfect world the sub menu points wouldn't be indented : )

Thanks!
Robin

[Richard]

Dear Robin @rbnbm

I think a 'white-space:nowrap ' was added to the navigation in the last update, this is what prevented your items from 'wrapping' one after the other.

If you could please add the following code within 'Lay Options -Custom CSS & HTML'

ul.sub-menu {
    white-space: break-spaces !important;
}

Hope this helps Robin and best wishes

Richard

[rbnbm]

Dear @Richard-K ,

Thanks! That almost did the trick – the lines break, but now the white background only appears at the beginning of menu point... I updated the link so you can see for yourself.

Thanks again!
Robin

[Richard]

Dear @rbnbm

Sorry for the delay!
I see you have it working? :)

Best wishes
Richard

[rbnbm]

Hi @Richard-K ,

no, unfortunately not. Please have a look at the screenshot above – that's not how it is supposed to be, there has to be a white background behind the sub-menu points all the way through, not only at the beginning of the lines.

Furthermore it is not possible to reach the links in the sub menu.
Here is the testing site again: https://www.stage.ah-fotografie.de/

On the main/actual site, there is still an older version of lay and wordpress installed.

Thanks
Robin

[Richard]

Dear Robin @rbnbm

I am using Chrome sorry and thought that it was fixed:

However i see on Safari it is not respecting the CSS: 'white-space' so i have learnt something :)

Using slightly different CSS seems to work for Safari:

ul.sub-menu {
    word-wrap: normal !important;
    white-space: pre-wrap !important;
}

Hope this helps Robin, let me know :)

Best wishes and have a wonderful day
Richard

[rbnbm]

Hi @Richard-K ,

Thanks!

Unfortunately in Firefox (v85, MacOS 10.15.7) the problem is still unsolved... I guess learning never stops? Hope that is a good thing.

Have a good day!
Best
Robin

Hi @Richard-K ,

Thanks!

Firefox v85, MacOS 10.15.7

[Richard]

Dear @rbnbm

Sorry for my delay - Yes always learning :)
Actually it had to do with the background areas width on Firefox?
So if you could please add

width: 50%;

To the 'sub-menu' CSS you already have & let me know!

Best wishes
Richard

[rbnbm]

Hey @Richard-K

that did the trick – yeehaw.

Great. Thanks a lot for your help and enjoy your day!
rbn

[Richard]

Dear @rbnbm

No worries, sorry i was late to get back to you on this one, Have a lovely day and best of luck with the rest of your project :)

Richard