Help with aligning nav menu with the header

[conver2020]

I would like to align the end of menu bar of this site to the right hand side limit of its header , and would like to see it stay that way no matter how much I zoom in or zoom out the site. Please refer to the header and menu bar of this site as what I’m aiming for.

[Beverleyh]

Sounds like a job for flexbox and the justify-content property https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[stancevicbranko]

First of all, take off width of link inside li (you dont need to define it if you use flexbox), and as @Beverleyh said, put flexbox property with justify content alignment on menu container.

[Atelierbram]

@conver2020 Please take the advice from the good people above and use flexbox (and shy away from ugly old-school hacks like `display: table-cell): flexbox was made to solve the layout of these kind of 2-dimensional (ui-)patterns.

If you make a reduced test-case on Codepen we can help you with problems you may run in to. Personally I use flexbox-playgrounds like this one as an interactive visual tool to get to the right syntax for the thing at hand: it may help you too.

[conver2020]

@Atelierbram. I would like to create a test case on Codepen, but Codepan seems to have only HTML, CSS, and JS windows while I need to use some php codes to re-create my homepage there. I wonder how I can do it.

[Atelierbram]

One can paste (parts of the) HTML-output into Codepen like can be seen if you do a “view source”. The usual shortcut for view-source is CTRL-U while having focus in the webpage. Alternatively one can paste view-source:URL – here view-source:http://www.secularvoices.net/ in the browsers address-bar and hit Enter.

When you want to uncompress the minified HTML, search for a tool like “Uncompress HTML Code”: “uncompress html code” site: textfixer.com

[Author]

Posts