Justified horizontal nav fixed to the bottom of a div

[FcknDrrn]

Hey guys, so I have a div thats 100% width and black with opacity .8 at the top of the page to hold the nav. Inside that I have another div thats transparent with width set to 66% and margin: 0 auto. I want 2 rows of horizontal navigation inside that transparent div. The top one is easy, nothing particular just starts from the right, is smaller than the main nav bellow it, and can just have some padding added to the right of each list item.

Im having a really hard time with the bottom nav though. Im using justify-text because I need to have the first and last items in the nav flush with the left and right borders of the transparent div and then have the middle items spaced evenly. The problems I have been coming across with using justify-text, just using evenly spaced width, or using flex box and justify content, is that I cant then use absolute positioning to bolt that main bottom nav flush to the bottom of that main, 100% width nav bar. When I set position relative for the transparent div, and position: absolute + bottom: 0 on the ul I lost the justified spacing.

Thats what I need it to look like eventually

Any help with this confusion would be great, thanks

[AllanP]

@FcknDrrn

Any help with this confusion would be great,

Can you please give us a link to the site so we can see what is going on?

[FcknDrrn]

Sorry, I keep redoing it, I’ll try and get a jsfiddle or codepen together but I dont have it right now. I guess my question would be, how would you go about have two rows of horizontal nav links with the bottom one having the links justified and evenly spaced out across the the full width of its containing div and flush, attached to the bottom of the black bar like it is in that screen shot of a psd

[ronpat]

Darren,

Normally, the last line in a paragraph of justified text is not justified. The “trick” to justifying the last line of text (or the last row of menu items) is to make sure it is not the last line or row.

Give @dresden_phoenix’s brilliant “Another Trick” a read. Pehaps you can apply this technique to your menu items.

Help setting up masthead - #5 by dresden_phoenix