Fixing a Responsive Navbar (Not bootstrap)

Question

NOTE: THE NAVBAR ISN'T IN BOOTSTRAP

I have made this Navbar responsive as you can see in the code under this, but the problem is that when screen is shorter than 950px it shows the button to which is supposed to open a menu with buttons one under another so it can fit n the screen, but it does nothing when I click on it. Am I missing code or something? Any help will be greatly appreciated.

 * { box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } nav ul li a { color: #FFF; text-decoration: none; font-size: 16px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 15px; font-family: Ubuntu; } nav ul li a:hover { text-decoration: none; color: #444; } nav ul li a.coinsnumber:hover { text-decoration: none; color: white; } .dropdown-contentd { display: none; position: absolute; top: 49px; background-color: royalblue; color: #FFF; min-width: 160px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); z-index: 1; /*border: 1px solid black;*/ margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } .dropdown-contentd a { float: none; color: black; padding: 12px 16px; color: #ffffff; text-decoration: none; display: block; text-align: left; transition: all .3s ease; background-color: royalblue; } .dropdown-contentd a:hover { color: #444; } .dropdownd:hover .dropdown-contentd { display: block; } /* End General */ /* Start Navbar */ nav ul { background-color: royalblue; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } nav ul > li { padding-left: 20px; padding-right: 20px; padding: 15px; display: inline-block; transition: all .3s ease; margin-left: -5px } nav ul > ol { position: absolute; top: 49px; right: 0; background: #333; text-align: center; list-style: none; display: none } nav ul > ol > li { width: 100vw; color: #FFF; margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } nav ul > ol > li:hover a { margin: 20px; } nav ul > ol > li:hover { background: #000; cursor: pointer } nav ul input { opacity: .7; padding: 5px; float: right; display: none } /* Start Menue Right */ /* Start Media Query */ @media screen and (max-width:950px){ nav ul > li:not(:first-child) { display:none; } nav ul > li:nth-last-of-type(2) { display: inline-block; } nav ul > li:last-of-type { display: inline-block; } } @media screen and (min-width:950px) { nav ul > ol > li { display:none } nav ul > li:nth-last-of-type(2) { display: none } } .dropdowncontentn { background-color: royalblue; } nav { z-index: 1; position: fixed; right: 0; left: 0; top: 0; }

 <nav> <ul> <li><a href="home.php">Home</a></li> <li><a href="earnpoints.php">Earn Coins</a></li> <li><a href="getrewards.php">Get Rewards</a></li> <li><a href="referrals.php">Referrals</a></li> <li><a href="vouchers.php">Vouchers</a></li> <li><div class="dropdownd"> <a href="#" class="dropbtnd">More</a> <i class="fa fa-caret-down"></i> <div class="dropdown-contentd"> <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a> <a class="dropdowncontentn" href="partnerships.php">Partnerships</a> <a class="dropdowncontentn" href="contact.php">Contact us</a> <a class="dropdowncontentn" href="socialmedia.php">Social Media</a> <a class="dropdowncontentn" href="settings.php">Settings</a> </div> </div> </li> <li> <a href="#"> <i class="fa fa-bars"></i> </a> </li> <li class="thum" style="float:right;margin-right:25px;"> <a onClick="navbar_coins_refresh.php" href="#" class="coinsnumber"><?php include 'navbar_coins.php'; ?></a> </li> </ul> </nav>

Answer 1

You have to understand in order to make your website interactive without loading a new page you will need to add some javascript to your code. Something like this could work:

HTML

<button onclick="showMobileMenu()">Show menu</button>

<div id="mobile-menu" class="mobile-menu">
  Your mobile menu here...
</div>

CSS

.mobile-menu{
  display:none;
}
.mobile-menu.show {
  display: block;
}

Javscript

function showMobileMenu() {
  var element = document.getElementById("mobile-menu");
  element.classList.add("show");
}

Answer 2

Unless you have some js you didn't post where you add list items to the button you are mentioning the button you are talking about has no functionality.

<li>
   <a href="#">
     <i class="fa fa-bars"></i>
   </a>
 </li>

This is the button you are talking about and it is just an empty link with an icon.

You should add the dropdown options like this:

<li><div class="dropdownd">
 <a href="#" class="dropbtnd">
     <i class="fa fa-bars"></i>
   </a>
 <div class="dropdown-contentd">
   <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a>
   <a class="dropdowncontentn" href="partnerships.php">Partnerships</a>
   <a class="dropdowncontentn" href="contact.php">Contact us</a>
   <a class="dropdowncontentn" href="socialmedia.php">Social Media</a>
   <a class="dropdowncontentn" href="settings.php">Settings</a>
 </div>
</div> 
</li>

This will be the complete html:

<nav>
 <ul>
 <li><a href="home.php">Home</a></li>
 <li><a href="earnpoints.php">Earn Coins</a></li>
 <li><a href="getrewards.php">Get Rewards</a></li>
 <li><a href="referrals.php">Referrals</a></li>
 <li><a href="vouchers.php">Vouchers</a></li>
 <li><div class="dropdownd">
 <a href="#" class="dropbtnd">More</a>
   <i class="fa fa-caret-down"></i>
 <div class="dropdown-contentd">
   <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a>
   <a class="dropdowncontentn" href="partnerships.php">Partnerships</a>
   <a class="dropdowncontentn" href="contact.php">Contact us</a>
   <a class="dropdowncontentn" href="socialmedia.php">Social Media</a>
   <a class="dropdowncontentn" href="settings.php">Settings</a>
 </div>
</div> </li>
<li><div class="dropdownd">
 <a href="#" class="dropbtnd">
     <i class="fa fa-bars"></i>
   </a>
 <div class="dropdown-contentd">
   <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a>
   <a class="dropdowncontentn" href="partnerships.php">Partnerships</a>
   <a class="dropdowncontentn" href="contact.php">Contact us</a>
   <a class="dropdowncontentn" href="socialmedia.php">Social Media</a>
   <a class="dropdowncontentn" href="settings.php">Settings</a>
 </div>
</div> 
</li>

 <li class="thum" style="float:right;margin-right:25px;">
   <a onClick="navbar_coins_refresh.php" href="#" class="coinsnumber"><?php include 'navbar_coins.php'; ?></a>
 </li>
</ul>
</nav>

Please mark this as the accepted solution if this works for you.

Answer 3

use click function for li > a, it will works now...

<li>
   <a id="attr_nav">
     <i class="fa fa-bars"></i>
   </a>
 </li>

 $(function() { var ulLi = $('nav ul > li'); var fa = $('nav ul > li:last-of-type a .fa'); $('nav ul').append('<ol></ol>'); $('nav').each(function() { for (var i=0; i <= ulLi.length - 3; i++) { $('nav ul > ol').append("<li>"+ i +"</li>"); $('nav ul > ol > li').eq(i).html(ulLi.eq(i+1).html()); } }); $('#attr_nav').click(function(){ $('nav ul > li:last-of-type').parent().children('ol').slideToggle(500); }); });

 * { box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } nav ul li a { color: #FFF; text-decoration: none; font-size: 16px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 15px; font-family: Ubuntu; } nav ul li a:hover { text-decoration: none; color: #444; } nav ul li a.coinsnumber:hover { text-decoration: none; color: white; } .dropdown-contentd { display: none; position: absolute; top: 49px; background-color: royalblue; color: #FFF; min-width: 160px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); z-index: 1; /*border: 1px solid black;*/ margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } .dropdown-contentd a { float: none; color: black; padding: 12px 16px; color: #ffffff; text-decoration: none; display: block; text-align: left; transition: all .3s ease; background-color: royalblue; } .dropdown-contentd a:hover { color: #444; } .dropdownd:hover .dropdown-contentd { display: block; } /* End General */ /* Start Navbar */ nav ul { background-color: royalblue; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } nav ul > li { padding-left: 20px; padding-right: 20px; padding: 15px; display: inline-block; transition: all .3s ease; margin-left: -5px } nav ul > ol { position: absolute; top: 49px; right: 0; background: #333; text-align: center; list-style: none; display: none } nav ul > ol > li { width: 100vw; color: #FFF; margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } nav ul > ol > li:hover a { margin: 20px; } nav ul > ol > li:hover { background: #000; cursor: pointer } nav ul input { opacity: .7; padding: 5px; float: right; display: none } /* Start Menue Right */ /* Start Media Query */ @media screen and (max-width:950px){ nav ul > li:not(:first-child) { display:none; } nav ul > li:nth-last-of-type(2) { display: inline-block; } nav ul > li:last-of-type { display: inline-block; } .dropdown-contentd {position: relative;} } @media screen and (min-width:950px) { nav ul > ol > li { display:none } nav ul > li:nth-last-of-type(2) { display: none } } .dropdowncontentn { background-color: royalblue; } nav { z-index: 1; position: fixed; right: 0; left: 0; top: 0; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <nav> <ul> <li><a href="home.php">Home</a></li> <li><a href="earnpoints.php">Earn Coins</a></li> <li><a href="getrewards.php">Get Rewards</a></li> <li><a href="referrals.php">Referrals</a></li> <li><a href="vouchers.php">Vouchers</a></li> <li><div class="dropdownd"> <a href="#" class="dropbtnd">More</a> <i class="fa fa-caret-down"></i> <div class="dropdown-contentd"> <a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a> <a class="dropdowncontentn" href="partnerships.php">Partnerships</a> <a class="dropdowncontentn" href="contact.php">Contact us</a> <a class="dropdowncontentn" href="socialmedia.php">Social Media</a> <a class="dropdowncontentn" href="settings.php">Settings</a> </div> </div> </li> <li> <a id="attr_nav"> <i class="fa fa-bars"></i> </a> </li> <li class="thum" style="float:right;margin-right:25px;"> <a onClick="navbar_coins_refresh.php" href="#" class="coinsnumber"><?php include 'navbar_coins.php'; ?></a> </li> </ul> </nav>