If i just shrink down the window in Chrome, the navbar will work as intended, but when i go into chrome's device emulator, the navbar never changes to the toggle button.
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top affix-top" style="border:0;background-color:transparent;position:absolute;">
<div class="container-fluid" style="padding: 20px 15% 0;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top"><img class="img-responsive" src="/logo.png"></a>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">
<span>Rewards</span>
</a>
</li>
<li>
<a class="page-scroll" href="#services">
<span>Member Care</span>
</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">
<span>Sign Up</span>
</a>
</li>
<li>
<a class="page-scroll login-btn" href="#login-form">
Log In <i class="fa fa-user"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
You could start by confirming you've set the viewport meta tag in the head of your page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
please refer "https://codepen.io/anon/pen/XbBPPY" i want same result but instead of using bootstrap-3, i want to use bootstrap-4.
U can see the code in the reference link "https://codepen.io/anon/pen/XbBPPY"
HTML
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="nav">
<li class="nav-link active">Link</li>
<li class="nav-link">Link</li>
<li class="nav-link">Link</li>
<li class="dropdown">
Drop-Down Menu<i class="fa fa-angle-down flipped"></i>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<i class="fa fa-microphone fa-2x"></i>Option
</li>
<li class="nav-link">
<i class="fa fa-newspaper-o fa-2x"></i>Option
</li>
</ul>
</li>
<li class="nav-link">Link</li>
<li class="nav-link">Link</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: red;height:100px; width: 100%;">
</div>```
i am using following nav code in my nav view
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">
<img src="img/logo.png" class='img-responsve' alt='Transskilks'/>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="socialnav">
<li>Home</li>
<li>About</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" aria-expanded="false">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Talent Acquisition</li>
<li>Consulting & Advisory</li>
<li>Global Payroll Outsource</li>
<li>Time and Attendance System</li>
</ul>
</li>
<li>Contact</li>
<li><i class="fab fa-facebook-f"></i></li>
<li class="active"><i class="fab fa-twitter"></i></li>
<li class="active"><i class="fab fa-instagram"></i></li> </i></a></li>
<li class="active"><i class="fab fa-google-plus-g"></i></li>
<li class="active"> <i class="fab fa-linkedin-in"></i></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
CSS:
`<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'`>
JS
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
Everything works fine but in mobile view navbar does not open , Can someone help me whats wrong here, i don't find any issues in console for other js files as well.
Try Putting the button outside the navbar itself. Moreover, make sure that there's no mismatch between the data-target of the button and the id of the tag, as the collapsing only works with IDs, not classes.
I'm currently trying to create a button that will reveal me the collapsed navigation links when the screen gets too small. The button does materialize, but I can't get it to perform anything besides appearing when the screen gets small.
The toggle button also creates small '>' arrows when I only intended to have the white "-" lines in the button.
I realized that jquery and bootstrap's js files should be included at the bottom of the body tag, but so far I've had no luck even with those added. Any help is appreciated.
https://codepen.io/Tintinator/pen/NvKRvO
<div class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<!-- BRAND, BUTTON -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target=".navbar-nav">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>>
<span class="icon-bar"></span>>
<span class="icon-bar"></span>>
</button>
<a class="navbar-brand" href="#">
<img src="./newnewfoy.png">
</a>
</div>
<!-- NAV LINKS -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="navilinks">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Event</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Volunteer</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Sponsors</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
<div class="medialinks hidden-sm hidden-xs">
<a id="YOUcon" class = "mediacon" href="www.google.com"></a>
<a id="IGcon" class = "mediacon" href="www.google.com"></a>
<a id="TWTcon" class = "mediacon" href="www.google.com"></a>
<a id="FBcon" class="mediacon" href="www.google.com"></a>
</div>
</div>
</div>
</div>
You have wrong data-target attribute and a css rule that limits nav height (50px) which doesn't let it to expand properly. And I believe parent element should be nav not div.
Try this instead:
<!-- NAVIGATION BAR -->
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
<div class="container">
<!-- BRAND, BUTTON -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navilinks" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="./newnewfoy.png">
</a>
</div>
<!-- NAV LINKS -->
<div class="navbar-collapse collapse" id="navilinks">
<ul class="nav navbar-nav" >
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Event</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Volunteer</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Sponsors</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
<div class="medialinks hidden-sm hidden-xs">
<a id="YOUcon" class = "mediacon" href="www.google.com"></a>
<a id="IGcon" class = "mediacon" href="www.google.com"></a>
<a id="TWTcon" class = "mediacon" href="www.google.com"></a>
<a id="FBcon" class="mediacon" href="www.google.com"></a>
</div>
</div>
</div>
</nav>
https://codepen.io/anon/pen/oevYvp
I'm not sure if this is is, but did you add the plugin? (see image)
Within your codepen, I modified a couple lines of code and it seems to do the trick. I changed the data-target from a class to an id of #navbar and then updated the initial div in your "NAV LINKS" to include the id of #navbar. I forked your codepen for you. https://codepen.io/ckroll17/pen/qXWqbV
<!--
Changed button to data-target to #navbar
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-nav"> -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="./newnewfoy.png">
</a>
</div>
<!-- NAV LINKS -->
<!-- Added an id of navbar to the class directly below -->
<div id="navbar" class="navbar-collapse collapse">
Hello all,
I am trying to make a navbar disappear after being clicked (It also has a sub menu dropdown). I tried using this (in fact it worked for a while but now does not). Any help would be appreciated, David
<script type="text/javascript">
<!--Make the menu collapse on option click in mobile mode-->
jQuery(document).ready(function () {
jQuery(".nav .dropdownmenu, .navbar-header .dropdownmenu").click(function(event) {
// check if window is small enough so dropdown is created
jQuery(".navbar-collapse").removeClass("in").addClass("collapse");
});
});
</script>
This is the dropdown menu
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src = "images/logo.png" height="30px" style="margin-top: 10px; margin-left: 5px;">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdownmenu active">Home</li>
<li class="dropdownmenu">Sales</li>
<li class="dropdownmenu">Lettings</li>
<li class="dropdownmenu">Financial Services</li>
<li class="dropdown">
Branches <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdownmenu" data-toggle="modal" data-target="#northwichModal"><a >Northwich</a></li>
<li class="dropdownmenu" data-toggle="modal" data-target="#middlewichModal">Middlewich</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#winsfordModal">Winsford</li>
<li class="dropdownmenu" data-toggle="modal" data-target="#lettingsModal">Northwich Lettings</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I'm trying to stick notification submenu to toggle menu in small screens and stick to right on small screens like the following
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed pull-left">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
</ul>
</div>
</div>
<ul class="nav">
<li class="dropdown dropdown-list">
<a href="javascript:;" data-toggle="dropdown" dropdown-animate="" aria-haspopup="true" class="dropdown-toggle">
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</li>
</ul>
</nav>
But unfortunately it does not work. Please help me how could I do it?
To keep the notification always visible, you could add them to the nav-header like this:
<div class="navbar-header">
<button class="navbar-toggle collapsed">...</button>
<div class="nav navbar-brand pull-right">
<a href="#" >
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</div>
</div>
.notifications.navbar-brand {
font-size: 14px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target=".navbar-collapse" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav navbar-brand pull-right notifications">
<a href="#" >
<i class="glyphicon glyphicon-bell"></i>
<span class="label label-danger">11</span>
</a>
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Abount</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>