The footer navigation anchor with link in the header
Top navigation can hide data on mobile devices with small resolutions. To avoid this, we can place a link to the footer navigation and hide the navigation in the header. Sometimes there is only one navigation block used to achive this result, which has fixed positioning or absolutely positioned for desktop devices.
Try changing width of your browser window to see this method in action. And use the source code of this page as your guide.
HTML
Add a link in your header with link_nav class and #go_nav href value. Name it as you like. It's Menu in this demo.
- <nav class="menu_main">
- <a href="#go_nav" class="link_nav">Menu</a>
- <ul>
- <li class="active"><a href="#">About</a></li>
- <li><a href="#">Skins</a></li>
- <li><a href="#">Samples</a></li>
- <li><a href="#">Contacts</a></li>
- </ul>
- </nav>
<nav class="menu_main">
<a href="#go_nav" class="link_nav">Menu</a>
<ul>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Skins</a></li>
<li><a href="#">Samples</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
Add id go_nav to your footer navigation.
- <nav class="menu_bottom">
- <ul id="go_nav">
- <li class="active"><a href="#">About</a></li>
- <li><a href="#">Skins</a></li>
- <li><a href="#">Samples</a></li>
- <li><a href="#">Contacts</a></li>
- </ul>
- </nav>
<nav class="menu_bottom">
<ul id="go_nav">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Skins</a></li>
<li><a href="#">Samples</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
CSS
Add styles for desktop and mobile phones.
- .link_nav {
- display:none;
- }
-
- @media only screen and (max-width:480px) {
- .link_nav {
- display:block;
- }
- .menu_main ul {
- display:none;
- }
- }
.link_nav {
display:none;
}
@media only screen and (max-width:480px) { /* Smartphone custom styles */
.link_nav {
display:block;
}
.menu_main ul {
display:none;
}
}