0

im building a personal portfolio for school projects. and i ran in to a problem. i want to make my desktop menu fixed, but when i do it my menu stacks vertical instead for horizontal.

my test page: http://bravitus.com/www/test/test.html i want to make my menu as it is but fixed instead of relative.

when i place it as fixed it makes the many like this:

Home About me Contact

but i want it to go like this:

Home > About me > Contact

JSFiddle: http://jsfiddle.net/39fz0gsd/4/

Hope you have a fix ;)

HTML: 

<ul class="navigation">
    <li><a href="#page-1" class="home selected">HOME</a></li>
    <li><a href="#page-2" class="aboutMe">ABOUT ME</a></li>
    <li><a href="#page-3" class="services">CONTACT</a></li>
</ul>

CSS: 

ul{
    list-style:none;
}

ul li{
    position:relative;
}
w3shivers
  • 390
  • 4
  • 18
Thomas Ravnholt
  • 13
  • 6
  • include your actual tried code , not the website name. Read it to know https://stackoverflow.com/help/how-to-ask – HaveNoDisplayName Nov 25 '14 at 13:59
  • 1
    @Piyush there is already a jsfiddle, doesn't it? – DRC Nov 25 '14 at 14:00
  • include your code in your question, jsfiddle is an external link, if it removed, then this question become invalid, got it? – HaveNoDisplayName Nov 25 '14 at 14:01
  • Doesn't the JSFiddle work ? :) – Thomas Ravnholt Nov 25 '14 at 14:04
  • Please do add your code for better referencing. – w3shivers Nov 25 '14 at 14:06
  • 1
    well last time i posted code here i was told to put it in JSfiddle when there was more than just a couple of lines ;) – Thomas Ravnholt Nov 25 '14 at 14:10
  • @ThomasRavnholt I believe the point here is that you put your code on jsfiddle.net website. Now if jsfiddle.net was to go down, no one will ever be able to see what the problem was with your code. The idea of putting your code on stackoverflow is so that this dependency on the third party website no longer exists. There's the pro's now if stackoverflow goes down atleast ur jsfiddle is there :p. It's chicken and egg scenario. So becuase of this they ask you to do both. – Anicho Nov 25 '14 at 14:10
  • Oh yeah, i see what you mean ;) – Thomas Ravnholt Nov 25 '14 at 14:13

2 Answers2

0

You have to add the position fixed to the ul (not the li) and add width:100% as well. 

ul{
    list-style:none;
    position:fixed;
    width:100%;
}

Have a look at your fiddle I've updated it.

w3shivers
  • 390
  • 4
  • 18
0

If I understood your question you could simply append this rule

header {
    width: 100%;
    position: fixed;
}

to make the header fixed on top.

DRC
  • 4,898
  • 2
  • 21
  • 35