Fixing a Responsive Navbar (Not bootstrap)

bootstrap navbar
navbar fixed top bootstrap 4
navbar fixed-top after scrolling bootstrap 4
bootstrap navbar examples
bootstrap 3 navbar
navbar-fixed-top not working
bootstrap 4 navbar right
responsive dropdown-menu bootstrap

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>

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>

Bootstrap navbar is not responsive, You have a few issues that you need to fix. You need a navbar-header , that includes the button that will be shown on small screen sizes. Bootstrap Fixed Navbar. Bootstrap also provides mechanism to create navbar that is fixed on the top or bottom of the viewport and will scroll with the content on the page. Creating the Fixed to Top Navbar. Apply the position utility class .fixed-top to the .navbar element to fix the navbar at the top of the viewport, so that it won't scroll

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");
}

Fixed Top Navbar Example for Bootstrap, This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to  I've recently added a Bootstrap navbar to my site. And it's not being responsive. When I emulate a mobile screen on Firefox, I see no button for a dropdown menu. I've double checked to see if I linked all the necessary Bootstrap files and Jquery file fine, and they do. The HTML:

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.

Navbar · Bootstrap, Documentation and examples for Bootstrap's powerful, responsive navigation Although it's not required, you can wrap a navbar in a .container to center it on a <nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand"  The Skeleton Bootstrap Navbar HTML. To get the process started I defined wrote some markup and applied the Bootstrap classes needed to get a basic navbar started. Bootstrap Navbar Components. Bootstrap provides a series of classes to make a navbar responsive. This is a quick list of classes and their purpose plus some general navbar guidance:

Fixed top navbar example for Bootstrap, Navbar example. This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive a.icon { position: absolute; right: 0;

Bootstrap 4 Responsive, Fixed Top / Bottom Navbar and More , Learn how to use Bootstrap navbar component to create responsive navigation Tip: To create navbars that is not fixed on the top or bottom, place it anywhere  Note: All of the examples on this page will show a navigation bar that takes up too much space on small screens (however, the navigation bar will be on one single line on large screens - because Bootstrap is responsive). This problem (with the small screens) will be solved in the last example on this page.

SOLVED: My Bootstrap Navbar Toggle is Not Toggling!, Of course, I want the fixed navbar to collapse and be toggle-able on smaller screens. At the moment, my navbar is collapsing and the toggle button is appearing. Responsive Navbar Using Bootstrap 4. it is really good it works almost, a problem is when i want to input links in the dropdown so link does not work. I can use the same links outside so no problems in sending me a guide

Comments
  • Whoops, I forgot about this thing, there's this dropdown button "More", and when I hover over it in this mode it appears like it should appear when the navbar is displayed in normal mode, what should I add to fix this?
  • in mobile view do you want "More" button or not, if you don't need just add `.css('dispaly','none') in toggle class event...
  • yeah i do want it but i was thinking about putting it like a dropdown inside this mode prntscr.com/m6ycko (Sorry for explaining it this way but I don't really know how to explain it)
  • use this class in your max width css .dropdown-contentd {position: relative;} it will resolves or check my updated answer
  • worked (kind of) but also messed up the position in the original navbar