I am trying to code my team's website. The navbar will not collapse on mobile screens. I added the "data-target" to target the class in the list. When clicking the button, the list should collapse, but it doesn't.
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<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 navHeaderCollapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
Try this out:
<div class="navbar navbar-inverse navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<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">Team 3774</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" role="navigation">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
Remove the style="height: 0.866667px;"
Add a separate id tag for targetting by the dropdown and button (semantic practice).
You have two navbar-header classes (Remove the second one and combine the button and the brand anchor. Here's a jsfiddle of the working navbar: https://jsfiddle.net/AndrewL32/e0d8my79/6/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHead">
<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" id="navHead">
<ul class="nav navbar-nav pull-right">
<li>Team Bio</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
Related
I made a dropdown menu, but now I want this menu to only show in mobile view, and not in other views. I guess it's done using "visible-xs" or something like that, but I couldn't code it.
Here's my HTML,
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>Chicken</li>
<li>Beef</li>
<li>Sushi</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" 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>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse visible-xs">
<ul id="nav-list" class="nav navbar-nav navbar-right ">
<li>Chicken</li>
<li>Beef</li>
<li>Sushi</li>
</ul>
</div>
</div>
</nav>
How to add a text inside bootstrap mobile menu button?
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<div class="navbar-collapse sidebar-navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="nav_bar_title"></li>
<li class="page_item"></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Example, what i want to achieve:
you can add a list item just for the text and the rest for menu items:
<li class="page_item class-for-styling-the-text">your text here</li>
and use the a certain class to style that element or use css :first-child selector.
hope that helps.
Something like this :
Bootply: https://www.bootply.com/JH4FMuvYMe
HTML
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="text">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse sidebar-navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="nav_bar_title"></li>
Css
span.text {
float: left;
margin-right: 30px;
}
.navbar-toggle .icon-bar{
margin-left: auto;
}
you can try this:
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span style="display:inline-block; margin:2px;">menu text</span>
<span style="display:inline-block;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
The links do not appear on the button when the compact page.
The button is dead, does not respond.
This is my code:
<div id="geral" class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!--Navbar header-->
<div class="navbar-header">
<!--Button-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1" 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>
<!--Nome do projeto-->
<a class="navbar-brand" href="#">Project name</a>
</div>
<!--navbar collapse-->
<div id="navbar1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Link </li>
<li>Link2 </li>
<li>Link3 </li>
</ul>
</div>
</nav>
</div>
I have designed menu for large devices and mobile devices, but the problem is toggle menu always shows in expanded view. The problem occurred when col-md-3 & col-md-9 are given.
Is there any way to fix this?
My HTML Code
<div class="container">
<div class="row">
<div class="col-md-3"><img class="img-responsive logo" src="images/logo.png" ></div>
<div class="col-md-9">
<nav class="navbar navbar-default" style="background:none; border:none;">
<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>
</div>
<div class="collapse navbar-collapse visible-xs" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li>Home</li>
<li>About us</li>
<li>Employers</li>
<li>Job Seekers</li>
<li>Testimonials</li>
<li>Contact us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
now Look at this
https://jsfiddle.net/MadhawaMB/qhft4w1L/1/
Im change some code
toggle get grouped for better mobile display
<button type="button" class="navbar-toggle" 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>
<div class="container">
<div class="row">
<div class="col-md-3"><img class="img-responsive logo" src="images/logo.png" ></div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation" style="background:none; border:none;">
<div class="container-fluid">
<!-- toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<!-- 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">
<ul class="nav navbar-nav navbar-right text-center">
<li>Home</li>
<li>About us</li>
<li>Employers</li>
<li>Job Seekers</li>
<li>Testimonials</li>
<li>Contact us</li>
</ul>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav></div>
</div>
</div>
I'm using Bootstrap and I have a problem with the collapsing Navbar, it shows wrong on Chrome for Android, I tried stock navbar's without modifying and still happens (www.tasqueo.com)
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#page-top">Inicio</a></li>
<li><a class="page-scroll" href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>
Yes Drip is correct,
So I came to understand one thing.
we have to use https for secured links especially for maxcdn.bootstrapcdn.com
or
If you give http:// in this code the output is coming like above.
MY CODE:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#page-top">Inicio</a></li>
<li><a class="page-scroll" href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>
<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.2/js/bootstrap.min.js"></script>