[Resolved] Normal mobile menu

[sjoerd89]

Hi there,

i have always used an mobile menu plugin because my desktop menu is a bit special and when i make this small for a mobile it looks horrible. Is there a way to use a regular unedited menu for mobile and keep my edited version for desktop?

[sjoerd89]

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

[David]

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.

[sjoerd89]

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

[David]

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.

[sjoerd89]

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?

[David]

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.

[sjoerd89]

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

[David]

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.

[sjoerd89]

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

[David]

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.

[sjoerd89]

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?

[David]

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

[sjoerd89]

thanks for all the help !

[David]

Glad we got somewhere in the end 🙂

[Author]

Posts