Mobile Menu Primary Navigation Format Issue

[Anthany]

Hi GeneratePress team, I have a question regarding the primary navigation menu on the mobile version of my site (www.scuffed.ca). I have my primary navigation exactly how I like it on the desktop version of my website by adding the CSS “menu-item-float-right” to my “account” and “seller registration” pages, with the seller registration being the farthest to the right on the navigation menu. However, on the mobile version of my site the seller registration floats above the account page in the menu, something that can only be changed by switching the places of the two pages on my desktop menu which I don’t want. On top of that I would like if both these options could be on the left side of the mobile menu bar along with every other menu option instead of on the right. Any help you can give regarding this topic would be greatly appreciated.

Thanks, Anthany

[David]

Hi there,

can you share a link to where i can see the issue?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anthany]

Hi David, yes of course, from this link https://www.scuffed.ca/ (my website homepage although the primary navigation will show on any page) when viewed on a mobile device you will see the primary navigation menu and when clicked it creates a dropdown for page and category options (Home, Hype, General, etc.). At the bottom of all these options are the “seller registration” and “account” options and as you will see they are right-aligned and the “account option is below the “seller registration” option and this is where my problem lies.

Thanks, Anthany

[Elvin]

You have cached CSS saved by your siteground optimizer that causes this.

I’ve checked through your CSS and found a use of float: right !important; on .menu-item-float-right w/o any media queries. This causes “seller-registration” and “account” to align right.

You can try adding this CSS code. Make sure to purge your cache on Siteground optimizer.

@media (max-width:768px){
.main-navigation.toggled .sf-menu>li.menu-item-float-right {
    float: left !important;
    display: block;
}
}

A wise man once said:
"Have you cleared your cache?"

[Anthany]

Thank you so much Elvin that did the trick and left-aligned them. Now my final question is, do you have any idea how I could have the “account” option to be above the “seller registration” option on the mobile menu whilst keeping the “seller registration” option to stay where it is on my desktop menu? (It is on the right side of the account option on my desktop menu and I would like it to stay there).

Thanks so much, Anthany

[Elvin]

…do you have any idea how I could have the “account” option to be above the “seller registration” option on the mobile menu whilst keeping the “seller registration” option to stay where it is on my desktop menu?..

You may want to consider using flexbox on Dashboard > Appearance > General and rework your CSS codes(remove your floats, adopt flexbox properties) to make use of order property. It’s better to do that in the long run.

Or if that’s too tedious, you can just keep the unused floats on mobile and do this.

@media (max-width:768px){
.main-nav > ul.menu {
    display: flex !important;
    flex-direction: column;
}
li.menu-item:nth-child(6) {
    order: 7;
}
}

A wise man once said:
"Have you cleared your cache?"

[Anthany]

Thank you very much Elvin, that put them in the correct order though now the mobile menu is always open and does not close, any idea why? I will absolutely look into flexbox and how to rework my CSS code thank you for the advice.

Cheers, Anthany

[Elvin]

Oh yeah my bad. Try this instead?

@media (max-width:768px){
.main-navigation.toggled .sf-menu {
    display: flex;
    flex-direction: column;
}
li.menu-item:nth-child(6) {
    order: 7;
}
}

A wise man once said:
"Have you cleared your cache?"

[Anthany]

Just had to change .sf-menu to ul.menu and it worked like a charm, thank you so much for all your help and advice Elvin.

Cheers, Anthany

[Elvin]

Just had to change .sf-menu to ul.menu and it worked like a charm, thank you so much for all your help and advice Elvin.

Good catch. No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts