[Resolved] Mobile Menu

[Tom]

Sorry about that, slipped past me.

For the first issue, try replacing 769px with 768px.

As for the other issue, I’ll need to see it to know what you mean.

[Garth Dryland]

No problem

Yeah I’m 99% sure I tried that a while ago. Result was an additional menu issue. Can’t recall specifics at the moment. I dont presently have access to my computer though I did change the size from 768 to 769px which was a dramatic improvement from memory.

It’s the same staging site so you may still have frontend details.

Garth

[Tom]

I’d need to see what’s happening figure out what’s going on. I’ll try to find some time in the next day or so to set it up on my local environment.

[Garth Dryland]

Okay,

If you need backend access I can send you administrator credentials if that helps. You should have the frontend details.

Garth

[Garth Dryland]

Hey Tom

I’m currently building a Woo Commerce site.
Both menus are doing weird things, even with zero custom CSS.

While not the same, the primary menu has a similar behavioral issue by the looks whereby it appears to moves up 10px or thereabouts. The secondary menu has an issue whereby it goes full page between 1024 or 1025 and 769 or 768px.

Have you had a chance to look into this and or do you any suggestions what’s happening on this new site ?

Cheers

[Tom]

Is this happening to you on the demo?: http://demo.generatepress.com/

I couldn’t get it to reproduce.

The original issue was caused by the mixture of min-width and max-width media queries.

The menus don’t have any min-width media queries.

[Garth Dryland]

Ahh I see what you mean.

I cant confirm whether its completely sorted though because the following CSS appears to have stopped working which seems a bit odd. I cant seem to work out why I can no longer centralise the menu items with the logo. So my menu items are now sitting back where they were off set from the center of the header as they were before introducing this css. The bottom px settings moves the mobile menu down whereas the top one doesn’t move the primary menu items at all inside-header as it did previously.

/*
Used to horizontally centralise the navigation menu with site logo
*/
@media (max-width: 768px) {
	.main-navigation:not(.is_stuck) {
		margin-top: 10px;
	}
	
	.main-navigation:not(.navigation-clone) {
		margin-top: 0;
	}
}

Any suggestions

Cheers

[Tom]

I’m not too sure what you mean? That CSS won’t centralize anything, it will add 10px of spacing on top of the main navigation only on mobile when not sticky and the effect is set to none.

If the effect is set to fade or slide (.navigation-clone), it will add 0px on top (which won’t change anything).

[Garth Dryland]

Must have been late when i wrote that. I see why it stopped working though.

I also see why you’re confused re centralizing however given my menu heights etc etc it does centralize my menu-item inside-header horizontally despite having nothing in it for centralizing anything.

Also given the issue I have is on the high side of 768 setting @media with max-width of 768 defeats the purpose of the css given it must work above 768 so somethings clearly wrong. Cant work it out but still trying.

Best outcome with css I’ve had so far is what I had originally which i started this topic to try and improve.

Garth

[Garth Dryland]

Having said that, it does work at certain browser percentages on certain browsers just not on all the same, so its potentially more than just the css itself.

The way your test site is set up the issue I have will never occur. On your site the header padding is horizontally centering the menu and header image and the menu heights are consistent between the main menu and the sticky menu where as mine aren’t and why I need to add the 10px margin which at certain browser percentages appears to vanish causing the menu to move up 10px.

Garth

[Damon]

Hey Garth. You wrote “!important before the px” which is wrong it goes after px but before the semi-colon.
For example:

.mycss {width: 100px !important;}

[Garth Dryland]

Thanks for pointing out.
If only it solved my issue.

Cheers

[Garth Dryland]

Hey Tom

I’ve continued trying a number of other things but the issue I have continues depending on browser and browser percentages no matter what I do so its possible its not entirely my CSS

Still tying to find solution but running out of ideas so might put site online so others may see whats going on.

I however just went and had a look at your demo site again to test one of the issues I previous overlooked and its also doing it.

When you have the sticky menu showing and minimise the viewport to 768 or 769px the menu shoots from the right to left before transitioning into the mobile-header

It happens using various browsers and percentages. Edge, Firefox and Chrome Try 100% and 125%. Both recreate issue depending on browser used.

Plus the other issue I have also isn’t consistent across browsers and or browser percentages indicating its potentially not my sites CSS either.

Check it out

[Tom]

Yep, that was due to using min-width: 769px.

Have it tweaked for the next update.

[Garth Dryland]

Hummm okay

I also been looking at another menu issue for some time. It happens while both the mobile or sticky menus are present. The problem only seems to occur when using the MS Edge browser.

I have attached a screencast using your demo site.

Cheers

[Author]

Posts