I can't get the bootstrap dropdown to work or the button when the menu collapses in tablet/mobile view. Here is my html for nav:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#"><img alt="brand" height="50" width="100" src="media/expend-logo.svg"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
These are the scripts:
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
What am I doing wrong? Thanks in advance!
You didn't included scripts properly. This is what worked for me.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#"><img alt="brand" height="50" width="100" src="media/expend-logo.svg"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
try this. hope it works.
<nav class="navbar navbar-default navbar-fix-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">
<img src="imgs/your image here" width="300" height="300" class="img-responsive">
</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" 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="nav-menu" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="page one">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
Home
</a>
</li>
<li>
<a href="another page">
About
</a>
</li>
<li>
<a href="third link">
Contact us
</a>
</li>
<li>
<div id="nav-options" class="btn-group pull-right hidden-xs">
<button type="button" class="btn btn-default dropdown-toggle thumbnail" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-education" aria-hidden="true"></span>
Academics
</button>
<ul class="dropdown-menu">
<li><p class="text-center"> Link page</p> </li>
<li role="separator" class="divider"></li>
<li><p class="text-center"> Linkpage 2</p></li>
<li role="separator" class="divider"></li>
<li><p class="text-center"> Link page 3</p></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
and remember this
Related
Hi i want to change the active tab with jquery
this is my code
so what is the solution please
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
<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 visible-xs" href="index.html">Titel</a>
</div>
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul id="collapsablenav" class="nav navbar-nav navbar-right">
<li class="active dropdown hidden-xs">
<a data-toggle="dropdown" href="#" class="dropdown-toggle"> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li id="CDCDC">
<a data-toggle="tab" href="#ABAB"></a>
</li>
<li class="divider"></li>
<li class="active" id="testclocalisation"><a data-toggle="tab" href="#hometab">AZ</a></li>
</ul>
</li>
<li class="active visible-xs"><a data-toggle="tab" href="#FFFF">F</a></li>
<li id="testFFFFFF"><a data-toggle="tab" href="#DDDDD">D</a></li>
<li id="testCCCCCC"><a data-toggle="tab" href="#CCCCCC">C</a></li>
<li id="testBBBBB"><a data-toggle="tab" href="#BBBBB">B</a></li>
<li id="testAAAAAA"><a data-toggle="tab" href="#AAAAA">A</a></li>
</ul>
</div>
</div>
</nav>
so what is the solution please
function changeTab( newID ) {
$('.navbar li').removeClass('active');
$('#' + newID ).addClass('active');
}
Now call this function on some event and pass the Id of the li you want to make active.
I have tried to highlight the active menu bar via the code below but can not figure out why it is not working. Would someone kindly lead me through. Thank you.
Both my HTML and my Js scripts are below:
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Payments</li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
$(".nav a").on("click", function(){
$(".nav li").removeClass("active");
$(this).parent().addClass("active");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Payments</li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
You need to remove your add and then add CSS to force making active for sub menu and so on
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
ul li ul li .active {background: lightskyblue; }
</style>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Transactions
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" class="active" >Payments</a></li>
<li>Make Receipts</li>
<li>Payments on Date</li>
<li>Valuable Customer</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SMS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Bulk SMS</li>
<li>Most Valuable SMS</li>
<li>SMS</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</nav>
I'm using bootstrap v3.3.4 to make navigation header...here is my DOM for navigation bar:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<img id="header-logo" src="/assets/img/dashboard/pencil_demo.png">
<hr id="header-nav">
<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="/">Home</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Profile <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Profile</li>
<li>My Billing</li>
<li>My Badges</li>
</ul>
</li>
<li class="dropdown">
Friends <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Friends</li>
<li>Search Friends</li>
<li>Invite Friends</li>
</ul>
</li>
<li>Ask Question</li>
<li>My Revision</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="circle-image-user" style="margin-top:-6px;"></span></li>
<li><span class="circle-image-school" style="margin-top:-6px;"></span></li>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
My current output:
How I can hide pencil-company logo when I scroll down? Let say the navbar will be like this when I scroll down:
When I go up back at the top...I want to keep the logo at the top of navigation bar...
Sample of company logo:
$(function() {
$(window).scroll(function() {
var x = $(window).scrollTop();
if (x >= 42) {
$("#header-logo").hide();
} else {
$("#header-logo").show();
}
});
});
#header-logo {
height: 100px;
}
body {
height: 5000px;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<img id="header-logo" src="http://farm4.static.flickr.com/3254/3322981237_7e723b609e.jpg">
<hr id="header-nav">
<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="/">Home</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Profile <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Profile
</li>
<li>My Billing
</li>
<li>My Badges
</li>
</ul>
</li>
<li class="dropdown">
Friends <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Friends
</li>
<li>Search Friends
</li>
<li>Invite Friends
</li>
</ul>
</li>
<li>Ask Question
</li>
<li>My Revision
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="circle-image-user" style="margin-top:-6px;"></span>
</li>
<li><span class="circle-image-school" style="margin-top:-6px;"></span>
</li>
<li>Dashboard
</li>
<li>Logout
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<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.4/js/bootstrap.min.js"></script>
</body>
</html>
Here is a working example:
window.onscroll = function (e)
{
$('#lion_image').hide();
}
.test {
height: 2000px;
}
#lion_image {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"><img src="http://www.emoticonswallpapers.com/avatar/animals/Lion-Side-Profile.jpg" alt="lion" id="lion_image"/>Let's start</div>
I think you can move your logo from navbar to outside the navbar and use .sticky-top in tag
As you can see the content stays out of the = box on mobile and when the page is rescaled
My current HTML
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand" title="Index" href="http://www.example.com">MP3Jungle</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/singles/">Singles</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/videos/">Videos</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/albums/">Albums</a>
<a class="navbar-brand" title="Singles" href="http://www.example.com/category/mixtapes/">Mixtapes</a>
</div>
<form class="navbar-form navbar-right" action="/" method="post" accept-charset="utf-8" role="search">
<div class="form-group">
<input type="text" name="s" id="s" class="form-control" placeholder="Search..."/>
</div>
</form>
</div>
</nav>
How can I get the content into the collapsed box? Thanks!
Bootstrap expects menu links to be a <ul> that you specify in the data-target of your collapsed button. It'll then take that UL and place it "under" the button in mobile version. Also, make sure that you're loading both the css and js for Bootstrap.
Compare to this working example:
Fiddle
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
How would I go about getting the social media buttons to align next to each other -- that is, horizontally rather than vertically -- in the mobile mode on the drop down menu?
The icons are within a standard bootstrap nav bar, aligned to the right side of the bar.
Whenever someone clicks on the mobile drop down menu it currently lists these icons vertically. I want them horizontal.
Here is my code for the menu div.
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div class="navbar navbar-inverse 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="index.html">Welcome </a> </div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Broadmark Partners</li>
<li>Blog</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://facebook.com/" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a href="http://twitter.com/" class="btn btn-social-icon btn-twitter" >
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/in/" class="btn btn-social-icon btn-linkedin">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="https://github.com/broadmarkio" class="btn btn-social-icon btn-github">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<h3 class="text-muted"> </h3>
<p> </p>
</div>
you just need to apply the nav-pills-class to the list like so.
<ul class="nav navbar-nav navbar-right nav-pills">
see your sample working here: http://www.bootply.com/pm5SsVZrOi