Sticky header bij scroll
Mijn menu staat nu bovenaan mijn pagina en bij het scrollen blijft die daar ook, dit is goed.
Ik wil alleen dat het menu onder mijn slider komt te staan en als ik dan ga scrollen moet het menu bovenin blijven staan, maar als ik de class: "fixed" weghaal dan blijft die niet staan tijdens het scrollen.
De website is hier te vinden: website link
Hoe los ik dit op?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- Top Nav -->
<header id="topNav" class="fixed">
<div class="container">
<!-- Logo -->
<a class="logo onepage" href="index.html">
<img src="assets/images/logo.png" height="50" alt="" />
</a>
<!-- Mobile Menu Button -->
<button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
<i class="fa fa-bars"></i>
</button>
<!-- Top Nav -->
<div class="navbar-collapse nav-main-collapse collapse pull-right">
<nav class="nav-main">
<ul id="topMain" class="nav nav-pills nav-main">
<li class="dropdown">
<a class="scrollTo dropdown-toggle" href="#wrapper">
HOME <span>welcome</span>
</a>
<ul class="dropdown-menu">
<li><a href="index.html"><i class="fa fa-reply"></i> Default Home</a></li>
<li><a class="scrollTo" href="#wrapper"><i class="fa fa-home"></i> Onepage Home</a></li>
</ul>
</li>
<li><a class="scrollTo" href="#about">ABOUT <span>about us</span></a></li>
<li><a class="scrollTo" href="#work">PORTFOLIO <span>our work</span></a></li>
<li><a class="scrollTo" href="#services">SERVICES <span>our offer</span></a></li>
<li><a class="scrollTo" href="#contact">CONTACT <span>write us</span></a></li>
</ul>
</nav>
</div>
<!-- /Top Nav -->
</div><!-- /.container -->
</header>
<!-- /Top Nav -->
<header id="topNav" class="fixed">
<div class="container">
<!-- Logo -->
<a class="logo onepage" href="index.html">
<img src="assets/images/logo.png" height="50" alt="" />
</a>
<!-- Mobile Menu Button -->
<button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
<i class="fa fa-bars"></i>
</button>
<!-- Top Nav -->
<div class="navbar-collapse nav-main-collapse collapse pull-right">
<nav class="nav-main">
<ul id="topMain" class="nav nav-pills nav-main">
<li class="dropdown">
<a class="scrollTo dropdown-toggle" href="#wrapper">
HOME <span>welcome</span>
</a>
<ul class="dropdown-menu">
<li><a href="index.html"><i class="fa fa-reply"></i> Default Home</a></li>
<li><a class="scrollTo" href="#wrapper"><i class="fa fa-home"></i> Onepage Home</a></li>
</ul>
</li>
<li><a class="scrollTo" href="#about">ABOUT <span>about us</span></a></li>
<li><a class="scrollTo" href="#work">PORTFOLIO <span>our work</span></a></li>
<li><a class="scrollTo" href="#services">SERVICES <span>our offer</span></a></li>
<li><a class="scrollTo" href="#contact">CONTACT <span>write us</span></a></li>
</ul>
</nav>
</div>
<!-- /Top Nav -->
</div><!-- /.container -->
</header>
<!-- /Top Nav -->
Gewijzigd op 21/08/2014 15:36:05 door Furio Scripting
De pagina van de url laad bij mij niet volledig. Bron code houd op bij <body> tag.
Bas IJzelendoorn op 21/08/2014 18:16:09:
De pagina van de url laad bij mij niet volledig. Bron code houd op bij <body> tag.
Hier hetzelfde.
Gewijzigd op 21/08/2014 18:46:53 door - SanThe -
gewoon witte pagina.
ik heb liever een ander kleur :)