This situation is strange. When I open my website (built on bootstrap) on small screens navbar is visible, but it should be collapse. When I click on button to collapse, it is still visible, when I click second time it is collapse just now. And since that it works good. But when I reload page, I still have this issue.
<div class=container>
<!--MENU-->
<nav style="border-bottom:1px solid #000;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menu_button" data-toggle="collapse" data-target=".nbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container nbar">
<ul class="nav nav-justified">
<li><a href=#>o nas</a></li>
<li><a href=#>galeria</a></li>
<li><a href=#>blog</a></li>
<li><a href=#>kontakt</a></li>
</ul>
</div>
</nav>
Add the class collapse in classes to your nav element. This way it will still be visible on mobile but the button will work like expected. If you only apply collapse as class and set the aria-expanded to false it will not be visible on mobile (but most likely also not in normal view).
<div class="container nbar collapse in" aria-expanded="true">
<ul class="nav nav-justified">
<!-- li's here -->
</ul>
</div>
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 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 am designing a webpage using bootstrap in which was working on navigation bar where I am trying to use 3 bars button and open the menu items on button click and close doing the same using the following code
<a id="menu-toggle" href="#menu-toggle" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<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-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Brand
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li> Home</li>
<li> Dashboard</li>
<li> Resources</li>
<li> Contact Us</li>
<li><a href="#loginModal" data-toggle="modal" >Login</a></li>
</ul>
</div>
</div>
</div>
using the above it displays complete navigation when the window is on maximum size and three bars are only visible when window size is reduced.
how can I make the three bars aligned to the right corner and show menu items on clicking it?
DEMO:Fiddle
Is this what you are looking for?
From http://getbootstrap.com/components/#navbar:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
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.
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.