[Support request] mobile navigation

[Femke]

Just tried to place everything back as it was before i started this ticket. But it doesnt work. I have pasted back the css and in the customizer i have changed back the settings of the mobile header. On my desktop on mobile view it looks the same again (exept the topbar nav) but on my mobile, nothing changed back.

Also, the top bar primary menu, i cant get it to disapear on mobile. I have disabled this in the customizer to hide on mobile but it still shows.

[David]

So if you want to put it back to the mobile header you need to reset the navigation breakpoint currently it looks to be set to zero hence its not showing the mobile header.

[Femke]

ha I did that but it didnt work. Now I increased it and it does work! 🙂

so now I still have the following unresolved:

– the navigation on 1 line on mobile (just like on desktop) by making the items smaller on mobile i think they should fit on 1 line.

– how to hide the top bar menu on mobile? and how to align it to the right on desktop?

[David]

This removes the top bar for mobile:

@media (max-width: 768px) {
.top-bar {
display: none;
}
}

It’s already aligned right on desktop(?)

Still confused – at the smallest of screens around 360px i am seeing the mobile header with logo and toggle. Slightly above that size i see the desktop nav and no logo?

[Femke]

– topbar > ok, the code works, thanks! on desktop alignment is good

– the mobile header I adjusted it myself but now reading your message I have clicked on the reset button and that sets it to a higher breakpoint so i guess that is sorted now.

– navigation on 1 line > do you know how to get it on 1 single line on mobile, just like on how it looks on desktop? I would like this to appear below my logo on mobile.

[David]

If you want a desktop type menu on mobile then you will need to disable the mobile header and then i can take a look at what needs to be done to fit it on one line

[Femke]

ok, i have disabled the mobile header and breakpoint.

[David]

So you need to remove or comment out this part of your CSS to get your logo back:

.inside-header .site-logo {
    display: none;
}

Then simply go to Customizer > Typography > Primary Navigation – select Mobile view and reduce the font size to get the menu to fit.

[Femke]

i tried this but the typography that i change, i can see it change in the customizer on mobile view but on my actual mobile, really nothing is changing. the sizes stay the same.. and my logo is not showing

[David]

Your logo is being served from a HTTP URL not HTTPs so chrome is probably blocking it. You need to either replace the URLs so they’re all HTTPS using Velvet Blues Update URL plugin or just upload new logos with different file names. But it is working.

Do you have any cache plugins on your server as those changes should reflect on the front end?

If not use this CSS:

@media (max-width: 768px) {
    .main-navigation a {
        font-size: 12px !important;
    }
}

[Femke]

it was all good with the ssl certificate but i might have changed something somewhere so now its not all https any more. I will have to figure this out first. and then try this again.

[David]

Ok!

[Femke]

no luck so far. Now i cant even acces my wordpress dashboard anymore. Too many url loops. I tried to change the url http to https in the appearence>general settings. Guess something went very wrong. Any idea what I should do?

[David]

You tried restoring a backup?

[Author]

Posts