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">
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'm using bootstrap, and it is a one page site. And when I need to use the toggle for mobile devices. The collapse works, but I need to uncollapse when I click on one of the menu liks.
Just need that to deliver the project.
Any thoughts?
http://www.neevasoft.com/docasnovo
html
<header id="header" class="navbar-fixed-top main-nav" role="banner">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Logo start -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand" href="#home">
<img class="img-responsive" src="images\logo.png" alt="logo">
</a>
</div><!--/ Logo end -->
<nav class="collapse navbar-collapse clearfix" >
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#home">Home</a></li>
<li><a class="page-scroll" href="#services">A Empresa</a></li>
<li><a class="page-scroll" href="#historia">História</a></li>
<li><a class="page-scroll" href="#about">Participações</a></li>
<li><a class="page-scroll" href="#team">Renovada</a></li>
<li><a class="page-scroll" href="#contact">Contato</a></li>
<li><a class="page-scroll" href="acervo.html" onClick="window.location='acervo.html'">Acervo</a></li>
<!--li><a class="page-scroll" href="#contact">Contact</a></li-->
</ul>
</nav><!--/ Navigation end -->
</div><!--/ Col end -->
</div><!--/ Row end -->
</div><!--/ Container end -->
</header><!--/ Header end -->
You can simply add to each li the following attributes:
<li data-toggle="collapse" data-target=".navbar-collapse">
<a class="page-scroll" href="#home">Home</a>
</li>
....
....
no need for JavaScript code here. because bootstrap will take care of it.
You can use .collapse('hide') from collapse.js. Docs
jQuery(document).ready(function($) {
$("li a.page-scroll").click(function() {
$(this).closest(".navbar-collapse.in").collapse('hide');
});
});
As someone probably know - eBay doesn't respect eg. jQuery. I want make responsive template with responsive menu, but I don't known what should I do with menu. I must delete all jQuery from bootstrap and now menu toggle doesn't work on eg. smartphones. What should I do?
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-headerOne">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Store</li>
<li>Payments</li>
<li>Shipping</li>
<li>Returns</li>
<li>Terms</li>
<li>Gurantee</li>
<li>Abous us</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</nav>
To create these menus without javascript you have to use some CSS. Maybe this link will help you for similar problems: bootstrap-without-jquery
Here is a solution for your particular problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
/* Dropdown without JS */
.dropdown-toggle:focus {
pointer-events: none;
}
.dropdown-toggle:focus + .dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.dropdown-menu {
opacity: 0;
display: block;
visibility: hidden;
transition: visibility 0.5s;
}
</style>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="dropdown-toggle navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="dropdown-menu" style="position:absolute;right:0;">
<li class="">
menu1 <span class="sr-only">(current)</span>
</li>
<li class="">
menu2 <span class="sr-only">(current)</span>
</li>
<li class="dropdown active">
menu3 <span class="sr-only">(current)</span>
</li>
<li class=""><a href="/menu3/submenu1/">submenu1
<span class="sr-only">(current)</span></a>
</li>
<li class=""><a href="/menu3/submenu2/">submenu2
<span class="sr-only">(current)</span></a>
</li>
</ul>
<a class="navbar-brand" href="/"
style="background: white; padding-left: 50px;">App</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class=""><a href="/menu1/">menu1
<span class="sr-only">(current)</span></a>
</li>
<li class=""><a href="/menu2/">menu2
<span class="sr-only">(current)</span></a>
</li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">menu3
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="">A</li>
<li class="">B</li>
<li class="">C</li>
<li class="">D</li>
</ul>
</li>
<li class=""><a href="/menu3/submenu1/">menu3
<span class="sr-only">(current)</span></a>
</li>
</ul>
<i class="navbar-text navbar-right">
Logout
</i>
</div>
</div>
<!-- /.container-fluid -->
</nav>
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">
I've made navbar using Bootstrap4 and when I open website as mobile screen links in menu doesn't work. Here is my code:
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #E2BA28">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Brand -->
<a class="navbar-brand" href="https://www.example.com"><img src="logo" width="60" class="d-inline-block align-top" alt=""></a>
<!-- Links -->
<div class="collapse navbar-collapse justify-content-end" id="nav-content">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link eak-link" href="https://www.example.com">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link" href="https://www.example.com">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link" href="#">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link" href="https://www.example.com">example</a>
</li>
<li class="nav-item">
<a class="nav-link eak-link eak-abc" href="https://www.example.com">example</a>
</li>
</ul>
</nav>
If it does help I'm using this js:
$(document).ready(function(){
$('.nav-item').hover(function(){
$(this).toggleClass('animated bounceIn')
});
});
Thanks for help !
Apart from adding bootstrap's js code at the footer of your page, you'll need to also includejQuery.
Here's a working pen:
CodePen