The Problem: Navbar STARTS as open. On collapse, the links still show, only the background collapses. I've made sure I'm using transitions and I've got all the bootstrap javascript in there, the bootstrap css and some of my own styling on top, but nothing that I think would affect the navbar.
What it looks like default
What it looks likes closed
My Code:
<body>
<!--Navbar -->
<div class="contactUs">
<p>
<span class="glyphicon glyphicon-phone-alt"></span> 00000000
</p>
</div>
<!-- logo -->
<!-- end logo -->
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<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 main-logo pull-left" href="index.html">SX Storage Essex Benfleet</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
Self Storage
</li>
<li>
Business Storage
</li>
<li>
Prices
</li>
<li>
Packaging
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- End navbar -->
Thanks for your help, something was missing from bootstrap css. I just included the CDN. Not sure how that happened, I don't touch the bootstrap css - I'm going to put it down to zombie-mode late night keyboard mashing.
Related
Just checked my website via phone, and noticed that the page navigation menu does not closing then pressing any link. And i cant understand why and there is the problem. Cant find the cause of the problem... I am looking at the scrip code below to understand but...
site: www.scorpion3d.com
This is whole menu block which i have:
<div class="menu-block">
<!-- Container -->
<div class="container">
<!-- Ownavigation -->
<nav class="navbar ownavigation">
<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.html"><span><img src="assets/images/logo.png" alt="logo" height="64" width="64"></span>Scorpion3D</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">PRADŽIA</li>
<li>PASLAUGOS</li>
<!-- <li>Features</li> -->
<!-- <li>DARBAI</li> -->
<li class="dropdown">
Blog
</li>
<li>KAINORAŠTIS</li>
<li>APIE MUS</li>
<li>KONTAKTAI</li>
</ul>
</div>
<div id="loginpanel" class="desktop-hide">
<div class="right" id="toggle">
<a id="slideit" href="#slidepanel"><i class="fo-icons fa fa-inbox"></i></a>
<a id="closeit" href="#slidepanel"><i class="fo-icons fa fa-close"></i></a>
</div>
</div>
</nav><!-- Ownavigation /- -->
</div><!-- Container /- -->
</div><!-- Menu Block /- -->
The drop down menu opens and closes properly on a resized monitor on my side. Try clear your cache. It could be that or possibly you have linked your bootstrap and jquery files wrong.
Include your jquery file first, then bootstrap both in the footer. Ensure nothing is in the header, or that duplicates are present.
You have a wrong path for jquery.min.js (404).
Make sure the script jquery.min.js is in the assets/js folder.
the correct answer was to include some additional code to html or js,
in this case I chose to include to HTML instead of:
<li class="active">PRADŽIA</li>
changed to all links like per example:
PRADŽIA</li>
Now mobile version menu close instantly then any link in the menu pressed.
don't forget to add after menu end single div:
<div class="collapse" id="navbar"></div>
I have a navbar from bootstrap and one of the menus is a dropdown that allows me to select a course.
The first pic is what it looks like on my desktop when I click on courses, working perfectly fine.
When I try to select it on mobile, nothing happens.
This is the navbar code
And the scripts I include.
Any insight on this issue would be much appreciated
Here yo go with a solution https://jsfiddle.net/rskte8s5/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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" href="#">Brand</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="active">Home <span class="sr-only">(current)</span></li>
<li class="dropdown">
Course <span class="caret"></span>
<ul class="dropdown-menu">
<li>Accounting & Information System</li>
<li>Aerospace Engineering</li>
<li>Business Information Technology</li>
<li>Computer Science</li>
<li>Electrical & Computer Engineering</li>
<li>Finance</li>
<li>Math</li>
</ul>
</li>
<li class="active">Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Here is the link, I think you might find something that will work for you.
Drop-Down Menu not working on mobile devices
I am quite new to bootstrap. I am trying to develop quite a minimalistic site and I only got 3 menu items: my image logo, one link and one button. My menu is collapsing when using mobile which shouldn't be necessary as all three items should fit a small screen. Could someone please help me understand how I can disable the collapse but keep the menu responsive?
This is my code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png"/></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Kom igång</li>
<li>
<p class="navbar-btn">
<strong>Kundinlogg</strong>
</p>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Thanks alot in advance!
Jacob
--you should have to remove collapse from
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-collapse">
<div class="collapse navbar-collapse">
or you can use
.navbar-collapse, .navbar-collapse.collapse {
overflow: visible;}
.navbar-toggle {
display: none;}
--also you can check This answer will help you well about disabling collapse and keeping your menu responsive
Prevent menu from collapsing in 768px display CSS media query
I'm trying to use scrollspy for my fixed header nav, and it works correctly when I initially load the page.
However, if I click one of the links in the header to jump to that section, that link that I just clicked will no longer show as active when I scroll around the page past it. All the links behave this way, I don't know why they will work initially but then stop working once clicked.
<body data-spy="scroll" data-target="#myNav">
<header class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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">Example Brand</a>
</div>
<div id="myNav" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Courses</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<h1 id="home">Home Heading</h1>
...
<div id="course" class="course-header">Courses</div>
...
<h2 id="contact">Contact Us</h2>
Also if I refresh the page, it goes back to working correctly again.
So, I know this is a common question, but I've tried everything and can't get it to work. When I click on it nothing happens. Bootstrap and JQuery load.
JFiddle: http://jsfiddle.net/qqS4F/
Code:
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /.btn -->
<a class="brand" href="#">S&J Bakery</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
About
</li>
<li class="dropdown" id="#dd">
<a href="#dd" class="dropdown-toggle" data-toggle="dropdown" role="button">
Menu
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li href="#lunch">Lunch</li>
<li class="divider"></li>
<li href="#cake">Cake</li>
</ul>
</li>
<li>
Contact Us
</li>
<li>
Sponsers
</li>
</ul>
<!-- /.nav -->
</div>
<!-- ./nav-collapse -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar navbar-inverse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar-wrapper -->
Tips48,
It looks like you are using a version of the bootstrap css file that doesn't account for dropdown menus. I've updated the fiddle with the correct items and it is working properly for me (see screenshot below):
In case you need the link to the css file, here it is. Also, you can grab the latest version from the main site at http://twitter.github.io/bootstrap/index.html One nice feature is the "Customize" section, where you can tweak what you want/don't want in your project. Hopefully this helps.
Good luck and have fun!