I'm trying to create a navbar using bootstrap that collapses at a certain viewport width. Now, what I'd like to see is that if the navbar is collapsed the navbar-brand disappears and the current active nav item (e.g 'Home', 'About' etc) will be visible on the left, thus enabling the visitor to see at which page they are.
I'm a total bootstrap noob, I had sort of expected to see a css class to be added when the navbar is collapsed/expanded but it doesn't work that way.
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse 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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body></html>
Not exactly "out of the box", but a little CSS will work with Bootstrap 4 (no jquery or dup markup)...
https://www.codeply.com/go/5T4icATKjl
This overrides the navbar collapse behavior to use visibility instead of display. This way we can control display of the active nav-item.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
.navbar .collapse {
visibility: hidden;
display: block;
}
.navbar .collapse.show {
visibility: visible;
}
#media (max-width: 767px) {
.navbar-nav .nav-link.active {
visibility: visible;
}
.collapsing {
transition: all 0.35s ease;
height: 40px !important;
}
.collapse:not(.show) .navbar-nav .nav-item:not(.active) {
display: none;
}
}
#media (min-width: 768px) {
.navbar .collapse .navbar-nav .nav-item {
visibility: visible;
}
}
</style>
<body>
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<div class="container">
<div class="collapse" id="navbar1">
<div class="navbar-nav flex-md-row">
<a class="nav-item navbar-brand" href="#">Project name</a>
<a class="nav-item nav-link" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link active" href="#">Contact</a>
</div>
</div>
<button class="navbar-toggler align-self-start" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
</body>
Notice the #media queries go along with the navbar-expand-md breakpoint of 768px. You can change that to use a diffferent breakpoint if needed.
navbar-expand-sm - 576px
navbar-expand-lg - 992px
navbar-expand-xl - 1200px
There is another solution using duplicate navbar-nav links, but that would require extra markup and I think the CSS only solution above is cleaner.
Have a try of this solution. Although this needs to be advanced to make able nav menu links be clickable.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse 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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$ = window.jQuery
$(document).ready(function(){
$('.navbar-brand').attr('data-brand',$('.navbar-brand').text())
var txtMenu = $('#navbar ul.navbar-nav .active').text();
$('.navbar-brand').text(txtMenu)
$('nav.navbar').on('hide.bs.collapse', function(){
var txtM = $('#navbar ul.navbar-nav .active').text();
$('.navbar-brand').text(txtM)
})
$('nav.navbar').on('show.bs.collapse', function(){
var txtB = $('.navbar-brand').attr('data-brand');
$('.navbar-brand').text(txtB)
})
})
</script>
</body></html>
Not available directly in bootstrap but you can write a small Javascript code here:
function displayActiveMenu() {
if ($(window).width() >= 768) {
// do nothing if we are not collapsed
return;
}
var element = $('li.active', '#navbar').clone();
$('#active-navbar').html(element);
}
displayActiveMenu(); // for the first time
$(window).on('resize', displayActiveMenu);
#media (max-width: 767px) {
#active-navbar {
float: right;
margin: 0;
}
#active-navbar>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse 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>
<!-- this is the new element -->
<ul class="nav navbar-nav visible-xs" id="active-navbar">
</ul>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Related
I am trying to make a webpage using Bootstrap. I am using .container-lg so that the content get 100% width when max-width is 767px. But is it not getting 100% width on screens with width less than 768px.
My Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module 09 - Panda Ecommerce usign Bootstrap</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- My Custom CSS Link -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container-lg">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="./images/logo.png" alt="Panda-ECommerce-Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#shoes">Shoes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#backpack">Backpack</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Bootstrap JavaScript CDN-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
How to fix this problem?
How can I get 100% width on screens less than 768px?
in Bootstrap we have this CSS style:
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
width: 100%;
padding-right: var(--bs-gutter-x,.75rem);
padding-left: var(--bs-gutter-x,.75rem);
margin-right: auto;
margin-left: auto;
for getting 100% width you should remove the padding, so you should use padding: 0 in your CSS style
I hope this solve your problem
Fixed this with the code below (SASS) so we can keep the padding.
/* Fix for bootstrap container */
.container-lg{
#include media-breakpoint-down(lg){
width: auto;
}
}
I am using B-4.0.0 this is very irritating I used almost all class which use in the document but text can't align in right corner this is very irritating please if anyone have a solution of these rearrange class give me the list it is very confusing to me
<!DOCTYPE html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hipstrify.io</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default ">
<div id="container">
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span><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">HIpstrify.io</a>
</div>
<div class="collapse navbar-collapse " id="navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="active "> Home</li>
<li> About</li>
<li> Our Team</li>
<li> Contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" > </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
First in you code snippet you used id="container" and that's needs to be class="container"
Then I have added the css position:absolute
to the navbar-brand
it will be always into right top because container is relative
<!DOCTYPE html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hipstrify.io</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.navbar-brand {
position:absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default ">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span><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">HIpstrify.io</a>
</div>
<div class="collapse navbar-collapse " id="navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="active "> Home</li>
<li> About</li>
<li> Our Team</li>
<li> Contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" > </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I am using the exact code suggested by Bootstrap:-
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" 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>
Brand
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
</nav>
Here is the JSFiddle.
Please note that I did use Bootstrap CSS and JS as external resources in my JSFiddle.
You need to ether use the v4 markup for your current version of bootstrap or to use v3 for your current markup
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Try now it is working for me your are using Bootstrap v4.0.0-beta.2 try to use 3.3.7
.bs-example{
margin: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Static Navbar</title>
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" 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>
Brand
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
I have this problem that my navbar toggle is not working, any idea what I do wrong? I did include the JavaScript and used the code from the Bootstrap example.
<html>
<head>
<title>NavBarTest</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Poiret+One" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavBar">
<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="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
I am trying to create a Nav Bar where the image is on the left and the nav bar is on the right - I am using bootstrap and I cannot get them to be placed side by side
The nav bar is below the image on the right
Here is my Current Code:
<!DOCTYPE html>
<html>
<head>
<title>Soni's Computer Repair</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<img src="Final.png" style="height:50px; width:auto;"/>
<button class="navbar-toggle" data-toggle="collapse" 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 class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Here LINK
You can always use the .navbar-brand class for this.
And also to place the img according to where you want. See the example I added the id brandImage and here is the css :
#brandImage{
width: 45px;
margin-top: -12px;
}