I would like to click "Page 1" on the top navbar on the following link, which would make the "Page 1" value on the filter bar active and highlighted. How can I do this?
Please see the jfiddle example: https://jsfiddle.net/qtcz2guk/1/
JavaScript
$('.nav a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
CSS
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #d65c14;
background: #000;
}
HTML
<title>Bootstrap Case</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">WebSiteName</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h3>
<p>A navigation bar is placed at the top of the page.</p>
<p>A filter bar is placed in the middle of the page.</p>
<p>Question: How can i make this work so that clicking "Page 1" on the top navbar makes the filter bar "Page 1" to be active and highlighted?</p>
</h3>
</div>
<div class="container">
<div id="menu" class="navbar navbar-default navbar-custom">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="javascript:void(0)" onclick="myFunctionall(); return false">FILTER BY /</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
</div>
</body>
Related
I am trying to remove the whitespace below this Bootstrap 3 navbar. I have tried setting margin-bottom to zero for the nav, and I have tried to do vertical-align: middle to both divs.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container-fluid">
Home
</div>
Setting a margin-bottom is the right way to go about it, you just need to increase the specificity of your css selector if your css is declared before your bootstrap link. One way to increase your selector specificity is by using nav.navbar as your selector.
See working example below:
nav.navbar {
margin-bottom: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container-fluid">
Home
</div>
I'm trying to make it where all links within the navbar are centered and if I had more links they will automatically be centered as well.
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
</nav>
Do you want you navbar to look like this??
<div class="container">
<header>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</nav>
</header>
</div>
May this helps you in understanding more.. http://www.bootply.com/CSI2KcCoEM
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-toggle {
z-index:3;
}
<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.1.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" role="navigation">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left">Left 1</li>
<li class="navbar-left">Left 2</li>
<li class="active">Center 1</li>
<li>Center 2</li>
<li>Center 3</li>
<li class="navbar-right">Right 2</li>
<li class="navbar-right">Right 1</li>
</ul>
</div>
</nav>
You can center your element setting giving ul the property of display:inline-block; and margin:0 auto; and then text-align:center; to its parent element
.navbar-nav{
float:none !important;
margin:0 auto;
display:inline-block;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid" style="text-align:center"> <!--- added text-align center --->
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
</nav>
DEMO
You can use : Class="Center-block"
<div class="container-fluid" class="Center-block">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>SHOP</li>
</ul>
</div>
Try this:
Make ul text-align:center; & add display: inline-block; to li a
I am making a portfolio site on codepen.io and my navbar collapse button won't work went the window size is decreased. Codepen: https://codepen.io/RayFitzgerald/full/vKgYoj/ Apologies for poorly written code. I am new.
HTML
<body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
Ray Fitzgerald
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">button
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfollio</li>
<li>Social</li>
</ul>
</div>
</div>
</nav>
<!-- Main Body & Text Items -->
<div class="container">
<div class="jumbotron">
<div class="intro-text" id="About">
My name is Ray Fitzgerald and I am a young Programmer and Web Developer
</div>
<div class="intro-text" id="Portfolio">
Portfolio
</div>
<div class="intro-text" id="Social">
Social
</div>
</div>
</div>
</body>
CSS
body{
padding-top: 50px;
}
.intro-text{
font-size: 30px;
}
#About{
height: 500px;
}
#Portfolio{
height: 500px;
}
#Social{
height: 500px;
}
No bootstrap.min.js and no JQuery library found in the link provided by you.
Add JQuery library then add bootstrap.min.js it will work.
Bootstrap navbar toggle component works only when Bootstrap Javascript is included in the code. Include bootstrap javascript file and it works like charm.
Reminder: Bootstrap JS works only if you include jQuery first.
Try this code as it is in application this code works me at my end
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sitename</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page sub</li>
<li>Page sub</li>
<li>Page sub</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
</div>
</body>
</html>
I am trying to make a Navbar for my site that has a dropdown menu on the left, image in the center, and collapsable item on the right. I am using bootstrap with less to style the navbar, but I am having trouble.
I have searched Stack overflow looking for ways to make this work, like this question, but the solutions there aren't working for me. I can't seem to get my image to line up so that its horizontal axis is centered with the dropdown menu, collapsable item, and navbar container. When I try the solutions like in the previously mentioned link, taking the image out of the flow of the page by maxing its position fixed, it always appears below the navigation bar. I can fix this for my screen by messing with the CSS attributes, but as soon as I resize the window things look awful.
Is there a way (possibly using less) to style the bootstrap navbar so that no matter what the size of the window is, I have an item on the left, image in center, and item on the right, all sharing a common horizontal center axis with the navbar?
EDIT
Okay, so I have changed my mind and decided to just add some links on the left, an image in the center still, and some links on the right. When the screen gets smaller, I want the links to collapse to the right offering a toggle button for a menu. The collapsing is working fine, but when the links are on the screen I want them to be horizontally centered in the nav bar, along with the image. The image right now is partially in the nav bar and partially out. I also want the image to slide to the left when the links collapse at smaller screen sizes. Here is my code right now:
Just a note that I am using django to serve the html, hence the syntax for the image src.
#logo-with-slogan {
max-width: 35%;
padding: 3% 0 3% 0;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
<nav class="navbar navbar-default" role="navigation">
<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>
</div>
<a class="navbar-brand" href="#">
<img id="logo-with-slogan" src="{% static " img/LogoWslogan.jpg " %}" />
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Item One</li>
<li>Item Two</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li>Login</li>
</ul>
</div>
</nav>
So you're looking to do something like this, with the image fitted:
HTML
<nav class="navbar navbar-default" role="navigation">
<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>
</div>
<a class="navbar-brand navbar-center" href="#">
<img src="http://placehold.it/100x40" alt="Logo Here">
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Item One</li>
<li>Item Two</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li>Login</li>
</ul>
</div>
</nav>
CSS
.navbar-brand {
float: none;
padding: 5px;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
Demo: JSFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Navbar bootstrap</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
Navigation bar is coolest component of bootstrap, you can easily create cool responsive navigation header for your website.
For information and detail please see this article..
steps to create navbar in bootstrap
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#testNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo / SiteName</a>
</div>
<div class="collapse navbar-collapse" id="testNavBar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</nav>
I have created a navabar with bootstrap 3. But the problem is that a weird border appears in my menu and the menu items don't take the full height of the navbar.
This is the code:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" rel="home" href="/" title="www.site.com">
<img src="/img/logo.png" alt="site.com"/>
</a>
<div class="navbar navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Link 1</li>
<li>Link 2</li>
</ul> <!-- end nav-->
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
<strong class="caret"></strong> Select language
<ul class="dropdown-menu dropdown-menu-right">
<li>NL</li>
<li>IL</li>
<li>ENG</li>
</ul>
</li>
</ul> <!-- end nav menu right -->
</div> <!-- end nav-collapse -->
</div> <!-- end container -->
</div> <!-- end navbar -->
I have added a sample over here: http://jsfiddle.net/yn9C6/
Where does this line come from?
Add the following styles in your CSS. It will override the default bootstrap style so that you won't get extra padding and unnecessary border.
.navbar-default .navbar-collapse, .navbar-default .navbar-form
{
border-color:transparent !important;
}
.navbar
{
margin-bottom:0px !important;
}
Create a css class to override those.
.test{
border-color:transparent;
margin-bottom:0px;
}
And add the class on div and ul.