Normal mobile menu

Sidenote: any clue what happened to this page? https://www.zilvertron.com/versterkers/
It should look about the same as this one https://www.zilvertron.com/motoren/ (without the top images) but somehow the lay-out got all messed up

Hi there,

I am not sure fully what you mean but you can use the GP Slideout navigation.

https://docs.generatepress.com/collection/slide-out-navigation/

the issue looks like a caching problem. try flushing your cache. if it persists flush and disable the cache to confirm that is the problem.

Well if i use slideout navigation (wich i do now) it will keep the look of the desktop navigation. I would like to have it just a standard mobile navigation look and only use the special navigation on desktop.

Deleted cache from autoptimize and the page is still showing this weird lay-out

You could wrap the CSS you are using on your primary nav within a media query so it only applies to desktop e.g

@media (min-width: 768px) {
/* Styles here */
}

The content on the correct page has ID's on the element containers. Which is being used to apply the CSS. These are missing from the broken page.

Somehow i broke the website now ... i changed everything back to normal like i had it. But now the website is not responsive on mobile anymore. Tablet size still works but mobile size breaks the responsive somehow.
Any idea what is going wrong?

Doesn't look like you're not using the GP Mobile Header - can you disable the sticky nav on Mobile first as this is having a fit on Mobile. then i can take a look.

Sorry i do not really know what you mean at the moment

-edit- i stopped the mobile navigation plugin for a bit to show you what is going wrong

Can you go to Customizer > Layout > Sticky Navigation and set this to Desktop Only.
Then can you clear and disable the autoptimize cache so i can see where the CSS is going wrong.

Hmmm i found out that when disabling autoptimize the problems do not occur
-edit- when i have autoptimize on but disable the css function the website works fine

Yeah Autoptimize can play havoc when there is a lot of custom CSS.
How is the CSS added? If its in the Additional CSS then you can uncheck the Also Aggregate Inline CSS or if its in a style sheet you can add that files URL to the Exclude field in autoptimize.

i just emptied my style.css and placed it all in the simple css plugin.
If i uncheck the aggregate option now the css on all pages looks fine. Now i still want to use the normal mobile navigation but without the css of desktop navigation.

@media (min-width: 768px) {
.main-navigation .main-nav > ul > li.menu-item-has-children>a, 
.secondary-navigation .main-nav > ul > li.menu-item-has-children>a {
    background-color: #14377d;
    padding-right: 0px;
    padding-left: 10px;
    border-right: solid #2d71ba;
    clip-path: polygon(100% 0, 100% 65%, 85% 100%, 0 100%, 0 0);
	width: 134px;
	line-height: 25px;
	text-align: left;
}
nav.main-navigation .main-nav > ul > li >a {
    background-color: #14377d;
    padding-right: 0;
    padding-left: 10px;
    border-right: solid #2d71ba;
    clip-path: polygon(100% 0,100% 65%,85% 100%,0 100%,0 0);
    width: 134px;
    line-height: 25px;
    text-align: left;
}
.main-navigation ul ul {
    width: 100%;
	text-align: left;
}}

then the above code should look like that?

Looks good that code should now only apply to the larger devices.

thanks for all the help !

Glad we got somewhere in the end :)