Because I am using this Navbar as a site editing tool rather than a normal Navbar, I require a solution that doesn't involve editing the Bootstrap code and instead use some type of style="" edit instead as I am including the Bootstrap code from elsewhere to make things light, so I can use it on multiple sites.
I am trying to stop the fixed to top Navbar from overlaying the top of the website, this is showing the Logo and top links under the Navbar, instead I am looking to try to layer it on top until the user scrolls down where the Navbar will then cover the website as it should on its way down. Here is the code I am using, if anybody can help me find a solution I would be appreciative!
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<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">Link <span class="sr-only">(current)</span></li>
<li>Link</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>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</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>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I have attempted to introduce:
style="padding-top:100px;" And changed the px but with no luck, this then totally covers the top of the websites.
You just have to apply the padding style at the body instead the div:
<body style="padding-top: 100px">
It's given in the docs: http://getbootstrap.com/components/#navbar-fixed-top :-)
Body padding required
The fixed navbar will overlay your other
content, unless you add padding to the top of the <body>. Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
body { padding-top: 70px; }
Make sure to include this after the
core Bootstrap CSS.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
More of a backend guy, just looking for some direction on customizing bootstrap in XS to basically act like the amazon phone app.
I want the nav expand menu button to have the nav pop out from the left instead of dropping down. Is there a good way to do this in bootstrap, or is it best to just write something custom? If custom is best, would it be best to try and override the data-target/data-toggle or just do a js onClick and run my code?
There will also be expandable sub menu's/drop down menus like Amazons instant video and apps, is that something best written custom or is there a good way to do it in bootstrap? I know the drop downs in bootstrap, but not really seeing how to expand a menu option.
Thanx ahead of time.
Here's an example of using Bootstrap components with custom code and jQuerys toggleClass to initiate the mobile off-canvas menu. If you're going to use a Framework you should use as much built in functionality as possible which I think this example does: jsfiddle
<div class="container-fluid">
<nav class="navbar navbar-fixed-top navbar-default">
<div class="navbar-header">
<button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle"><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>
<div class="navbar-default side-collapse in">
<nav role="navigation" class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown"> Dropdown <i class="fa fa-chevron-down"></i>
<ul class="dropdown-menu">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li role="separator" class="divider"></li>
<li>Link
</li>
<li role="separator" class="divider"></li>
<li>Link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown"> Dropdown <i class="fa fa-chevron-down"></i>
<ul class="dropdown-menu">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li role="separator" class="divider"></li>
<li>Link
</li>
<li role="separator" class="divider"></li>
<li>Link
</li>
</ul>
</li>
</ul>
</nav>
</div>
</nav>
<div class="side-collapse-container">
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button> <strong>Warning!</strong> This is an Off-Canvas Mobile Menu</div>
</div>
</div>
So I've started to build my first website and I'm trying out the Bootstrap 3 framework.
The navbar I've chosen is setup to respond to the screen size so eventually it collapses into to a little button for use on tablets and mobile.
I don't really like the default position of the collapsed navbar items though; they appear immediately next to the logo when I'd prefer it them to start below the logo. I.e. in the blue dashed area in this screen shot:
The narrower the screen width, the more problematic it becomes:
The navbar collapses at a width of 767px; I've had a poke around the bootstrap css and noticed there are a bunch of #media queries, but not sure which is the one that will help me, nor am I sure how to get the navbar items to drop below the logo when its collapsed.
Here's my navigation bit of my html so far (and obviously css / js is being picked up from the bootstrap files).
<header>
<!-- navigation -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="MyLogo">LOGO HERE</a>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>PAGE 1</li>
<li>PAGE 2</li>
<li>PAGE 3</li>
<li>PAGE 4</li>
<li>PAGE 5</li>
</ul>
</div>
</div>
</div>
</header>
I had the same problem using your code on jfiddle. Some of your code is off. Bootstrap, by default is supposed to do what you want it to do - the collapsed should be coming down under the logo.
You just left off the navbar-header div surrounding the buttons and brand.. see below:
<header>
<!-- navigation -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header"><!-- navbar-header should go here -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="MyLogo">LOGO HERE</a>
</div><!--header should end here -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>PAGE 1</li>
<li>PAGE 2</li>
<li>PAGE 3</li>
<li>PAGE 4</li>
<li>PAGE 5</li>
</ul>
</div>
</div>
</div>
I used bootstrap in my main menu and since my project has a lot of pages, subpages and sub-subpages I used the bootstrap dropdownmenu to navigate through this.
My client now wants to be able to go to the link associated with the dropdown-button itself too, rather than the childen. My client has text on a page called 'customer support', and text on subpages (children). Ideally I want the user to first click a dropdownmenu button (ex. "Customer service"), and a dropdownmenu opens up (which Bootstrap does), and on a second click be able to go to the link associated with that dropdownmenu button (ex. "/customer-service").
I'll share some code to make it a bit more understandable:
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown"> Dropdown <span class="caret"></span>
<!-- click this menu-button once, and the submenu below opens, click this menu-button twice and you go to /customer-service -->
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<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>Separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
http://jsfiddle.net/kozog9rx/2/
(be sure to read the comment in the HTML and give the "Result-view" enough space/width so the menu appears)
Well, assuming you are using bootstrap 3.2.0 Here's the code:
<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>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
What i'm doing is making the carat open the menu, and the text href to wherever you want it to go to.
I have a group of tabs on the left of the navbar, and a button and dropdown on the far right. my paths seem to be correct and I followed the code as stated on getbootstrap docs. The problem is the dropdown menu does not open on click. nothing happens.
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<body>
<div id="MainWrap">
<div class="container">
<h1 href="#" c;ass="text-muted"></h1>
<div class="navbar navbar-default" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav nav-tabs">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Our Staff</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="</a></li>
<li class="dropdown">
Resources<b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
</body>
Console log errors I am getting:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/Users//Desktop/C%20Website/js/jquery-1.11.0.min
Uncaught Error: Bootstrap's JavaScript requires jQuery
<script src="js/jquery-1.11.0.min.js"></script>
Perhaps you should add ".js" to the src...
Just to add another suggestion... Try using CDN hosted versions of jQuery and Bootstrap. This will help path errors and also enhance the speed.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
I'm having an issue getting the collapsible navigation bar to load on a page - the button appears when you shrink the screen, but when I click on it, nothing happens. The console isn't throwing me any errors, so I'm assuming there must be something wrong with my css/javascript, but I don't really know what.
If it matters, I'm linking through with the Bootstrap CDN on my page - I don't know if that requires me to include the plugins manually or not (I don't think it would but I'm not sure).
The following is my HTML and Javascript link-ins:
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Operation Pulse</li>
<li>Forum</li>
<li class="dropdown">
Media <b class="caret"></b>
<ul class="dropdown-menu">
<li>News & Updates</li>
<li>Indie Pulse</li>
<li>rec</li>
<li>Geeks and Giggles</li>
<li class="divider"></li>
<li>Podcasts</li>
</ul>
</li>
<li class="dropdown">
Info <b class="caret"></b>
<ul class="dropdown-menu">
<li>About Us</li>
<li>FAQ</li>
<li>Crew</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</div>
JS
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script>
Change the data-target= in the button to.. .navbar-collapse
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
Most of the time, boostrap.js file reference two times.
In our case, it was referenced twice, one in master and others by mistake in the inner pages (Page layout in SharePoint Case).