0

I've been trying some diffrent tutorials on how to get my navbar stick to the top while scrolling but can't get it to work :/

This is the page i'm having troubles with: http://www.vernietig.be/vcs/index.html

Thanks in advance for helping me out on this one!

mijncore
  • 5
  • 3
  • A tip: Make a special rule using [media queries](http://stackoverflow.com/q/6370690/453331) for smaller viewports (e.g. mobile devices), so the menu isn't sticky there. It's a huge annoyance trying to read something on a small phone screen where half of the website is the menu. – kba Jul 25 '14 at 03:30

3 Answers3

0

This will stick your navigation on top : 

 #yourTopNav{
    top : 0;
    position : fixed;
    }
bumbumpaw
  • 2,522
  • 1
  • 24
  • 54
  • tried to add those 2 rules but when added to: .nav-collapse, .nav-collapse * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } OR .nav-collapse, .nav-collapse ul { list-style: none; width: 100%; float: left; } Nav dissapears... When I try to add it to a new .nav-collapse {} nothing changes.... – mijncore Jul 25 '14 at 02:48
0

Add this to your css:

body { margin-top: 55px; }
nav { position: fixed; clip: auto; }

I don't know why you have that clip: rect(0,0,0,0) but that hides the whole menu, you may even have to inline that directive, or remove the .nav-collapse class that causes it (but I don't really know how is your menu supposed to work :P).

Jaime Gómez
  • 6,961
  • 3
  • 40
  • 41
  • added those 2 rules in the head to be sure it gets loaded last but doesn't work... – mijncore Jul 25 '14 at 03:15
  • Oh that's because of rule specificity, for example, if you assign an `id` to your `nav`, and change the second line to `#nav_id { position: fixed; clip: auto; }` it'll be the last rule applied. – Jaime Gómez Jul 25 '14 at 03:27
0

Try this:

#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
Edward
  • 1,914
  • 13
  • 26