Archived topic
Limiting the width of all navigation items to 50%
3 replies · Started by tux on September 17, 2018
Hi!
I just managed to line up the first navigation item in my navigation bar (including a logo) to the left-hand side of my 50% main-site container (25% left sidebar, 50% main content, 25% right sidebar).
Is there any way to line up the last item in the navigation bar to the right-hand side of the main-site container by dynamically changing the spacing between the items? Maybe my calculations are wrong, but theoretically it should work by limiting the width of all menu items (logo not included) to 50%, as the alignment to the left-hand side is already done.
Thank you for the amazing work!
Greetings
Hi there,
So you're wanting the right side of your last menu item to align with the edge of the content?
Yes, exactly, but the items should be evenly distributed as they are now.
Maybe try something like this instead of what you have now:
.navigation-logo {
width: 25%;
}
.main-nav {
width: 50%;
display: inline-block;
}
.main-nav > ul {
display: flex;
justify-content: space-between;
}