I'm having an issue with my Bootstrap navbar button not showing the dropdown links when the screen is collapsed.
I have a navbar brand that hides on collapse but ever since i added a scrolling nav plugin my links dont show in dropdown. It is is also acting strangely in that if the page is below the level of the top section clicking the button just scrolls up to the top yet i cannot see what the conflict is.
here is a fiddle:
jsfiddle
My HTML is like so:
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<div id="twitterbootstrap">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<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>
<a class="brand hidden-desktop page-scroll" href="#page-top">BrandHidden</a>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="brand visible-desktop page-scroll" href="#page-top">BrandVisible</a></li>
<li><a class="page-scroll" href="#page-top">Home</a></li>
<li><a class="page-scroll" href="#about">Link 1</a></li>
<li><a class="page-scroll" href="#services">Link 2</a></li>
<li><a class="page-scroll" href="#contact">Link 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
</body>
Any ideas would be greatly appreciated.
Edit: its complicated to me.... dont laugh im only new ;)
The problem is in your custom css. In the rule that you added for .hidden-desktop you added position: relative. I'm not sure why you need position relative anyway but what it's doing is capturing the click event for the entire navbar. You can see this by adding pointer-events: none to the rule and it will magically work.
The pointer-events property in css basically says to allow the mouse to penetrate the layers of your design and register click events on things that are otherwise obstructed by some higher layer. Although adding pointer-events: none works to demonstrate the problem here, it only has IE support in version 11, so I recommend removing the position: relative property. There is no logical reason I can think to have position set given that the display is set to none.
.hidden-desktop {
display: none !important;
position:relative; /*remove this*/
}
Here's the updated fiddle: http://jsfiddle.net/jme11/m3m99fhr/7/. I linked the Bootstrap files now in the external resources so that you can see it working in fiddle itself.
How about bootstrap.css?
Try this one:http://jsfiddle.net/iboylmz/McHUc/41/
Related
The toggle button is not working to reveal the collapsed elements and I do not know why. When the window is resized the toggle button is displayed but upon pressing, nothing happens. This is my first time using Bootstrap so I may have made some very obvious and ridiculous mistakes. Any help is appreciated.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
<div class="page">
<div class="nav navbar-default">
<div class="container"></div>
<li>
<a class="logo" href="#1"></a>
</li>
<li>
<a class="cart" href="#7"></a>
</li>
<button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul>
<li class="products">Products
</li>
<li class="store">Store
</li>
<li class="about">About Us
</li>
<li class="discover">Discover
</li>
<li class="support">Support
</li>
</ul>
</div>
</div>
</div>
</div>
<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>
You have at least a few problems: See the docs for the Navbar.
data-toggle="dropdown" should be data-toggle="collapse"
data-target="navHeaderCollapse" should be data-target=".navHeaderCollapse"
Fixing these two issues should allow the menu to open and close. You may want to utilize the default structure to avoid (or at least be aware of) additional issues live enclosing your toggle button inside the navbar-header class as well as the .nav & .navbar-nav classes on your menu list items. Also your container isn't doing anything currently, it should surround the navbar-header / list items.
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
<div class="page">
<div class="nav navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
LOGO
<span class="glyphicon glyphicon-shopping-cart"></span>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li class="products">Products
</li>
<li class="store">Store
</li>
<li class="about">About Us
</li>
<li class="discover">Discover
</li>
<li class="support">Support
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<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>
The reason that your navbar toggle button isn't working is that you've missed 3 things.
You need to change data-toggle="dropdown" to data-toggle="collapse".
You need to change data-target="navHeaderCollapse" to data-target="#navHeaderCollapse".
You need to add id="navHeaderCollapse" to the div with the collapse css class.
Once you have all these elements the toggle will work. There are some other things missing like the navbar-header div, your container being closed in the wrong spot and the first <li> elements not being within an <ul> tag.
Here is a jsfiddle with your code working: https://jsfiddle.net/4syh8nth/9/
Try using the # symbol in data-target attribute to refer on an element whose using this ID.
<button class="navbar-toggle" data-toggle="dropdown" data-target="#navHeaderCollapse">
And add an ID attribute to your .navbar-collapse element
<div id="navHeaderCollapse" class="collapse navbar-collapse">
Refer to the docs
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap
Collapse plugin
You may make this as like i did by bootstrap. some classes in your code i didn't recognize its bootstrap included or not. thanks
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="products">Products</li>
<li class="store">Store</li>
<li class="about">About Us</li>
<li class="discover">Discover</li>
<li class="support">Support</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
I had faced the same issue.
I used data-toggle cdn in the head section and it worked in my case. For more info check the link.
Use https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css in head part of HTML.
Check whether you have used all related CDNs.
I have a webpage with 3 items in the navbar; Products, Partners and Support. I have moved this navbar to a seperate .html file; navbar.html and called it using load-navbar.js. I have done this to avoid code repetition. Is it possible to use javascript to show which navbar item is active? Is it possible to use switch statements to do this. If yes, how can I do this?
navbar.html
<nav class="navbar navbar-default mc-header navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img id="logo" src="images/logo.svg" alt="Company Logo">
</div>
<div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing">
<ul class="nav navbar-nav navbar-right" >
<li><a class="mc-active" href="Items/products.html">Products</a></li>
<li>Partners</li>
<li>Support</li>
</ul>
</div>
</nav>
load-navbar.js
$(function(){
$("#main-nav").load("main-nav.html");
});
The mc-active class in products is added to the class to show that products.html is the active class.
You can store the current url in a variable:
var x = $(location).attr('href');
And then assign an "active" class to a link if the href matches the url, or if it's href is contained within the url, whichever fits your situation. You can use this link:
css-tricks link
or this search:
jquery active link google
for more info that might fit your situation better. I don't think you'd need more than a simple comparison between the window href and link href. Also I'd definitely follow the advice given in the comments.
I have the below menu + toggle button works great on any browsers on Android but iOS....
I can click on the button then the menu will show up & hide right away after showing.
I used a lot of work-around & fix, disable touchstart in bootstrap.js or changing z-index of navbar. . . but it won't help me anyway with this problem.
The menu seems to show up after click the toggle button but I can't see anything. I have to touch the toggle button again as closing the menu & touch again to open the menu again.
You guy can have a check if you have iPhone at http://getheadsup.com/
Thank you for your concern about my problem.
<div id="header-wrapper" class="header fadeIn">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid row">
<div class="navbar-header">
<a class="navbar-brand" href="index.html#top"></a>
</div>
<div class="navbar-footer">
<a href='order.php' class='navbar-preorder'>PRE ORDER</a>
<!-- hamburger icon -->
<button type="button" class="navbar-toggle collapsed menu-btn">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<!-- <span class="icon-bar middle-bar"></span>-->
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="collapse navbar-collapse main-menu">
<ul class="nav navbar-nav">
<li>
Alexa</li>
<li>
Technology</li>
<li id="spin">
Tech Specs</li>
<li>
FAQ</li>
<li>
Blog</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Take a look at
<div class="collapse navbar-collapse main-menu">
The size is almost nothing, height = 1px.
Since it contains the menu, nothing get displayed.
I don't know what CSS is going in there, but to see it working just set it to overflow: visible
Thats probably a workaround as it might cause issues elsewhere.
To solve it the right way the container need to have its children participating in the layout flow (e.g: not doing position:absolute or float: right/left).
the problem seems to be in the container (div.main-menu). it's positioned as fixed with no height or width.
try to add height and width to it.
#header-wrapper .navbar .container-fluid .navbar-collapse {
height: 100%;
width: 100%;
}
this worked for me.
I had the same issue in iOS and fixed it by changing the button class collapsed to the following jQuery code:
$('your_section_class').toggleClass('collapse')
I'm quite new to Angular/Bootstrap and I downloaded a template that I'm trying to modify and add features to go about learning.
I'm trying to have a collapsible sub-menu as such
<ul class="nav nav-sidebar">
<li ng-class="{active: $state.includes('overview')}"><a ui-sref="overview">Overview <span class="sr-only">(current)</span></a></li>
<li>Products</li> <!-- a click on this should expand the div below... -->
<div class="collapse" id="products">
<ul>
<div ng-repeat="itemType in itemTypes">
<li>{{itemType.Description}}</li>
</div>
</ul>
</div>
</ul>
My attempt is from this example.
Instead of a button, I want the animation to be triggered by a click on an anchor.
I read a version of Bootstrap had problems with animation so I upgraded to bootstrap#3.3.6
Any ideas ?
Thanks.
EDIT: By not working I mean, nothing is happening. I can use an ng-show directive, but there's no smooth animation.
As the docs says,
You can use a link with the href attribute, or a button with the data-target attribute. In both cases, the data-toggle="collapse" is required.
Change the anchor tag to use the href attribute instead of data-target.
Products
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav nav-sidebar">
<li ng-class="{active: $state.includes('overview')}"><a ui-sref="overview">Overview <span class="sr-only">(current)</span></a></li>
<li>Products</li> <!-- a click on this should expand the div below... -->
<div class="collapse" id="products">
<ul>
<div ng-repeat="itemType in itemTypes">
<li>{{itemType.Description}}</li>
</div>
</ul>
</div>
</ul>
I ended up adding jQuery and bootstrap to my 'serve' gulp task and this works, without changing the view's code at all.
I want to create a floating footer menu using JavaScript and HTML & CSS with other-sub menus for elements in the footer menu. The sub-menus also should float on mouse hoover. Is there any way i can fulfill these needs. Please help and Thank you.
It sounds like you're fairly new to CSS (no offence if you're not!)
To make it easier, I'd suggest using the Twitter Bootstrap framework - it'll save you a lot of time if you're new to CSS and save you from many common pitfalls.
Bootstrap has a Navbar component, which you can be fixed to the bottom of the site. I've attached some sample code, but I'd strongly recommend visiting the Bootstrap website and learning your way around - it'll be well worth your effort.
HTML (make sure you include the bootstrap stylesheet and javascript)
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="navbar-inner">
<div class="container">
<button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Submenu Example
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
Normal Item
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
Dropup Item
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>