The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Positioning menu/sections to be horizontal

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #201267

    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:

    Heres a quick image of what I am trying to achieve.

    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


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


    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? :(



    Looking at 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:

    <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>

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.