Positioning menu/sections to be horizontal

[markieblitz]

Hi guys! (First post yay!)

I am trying to get my menu/sections to be horizontal instead of vertical. The website I am working on is: http://www.sarahmdoonan.com

Heres a quick image of what I am trying to achieve. http://i61.tinypic.com/240zoeb.png

I’ve tried aligning or fixing positions but nothing I seem to do works. I may just lack experience. :( If some one can point me in the right direction I would appreciate it very much. If there is any other information I need to provide please let me know.

Also, Im sorry I don’t know how to post the code pen. :(
Second edit: Sorry, I posted the git hub and it made the page far too long.

Edit2: css

http://codepen.io/markieblitz/pen/doPrWK.css

[Paulie_D]

Just post the HTML and CSS into Codepen, just the relevant parts and then share the link.

[markieblitz]

Hmm, I have tried adding the display:inline block and float left. I hope I am editing the correct line. The issue should be with the #menu il li.section-title. Maybe I am looking in the wrong area? :(

[timbarden]

Hi,

Looking at http://www.sarahmdoonan.com/ if you add display: inline-block to your four <ul>s that’ll give you the desired result, but really you shouldn’t have each list item in its own <ul>.

Should just be something like this, with display: inline-block added to the lis:

<ul>
<li><a href="/see/">See</a></li>
<li><a href="/know/">Know</a></li>
<li><a href="/experience/">Experience</a></li>
<li><a href="/live/">Live</a></li>
</ul>

[Author]

Posts