Bootstrap Navigation - Mobile - javascript

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>

Related

Bootstrap nav dropdown not working, what am I doing wrong?

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

Javascript elements in Bootstrap not working

I am a beginer in bootstrap. I have tried elements like navbar, dropdowns, modal, carousel etc. and none of them are working properly. I'm guessing, it is because of the JS files which are linked to it. Please help I require these elements for a project.
Thank you.
<div class="navbar navbar-default">
<div class="conatiner-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" 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="#" id="navbarLogo">MyWebsite</a>
</div>
<div class="collapse navbar-collapse" id="#navbar-collapse1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Projects</li>
<li>About us</li>
<li>Team</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script scr="js/bootstrap.min.js"></script>
this works fine you have a few issues, most are typos as pointed out by #Rachel Gallen but you are also setting the id for navbar-collapse1 to its css selector value. you should set it to id="navbar-collapse1", adding the # is only used when doing a document query for the element. please review this documentation for more on selectors https://api.jquery.com/category/selectors/
<html>
<body>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<div 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-collapse1" 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="#" id="navbarLogo">MyWebsite</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Projects</li>
<li>About us</li>
<li>Team</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Connect<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Instagram</li>
<li>Youtube</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

Logo at the top of navigation bar hide when scroll down

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

Bootstrap Vertical Menu Not Collapsing

I can't get a bootstrap vertical menu to collapse when using media queries.
There is too much code to put it all in here so I created a fiddle -
https://jsfiddle.net/DTcHh/
I don't mind re-writing the menu however it was the only way I could get this kind of menu. I am basing my technology off this website as this was the clients demand -
http://www.rhiwbeinaprm.co.uk/
I am trying to create their home page menu but in bootstrap so it is responsive. any help is greatly appreciated.
<div class="navbar">
<nav class="navbar navbar-default">
<div class="container-fluid"><div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="root">
</li><li class="dropdown-submenu"> <a tabindex="-1" href="#">Welcome</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Headteacher</a>
</li>
<li><a tabindex="-1" href="#">School Motto</a>
</li>
</ul>
</li>
</ul>
</div>
</div
The issue is, when scrolling below around 750px and below, the whole thing just disappears.
Where is the navigation button?
Add an id to: <div class="navbar-collapse collapse">
<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="#">Bootstrap 3</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
...
</div>
Update fiddle: https://jsfiddle.net/wZVanG/DTcHh/8623/
you have the following issues with your code:
You are duplicating something here by using a div and a nav both
with class navbar. I don't know why but that's weird.
Your collapsing div doesn't have id. the id will allow the button to target it for dropdown
The button that is supposed to hold the toggle for dropdown isn't in your code.
Since your collapsing div doesn't have an Id, your dropdown button wouldn't be pointing to anything
Your jsFiddle is different from the code posted here.... The following code is based on the one from your jsfiddle.
Working bootply
Your website takes a lot of time to load, to improve the user experience you might consider loading the js files after or creating a loading screen. The following code is for the navbar.
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
<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>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown active">
Getting started <b class="caret"></b>
<ul class="dropdown-menu">
<li>Download Bootstrap</li>
<li class="divider"></li>
<li class="dropdown-header">Examples</li>
<li>Basic template</li>
<li>Starter template</li>
<li>Grids</li>
<li>Jumbotron</li>
<li>Navbar</li>
<li>Sign-in page</li>
<li>Sticky footer</li>
<li>Offcanvas</li>
<li>Carousel</li>
<li>Theme</li>
<li class="divider"></li>
<li class="dropdown-header">Compatibility</li>
<li>Migrating from 2.x to 3.0</li>
<li>Browser support</li>
<li>Third party support</li>
</ul>
</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h1>Twitter Bootstrap 3.0</h1>
<p class="lead">Starter template with CSS and JS included.</p>
<p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
</div>
</div>

Large dropdown div will appear on click of button with class navbar-toggle

I want have something like navbar-toggle. When user click on it the large div in width and height open open up just like when clicking on navbar-header containg button with class "navbar-toggle"
Any idea of how can I do this using bootstrap?
I have something like this for simple drop down menu but it's a navbar I hope you understand me.
<div class="bs-example">
<nav id="myNavbar" style="width:95%;" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<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>
<a class="navbar-brand" href="#">Category</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>Home</li>
<li>Profile</li>
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
You can create it by jQuery click function. it's very simple.
jQuery(".classNameWhichWillShow").hide();
jQuery(".class_name_where_click").click(function(){
jQuery(".classNameWhichWillShow").slideToggle(100);
});

Categories