How can I make this custom dual nav responsive and fixed at the same time?
Question
I have a client that want's two custom nav menus stacked on top of one another and under a slider with their logo in the center. They also want the menus to be fixed upon scroll. I have executed this and it works amazingly. Here is the link... DEMO
Now here lies the conundrum. Although this looks great on any device over 1200px, for the life of me I am not able to figure out how to make this look great for devices below that. I have added media queries to almost all of the code and still noting. I have made everything else on the page responsive except for this. Maybe removing the fixed menu is an option for smaller devices??? Any help would be greatly appreciated. Here is the code.... BTW I know the code is sloppy and in abundance, any suggestions to clean it up are welcome....
HTML
<div id="nav-container">
<div id="nav-box" class="animated fadeInDown">
<a class="btn rounded butter" href="#">Start Dinating</a>
<a class="btn rounded butter" href="#">Follow Us</a>
<a class="btn rounded butter" href="#"><i class="icon-facebook"></i></a>
<a class="btn rounded butter" href="#"><i class="icon-twitter"></i></a>
<a class="btn rounded butter" href="#"><i class="icon-instagram"></i></a>
<a class="list-group-item" href="#"></a>
<img src="http://www.jshuadvd.com/test/wp-content/uploads/2014/11/logo.png" alt="Dinate" width="199" height="204">
<a class="btn2 rounded butter" href="#">Merchandise</a>
<a class="btn2 rounded butter" href="#"><i class="icon-lock"></i>Log In / Register</a>
<a class="btn2 rounded butter" href="#"><i class="icon-shopping-cart"></i>View Tab</a>
</div>
<nav id="second-nav">
<div id="nav-left">
<ul>
<li><a href="#">HOME </a></li>
<li><a href="#">OUR RESTAURAUNTS </a></li>
<li><a href="#">DINATING EVENTS </a></li>
</ul>
</div>
<div id="nav-right">
<ul>
<li><a href="#">CONTACT </a></li>
<li><a href="#">BLOG </a></li>
<li><a href="#">CHARITES </a></li>
</ul>
</div>
</nav>
</div>
</div>
CSS
#nav-container {
height: 180px;
text-decoration: none;
font-size: 15px;
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
}
@media screen and (max-width: 1200px){
#nav-container {
box-sizing: border-box;
width:100%;
text-align: center;
font-size: 12px;
}
}
#nav-box {
position: relative;
background: #222;
text-align: center;
width: 100%;
height: 50px;
z-index: 2000;
padding-top: 0px;
padding-bottom: 5px;
line-height: 0;
}
@media screen and (max-width: 1200px){
#nav-box {
box-sizing: border-box;
width:100%;
text-align: center;
}
}
#nav-box img {
position: absolute;
top: 0;
left: 50%;
margin-left: -100px;
}
@media screen and (max-width: 1200px){
#nav-box img {
display: none;
}
}
/* --------------------- BUTTTONS ------------------- */
.btn {
overflow: hidden;
position: relative;
display: inline-block;
height: 2em;
line-height: 2em;
padding: 0 1em;
left: -7.5%;
margin: 10px 30px 0 0;
-moz-transition: color 400ms;
-o-transition: color 400ms;
-webkit-transition: color 400ms;
transition: color 400ms;
}
@media screen and (max-width: 1200px){
.btn {
box-sizing: border-box;
width:100%;
text-align: center;
font-size: auto;
}
}
.btn2 {
overflow: hidden;
position: relative;
display: inline-block;
height: 2em;
line-height: 2em;
padding: 0 1em;
left: 9.8%;
margin: 10px 30px 0 0;
-moz-transition: color 400ms;
-o-transition: color 400ms;
-webkit-transition: color 400ms;
transition: color 400ms;
}
@media screen and (max-width: 1200px){
.btn2 {
box-sizing: border-box;
width:100%;
text-align: center;
font-size: auto;
}
}
.btn:before {
content: '';
position: absolute;
z-index: -1;
height: 0%;
width: 100%;
bottom: 0;
left: 0;
-moz-transition: height 100ms;
-o-transition: height 100ms;
-webkit-transition: height 100ms;
transition: height 100ms;
}
@media screen and (max-width: 1200px){
.btn:before {
box-sizing: border-box;
width:100%;
text-align: center;
}
}
.btn2:before {
content: '';
position: absolute;
z-index: -1;
height: 0%;
width: 100%;
bottom: 0;
left: 0;
-moz-transition: height 100ms;
-o-transition: height 100ms;
-webkit-transition: height 100ms;
transition: height 100ms;
}
@media screen and (max-width: 1200px){
.btn2:before {
box-sizing: border-box;
width:100%;
text-align: center;
}
}
.btn:hover {
color: #A4C739;
border-color: #A4C739;
}
.btn2:hover {
color: #A4C739;
border-color: #A4C739;
}
.btn:hover:before {
height: 100%;
}
.btn2:hover:before {
height: 100%;
}
.rounded {
border-radius: 2em;
}
@media screen and (max-width: 1200px){
.rounded {
box-sizing: border-box;
border-radius: auto;
width:auto;
}
}
.butter {
color: white;
border: 3px solid white;
border-radius: 2em;
}
@media screen and (max-width: 1200px){
.butter {
box-sizing: border-box;
border-radius: auto;
width:auto;
}
}
.butter:before {
background-color: #A4C739;
}
@media screen and (max-width: 1200px){
.butter:before {
box-sizing: border-box;
width:auto;
}
}
.butter:hover {
color: white;
border-color: white;
}
/* ---------------- SOCIAL NAV ICONS ------------------ */
.icon-facebook {
margin-left: -10px;
margin-right: -10px;
}
@media screen and (max-width: 1200px){
.icon-facebook {
box-sizing: border-box;
width: auto;
}
}
.icon-twitter {
margin-left: -10px;
margin-right: -10px;
}
@media screen and (max-width: 1200px){
.icon-twitter {
box-sizing: border-box;
width:auto;
}
}
.icon-instagram {
margin-left: -10px;
margin-right: -10px;
}
@media screen and (max-width: 1200px){
.icon-instagram {
box-sizing: border-box;
width: auto;
}
}
/* ---------------- BUTTON ICONS ------------------ */
.icon-shopping-cart {
margin-right: 6px;
margin-left: -4px;
}
@media screen and (max-width: 1200px){
.icon-shopping-cart {
box-sizing: border-box;
width:auto;
}
}
.icon-lock {
margin-right: 5px;
margin-left: -4px;
}
@media screen and (max-width: 1200px){
.icon-lock {
box-sizing: border-box;
width:auto;
}
}
.clear {
clear: both;
}
/* ---------------- BUTTONS END ------------------ */
/* ---------------- SECOND NAV ------------------- */
#second-nav {
width: 100%;
text-align: center;
font-size: 15px;
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
z-index: 999;
}
@media screen and (max-width: 1200px){
#second-nav {
box-sizing: border-box;
width:100%;
text-align: center;
font-size: 12px;
}
}
/* ----------------- LEFT NAV ------------------- */
#nav-left {
z-index: 1;
margin-bottom: -92px; /* nav height */
padding: 5px 60px;
background: #000;
transition: box-shadow 400ms;
}
@media screen and (max-width: 1200px){
#nav-left {
box-sizing: border-box;
width:100%;
text-align: center;
}
}
#nav-left ul {
margin:0 auto;
width:100%;
list-style: none;
*zoom: 1;
}
@media screen and (max-width: 1200px){
#nav-left ul {
box-sizing: border-box;
width:100%;
text-align: center;
}
}
#nav-left ul:after {
clear:both;
display: table;
content: "";
}
@media screen and (max-width: 1200px){
#nav-left ul:after {
box-sizing: border-box;
width:100%;
text-align: center;
}
}
#nav-left li {
float: left;
text-align: center;
padding: 0 45px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
list-style: none;
border-left:1px solid #222;
}
@media screen and (max-width: 1200px){
#nav-left li {
box-sizing: border-box;
width:100%;
text-align: center;
border: none;
}
}
#nav-left li:first-child {
border-left: 0;
padding-left: 0;
}
#nav-left a {
position: relative;
display:block;
color: #fff;
padding: 40px 0;
line-height: 1px;
text-decoration: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
@media screen and (max-width: 1200px){
#nav-left a {
box-sizing: border-box;
width:100%;
border: none;
}
}
#nav-left a:hover {
color: #A4C739;
}
.clear {
clear: both;
}
/* --------------- RIGHT NAV ---------------- */
#nav-right {
z-index: 1;
margin-bottom: -72px; /* nav height */
padding: 0 120px;
background: #000;
transition: box-shadow 400ms;
}
@media screen and (max-width: 1200px){
#nav-right {
box-sizing: border-box;
width:100%;
text-align: center;
}
}
#nav-right ul {
margin:0 auto;
width:100%;
list-style: none;
*zoom: 1;
}
@media screen and (max-width: 1200px){
#nav-right ul {
box-sizing: border-box;
width:100%;
text-align: center;
}
}
#nav-right ul:after {
clear:both;
display: table;
content: "";
}
@media screen and (max-width: 1200px){
#nav-right ul:after {
box-sizing: border-box;
width:100%;
text-align: center;
}
}
#nav-right li {
float: right;
text-align: center;
padding: 0 45px ;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
list-style: none;
border-right:1px solid #222;
}
@media screen and (max-width: 1200px){
#nav-right li {
box-sizing: border-box;
width:100%;
text-align: center;
border: none;
}
}
#nav-right li:first-child {
border-right: 0;
padding-right: 0;
}
#nav-right a {
position: relative;
display:block;
color: #fff;
padding: 40px 10px;
line-height: 1px;
text-decoration: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
@media screen and (max-width: 1200px){
#nav-right a {
box-sizing: border-box;
width:100%;
text-align: center;
border: none;
}
}
#nav-right a:hover {
color: #A4C739;
/* -moz-box-shadow: 0 0 0 1px #fff;
-webkit-box-shadow: 0 0 0 1px #fff;
box-shadow: 0 0 1px 1px #fff; */
}
.fixed {
position:fixed !important;
}
.clear {
clear: both;
}
JS / JQUERY
<!------------Begin JavaScript Functions for Fixed Header-------->
<script type='text/javascript'>
jQuery(document).ready(function($){
var aboveHeight = $('#slider').outerHeight();
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('#nav-box').addClass('fixed').css('top','0').next().css('margin-top','55px');
} else {
$('#nav-box').removeClass('fixed').next().css('margin-top','0');
}
});
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('#second-nav').addClass('fixed').css('top','0').next().css('margin-top','40px');
} else {
$('#second-nav').removeClass('fixed').next().css('margin-top','0');
}
});
});
</script>
<!------------End JavaScript Functions for Fixed Header---------->
1 answers
solution1
1 2014-11-24 04:08:46
First of all, it's probably a good idea to put your upper level navigation into a <ul><li> structure. Now, what you can do is use jQuery to build a 'mobile menu' when the page loads, eg.
var menu1 = $('ul.primary-menu').html();
var menu2 = $('ul.secondary-menu').html();
$('body').append('<div class="mobile-menu"><ul class="primary-menu">' + menu1 + '</ul><ul class="secondary-menu">' + menu2 + '</ul></div>');
You can then style this and then hide for the full website and display it (while hiding the full navigation) for mobile screens.
After this you can setup a trigger to hide/show or slide etc. from a menu link.
I find that this is probably the easiest way for long navigation items.
Here is a quick fiddle I made: http://jsfiddle.net/pavkr/8cg7bLjL/8/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I make this fixed nav stop flashing?
How can I add another level to this responsive horizontal nav?
How can I develop a responsive and sticky nav bar with no jumping?
I am trying to make a responsive nav bar
How can i add fixed nav bar switching animation
How to make circle image in nav responsive
How can I make a embeded form responsive?
How can I make EaselJS and Cordova responsive?
How can I make this animation responsive?
How can I make image responsive?
Related Tags