-
Hello,
I just published my staging site to live, and my navigation items on the top are unaligned vertically. I can’t seem to find what causes this issue. I contacted my host provider Cloudways about it and they said this
“I was able to find the issue as this seems to be a styling issue. I changed the style only on my end via chrome devtools and you can see the navigation system seems good here. Seems like an issue in the code.”
Any help is appreciated!
Thank you!
-
Hi there,
You have the CSS which sets different margins for list items, including the navigation menu items.
ul li:last-child { margin-bottom: 48px; } ul li + li { margin-top: 24px; } ul li { margin-top: 48px; margin-bottom: 24px; }What is your purpose for the CSS?
-
Hello Ying.
Thank you for the reply.
I have this CSS to increase the spacing between bullet lists and numbered lists.
-
In that case, your CSS should be more specific. Try changing it to this:
.site ul li:last-child { margin-bottom: 48px; } .site ul li + li { margin-top: 24px; } .site ul li { margin-top: 48px; margin-bottom: 24px; } -
Thank you Ying! This solved the issue I had!
I appreciate the detailed help!
Have a great day! 🙂
-
No Problem 🙂
- You must be logged in to reply to this topic.