- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Having trouble with this horizontal nav. Can’t get the elements to be the same hight with all text horizontally centered because the heading (MYSITE NAME) is much larger font than the others.
How would I fix this?
Tried using padding on the elements to push them down but it just becomes a mess.
My last attempt was to put the <h1> element int he same div as the navigation element.
Here is the code pen:
http://codepen.io/acekicker77/pen/eNJpeN
Been messing with this all week and getting nowhere fast.
Vertical alignment is usually the province of inline-block
or table-cell
…otherwise you’re going to have magic numbers when using floats.
Using a combination of both rather than floats it’s little easier.
You will need media queries at some point though.
Review the below at full screen size.
Also, maybe try increasing the line-height of #socNav a
Also, maybe try increasing the line-height of #socNav a
One possibility but it relies on so-called magic numbers whereas vertical alignment works “out of the box” with table-cells / inline-block elements.
Yes, I agree, but I think we may have been focussing on different things – I was thinking about those left and right hairline borders, in case they needed to extend to full height too. Ha! I probably should have included my thought process in my post ;)
Ok Paulie_D and Beverleyh, both of those suggestions helped to solve the problem.
I’ve also succeeded in getting all the elements to be the same height by using line-height and moving the <h1> element out of the div (#burgerNav).
http://codepen.io/acekicker77/pen/GJopbw
Thanks again