CODEWITHSUNDEEP
jqueryhtmlcssnavigationnav
BuSol Consulting
BuSol Consulting

Reputation: 3

nav navbar-nav navbar-right dropdown content won't push menu items down on mobile devices

I"m trying to create a dropdown menu with nav navbar-nav navbar-right. I get it to align on mobile device (smaller screen) but when I click on the dropdown it doesn't push the menu items down but rather dropdown over the other menu items. I'm not sure how to fix this.

Also when I make the desktop browser screen smaller and the collapse kicks in; when I hover over the dropdown the sub menu disappear as I remove the cursor from the parent item toward the sub items.

I'm trying to make this menu with one dropdown element. But the sub elements for the drop down don't push the other menu items down on mobile view. Here's the HTML and CSS. On desktop it hovers great but the link doesn't work. And on mobile it clicks but doesn't pushes the menu items down. Hope I can get some help.

The HTML Code: 

    <header class="top-area">
        <div class="header-area">
            <div class="container">
                <div class="row">
                    <div class="col-sm-2">
                        <div class="logo">
                            <a href="index.html">
                                Yaxche<span>Adventure</span>Tours
                            </a>
                        </div><!-- /.logo-->
                    </div><!-- /.col-->
                    <div class="col-sm-10">
                        <div class="main-menu">

                            <!-- Brand and toggle get grouped for better 
mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" 
data-toggle="collapse" data-target=".navbar-collapse">
                                    <i class="fa fa-bars"></i>
                                </button><!-- / button-->
                            </div><!-- /.navbar-header-->
                            <div class="collapse navbar-collapse">        
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href="index.html">home</a></li>
                                    <li class="dropdown" data- 
toggle="dropdown" data-target=".navbar-collapse"><a href="belize- 
tours.html">Tours<i class="fa fa-caret-down"></i></a>
                                    <ul class="dropdown-content">
                                        <li><a href="belize-atm-cave- 
tour.html">ATM Cave</a></li>
                                        <li><a href="mountain-pine-ridge- 
belize.html">Pine Ridge Tour</a></li>
                                        <li><a href="caracol-belize- 
tour.html">Caracol Site</a></li>
                                        <li><a href="horseback-riding- 
belize.html">Horseback Riding</a></li>
                                        <li><a href="cave-tubing-belize- 
tour.html">Cave Tubing w/ Zip</a></li>
                                        <li><a href="visiting-tikal-from- 
belize.html">Tikal Tours</a></li>
                                        <li><a href="barton-creek-cave-tour- 
belize.html">Barton Creek</a></li>
                                        <li><a href="belize-zip-lining- 
tours.html">Zip-lining</a></li>
                                        <li><a href="belize-river-canoeing- 
kayaking-tours.html">Canoeing/Kayaking</a></li>
                                        </ul>
                                        </li>
                                    <li><a href="belize-tour- 
packages.html">Packages</a></li>
                                    <li><a href="belize-shuttle- 
service.html">Shuttle</a></li>
                                    <li><a href="belize-tour- 
payment.html">Pay</a></li>
                                    <li><a href="about-yaxche-adventure- 
tours.html">About Us</a></li>
                                    <li>
                                    <form action="contact-us.html">
                                        <button class="book-btn" 
type="submit">book now
                                        </button></form>
                                    </li><!--/.project-btn--> 
                                </ul>
                            </div><!-- /.navbar-collapse -->
                        </div><!-- /.main-menu-->
                    </div><!-- /.col-->
                </div><!-- /.row -->
                <div class="home-border"></div><!-- /.home-border-->
            </div><!-- /.container-->
        </div><!-- /.header-area -->

    </header><!-- /.top-area-->
    <!-- main-menu End -->

The CSS Styes:

.main-menu {position:relative;}
.main-menu ul .nav .navbar-nav {
text-align:right;
float:none;

}

.main-menu .nav li {
position:relative;
z-index: 1; 
padding: 5px 12px 0px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition: all 0.2s linear;

}

.main-menu .nav li a {
padding: 11px 0 29px;
color: #fff;
font-size: 16px;
text-transform: capitalize;
font-family: 'Poppins', sans-serif;
font-weight:500;
-webkit-transition: all 0.25s ease-in-out 0s;
-moz-transition: all 0.25s ease-in-out 0s;
-o-transition: all 0.25s ease-in-out 0s;
transition: all 0.25s ease-in-out 0s;

}

.main-menu  .nav  li.active a,
.main-menu  .nav  li a:hover,
.main-menu .nav  li a:focus {
color: #00d8ff;
background-color:transparent;
text-align: center;

}

.main-menu .nav a:before {
position: absolute;
content: "";
width: 0px;
height: 2px;
bottom: -2.4px;
left: 0;
background: transparent;
-webkit-transition: .3s ease-in-out;
-ms-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: .3s ease-in-out;

}

.main-menu .nav li.active  a:before,
.main-menu .nav a:hover:before {
background: #00d8ff;
width: 100%;

}

.nav.navbar.open {
margin-bottom: 160px;

}

.main-menu .navbar-toggle {
margin-top: 5px;
border: 1px solid;
font-size: 16px;
float:left;

}

.main-menu .navbar-toggle {
color: #00d8ff;

}

.main-menu .navbar-default .navbar-toggle:focus, 
.main-menu .navbar-default .navbar-toggle:hover {
background-color: transparent;

}

.home-border{
border-top:2px solid #fff;

}

.dropdown {
position: relative;
display: inline-block;

}

.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0);
z-index: 1;

}

.dropdown-content a {
color: #fff;
padding: 12px 16px;
font-family: 'Poppins', 'san-serif'; 
text-decoration: none;
background-color: transparent; 
display: block;

}

.dropdown-content a:hover {background-color: #00d8ff}

.dropdown:hover .dropdown-content {
display: block;
color: #00d8ff;

}

.dropdown-content:hover {
background-color: darkgray;

}

.dropdown:hover .dropbtn {
background-color: transparent;

}

.sub {
display: none

}

.navigation:hover .sub {
 display: block;
 position: absolute;
 z-index: 100;

}

Upvotes: 0

Views: 777

Answers (1)

Husam Ebish
Husam Ebish

Reputation: 6768

I've made radical changes to the your code.

It works perfectly on desktop and mobile.

        $("#cssmenu").menumaker({
    title: "Menu",
    breakpoint: 768,
    format: "multitoggle"
});
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #141414;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  font-weight: bold;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}
#cssmenu.small-screen {
  width: 100%;
}
#cssmenu.small-screen ul {
  width: 100%;
  display: none;
}
#cssmenu.small-screen.align-center > ul {
  text-align: left;
}
#cssmenu.small-screen ul li {
  width: 100%;
  border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
  height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
  width: 100%;
  border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
  float: none;
}
#cssmenu.small-screen ul ul li a {
  padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
  padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
  color: #dddddd;
  background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
  color: #ffffff;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
  position: relative;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
  display: none;
}
#cssmenu.small-screen #menu-button {
  display: block;
  padding: 17px;
  color: #dddddd;
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}
#cssmenu.small-screen #menu-button:after {
  position: absolute;
  top: 22px;
  right: 17px;
  display: block;
  height: 4px;
  width: 20px;
  border-top: 2px solid #dddddd;
  border-bottom: 2px solid #dddddd;
  content: '';
  box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
  position: absolute;
  top: 16px;
  right: 17px;
  display: block;
  height: 2px;
  width: 20px;
  background: #dddddd;
  content: '';
  box-sizing: content-box;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
  top: 23px;
  border: 0;
  height: 2px;
  width: 15px;
  background: #ffffff;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
  top: 23px;
  background: #ffffff;
  width: 15px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
  position: absolute;
  z-index: 99;
  right: 0;
  top: 0;
  display: block;
  border-left: 1px solid rgba(120, 120, 120, 0.2);
  height: 46px;
  width: 46px;
  cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
  background: #070707;
}
#cssmenu.small-screen ul ul .submenu-button {
  height: 34px;
  width: 34px;
}
#cssmenu.small-screen .submenu-button:after {
  position: absolute;
  top: 22px;
  right: 19px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
  top: 15px;
  right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
  background: #ffffff;
}
#cssmenu.small-screen .submenu-button:before {
  position: absolute;
  top: 19px;
  right: 22px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
  top: 12px;
  right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
  display: none;
}
#cssmenu.small-screen.select-list {
  padding: 5px;
}
#cssmenu.small-screen ul ul form {
    width: 100%;
    font-weight: bold;
    color: #dddddd;
    background: none;
}
.form{
color: #dddddd;
}

#cssmenu ul ul form{
    background: #333333;
    width: 400px;
}
            
#cssmenu.small-screen ul ul form {
    font-weight: bold;
    color: #dddddd;
    background: none;
}
            
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color: #a5a5a5;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #696969;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jQuery -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <!-- MenuMaker Plugin -->
    <script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>

    <!-- Icon Library -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <style>

            
        </style>
    </head>

    <body>
<div id="cssmenu">
  <ul>
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
     <li><a href="#"><i class="fa fa-fw fa-bars"></i> Tours</a>
        <ul>
           <li><a href="#">ATM Cave</a></li>
           <li><a href="#">Pine Ridge Tour</a></li>
           <li><a href="#">Caracol Site</a></li>
           <li><a href="#">Horseback Riding</a></li>
           <li><a href="#">Cave Tubing w/ Zip</a></li>
           <li><a href="#">Tikal Tours</a></li>
           <li><a href="#">Barton Creek</a></li>
           <li><a href="#">Zip-lining</a></li>
           <li><a href="#">Canoeing/Kayaking</a></li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-codepen"></i> Packages</a></li>
     <li><a href="#"><i class="fa fa-fw fa-clone"></i> Shuttle</a></li>
     <li><a href="#"><i class="fa fa-fw fa-cc-mastercard"></i> Pay</a></li>
     <li><a href="#"><i class="fa fa-fw fa-info"></i> About Us</a></li>
     <li class="slow"><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a>
        <ul>
           <form class="form" action="action_page.php">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Syria</option>
      <option value="canada">Turky</option>
      <option value="usa">Switzerland</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">

  </form>
        </ul>
     </li>
  </ul>
</div>
    </body>
</html>

Upvotes: 0

Related Questions