- This topic has 9 replies, 3 voices, and was last updated 4 months, 3 weeks ago by
Elvin.
-
AuthorPosts
-
October 6, 2020 at 8:27 pm #1475644
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
October 7, 2020 at 2:26 am #1476046David
StaffCustomer SupportHi 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/October 7, 2020 at 12:06 pm #1477236Anthany
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
October 7, 2020 at 3:00 pm #1477482Elvin
StaffCustomer SupportYou 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?"October 7, 2020 at 3:13 pm #1477494Anthany
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
October 7, 2020 at 3:29 pm #1477508Elvin
StaffCustomer Support…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 oforder
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?"October 7, 2020 at 3:53 pm #1477527Anthany
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
October 7, 2020 at 3:58 pm #1477529Elvin
StaffCustomer SupportOh 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?"October 7, 2020 at 4:12 pm #1477541Anthany
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
October 7, 2020 at 4:48 pm #1477565Elvin
StaffCustomer SupportJust 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?" -
AuthorPosts
- You must be logged in to reply to this topic.