Having trouble centering nav bar with content on right/ nav bar shifts depending on text length
I've created a demo here: https://4c6584fa.portfolio-8nc.pages.dev/
At the very top I am having trouble figuring out how to center the nav bar (Work / About). The nav bar does not have a defined width nor do the external links on the right.
I am also having issues with the nav bar on the bottom, it's currently set to the center of the screen but whenever the content becomes too long on one side, it shifts and no longer centers. This nav bar also does not have a defined width which causes the animation of the hover effect to change the parent div. However, the solution to the weird hover effect changing its container size is to set a defined width. Unfortunately, because the nav bar is based on the content, I am unsure if setting a predetermined width is the right move. Thank you in advance!
9 Replies
The nav.header-nav has margin: 0 auto - change to 0.
Then add "justify-content: center;" t the div.header-wrapper.
...and play around with the borders etc. Fixed width is to be avoided.
Not sure what exactly you mean with the botom thing.
So for the top nav, I've tried your suggestion but I was unable to keep div.external to the very right of the container. I've tried a combination of margin-left:auto on div.external and align-items:center but couldn't get the nav bar to stick to the center. For the bottom bar if you change the text to be the same for both the left and right, the bar is centered, but when one side of the text becomes longer, it shifts the entire container
I want the bottom bar to always be centered regardless of the content and I think i just came up with a solution but I'm not sure if it works yet (text-align:right on left container and text-align:left on right container)
It is centered (as block), is it not? You have two children inside with padding.
it is centered, but I want the center to always be betweenn the left and right arrow
Then you probably need parent 100vw wide ... with 2 divs, each of them 50%, one right-ligned, the other left-aligned.
but i don't want the parent to have 100vw
Meant 100% width, however you do it. If you do not have a full-width parent, you have no page center and thus cannot align the children left and right of it. The parent is fixed, anyway, so make it full width.