Top menu links order problem (and difference between "mobile" and "non-mobile")

[chrisave]

Hello, I hope you are doing well! I've just found vital today. I'm only going to mention what I've noticed concerning the menu. I like the fact that the ("mobile") menu works without javascript.

For https://vitalcss.com/, http://vitalcss.s3-website-us-east-1.amazonaws.com/ and https://engineering.doximity.com/ the top menu links are reverted (relative to the order in the source code). The "mobile" menu is in the same order. But I guess that the wanted (display) order is the same as the "non-mobile" menu one. For https://vitalcss.com/ and http://vitalcss.s3-website-us-east-1.amazonaws.com/ at least, in Chrome/Chromium Developer Tools, be it for the "non-mobile" menu and/or the "mobile" one, I see several float overrides (vital css and demo css).

To have the same order, why not remove the lines:

• float: right; from .header nav ul li (demo css)
• float: right; from .menu li (vital css)
• float: none; from @media screen and (max-width: 860px) .menu * (vital css) and add float: right; to .menu with a media query starting at 861px

Then the menu links can be put in the right order in the source code/back-end.

Doesn't it solve the issue (and without the first h1 tag having display problems)?

Have a nice weekend!

[bodytaing]

Hi @chrisave thanks for the suggestion. I will work on adding something of that nature!