My navbar collapse in smartphones but not colapse in ipad (portrait view).
I wish it also happened on ipad.
1 - On iphone:
http://i.imgur.com/t7BFgTL.png
2 - On ipad:
http://i.imgur.com/1jOxgo3.png
My code:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Torpedo Gratis</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Termos de uso</li>
<li>Contato</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
http://jsfiddle.net/vvz8koyh/
How can I do this?
Related
I want to have my site responsive to different screen sizes. At the moment I am testing my site at a width of 765px (and lower). What I would like to happen is for the menu to appear when I click the three bars, but nothing happens. No menu appears, just the 'brand name'.
I am using the bootstrap navigation for my menu.
This is a screenshot of the page (edited):
The Jquery code: - external file
#media screen and (min-width: 280px) and (max-width: 765px){
/* code goes here */
.primary {
color: orange !important;
font-size: 14px;
}
}
The color change is for testing sizes.
The HTML: - navigation only
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" 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>
<div class="navbar-header">
<a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Privacy</li>
<li>Terms</li>
<li>Copyright</li>
</ul>
</div><!-- navbar collapse -->
</div>
</nav>
What have I missed?
How I can I solve my issue?
Any help would be appreciated.
Thanks
One of the reasons would be messing up the order of jQuery and bootstrap.js. Bootstrap requires jQuery in order to run some events. So make sure your jquery script is before bootstrap.min.js or bootstrap.js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" 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>
<div class="navbar-header">
<a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Privacy</li>
<li>Terms</li>
<li>Copyright</li>
</ul>
</div><!-- navbar collapse -->
</div>
</nav>
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 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>
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>
I am using bootstrap and smoothscroll for my one page website. I am unsure how to get the section in the navbar to become active though if someone scrolls to it - any help on this? I know how to get it to highlight when clicked but not sure about position
<div class="navbar navbar-default 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>
<!-- nav bar -->
<div class="navbar-brand"><b>Merisa Lee</b></div>
</div>
<div class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Resume</li>
</div><!--/.nav-collapse -->
</div>
</div>