I am trying to put an image behind my navbar and have the navbar sit on the lower part of the image. I've tried adding position data to .navbar but it doesn't move it down. In addition, the bottom half of the image below the navbar is cut off. If I add height info to image the full image shows up, but in responsive mode the nav menus and main page overlap.
I've tried putting image as background to .bg-light and as image in html before the navbar.
I'm new to Bootstrap (which btw I really like), and any help appreciated.
.bg-light{
background-image:url("http://www.peterrussell.com/images/header2.jpg")!important;
background-repeat: no-repeat;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">PR</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown menubar">
<!-- various menu contents omitted for clarity -->
</li>
</ul>
</div>
</nav>
Related
This question already has an answer here:
Bootstrap navbar: nothing is displayed on smaller devices
(1 answer)
Closed 2 years ago.
experts - I'm trying to solve what I think should be a simple issue. I'm looking at https://getbootstrap.com/docs/5.0/components/navbar/#toggler and trying to implement the hamburger menu that shows up when the window is narrow (e.g. phone screen). When I make the window narrow, the button is still invisible. When I move the mouse to where the menu should be, the cursor turns into the pointer. When I click it, the button's outline becomes bold (so I can see it), and the drop down menu shows up. However, the hamburger menu icon is still invisible. What am I doing wrong? I feel like I pretty much copied the code verbatim from the documentation.
<html>
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js"
integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js"
integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"
crossorigin="anonymous"
></script>
<title>Hello, world</title>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand me-auto" style="margin-left: 20px" href="#"
>Example Name</a
>
<button
class="navbar-toggler bg-light"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Option 1</a
>
</li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 3</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
You are missing class navbar-light here
<nav class="navbar navbar-expand-lg bg-light">
it should be
<nav class="navbar navbar-expand-lg navbar-light bg-light">
This is the Bootstrap class definition in _navbar.scss
.navbar-light .navbar-toggler-icon {
background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}
Example
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
<title>Hello, world</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand me-auto" style="margin-left: 20px" href="#">Example Name</a
>
<button
class="navbar-toggler bg-light"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Option 1</a
>
</li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 3</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Update
where did you find _navbar.scss, and how did you know to look there?
I used the Chorme dev tools to find it. The below image explains how I found the missing class and the filename in which the class is mentioned. The file can be accessed in the Bootstrap Github source. Background image is mentioned here
...wouldn't have thought that navbar-light would control anything but
the color scheme of the navbar, let alone whether an icon appears
somewhere in it
Icon depends on the navbar background for better visibility. Thats why its dependent on navbar-light
Is there a default bootstrap way to make the navigation bar expand upwards instead of downwards?
My navbar has sticky-top but when you start the page the navbar is at the bottom of the page. While scrolling down the navbar eventually sticks to the top.
When the navbar is at the bottom of the page the menu should expand upwards instead of down.
Is there or something else in bootstrap to get the menu expand direcion to go up? If so I can just remove the class thats handeling this with javascript when the page is scrolled further then 100vh of the document.
I know about the .dropup but this only works with default dropdowns and now with navbars.
I know how to fix this with css but I was wondering if bootstrap 4 has a build in option for this.
.canvas{
height: 800px;
padding-top: 140px;
}
<div class="canvas">
<nav class="navbar navbar-dark bg-dark sticky-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-inverse" id="navbarSupportedContent">
<ul class="navbar-nav container">
<li data-menuanchor="Link1">Link1</li>
<li data-menuanchor="Link2">Link2</li>
<li data-menuanchor="Link3">Link3</li>
</ul>
</div>
</nav>
</div>
<!-- Ignore underneath -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Do you want like this?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="pos-f-t bg-dark">
<div class="collapse" id="navbarToggleExternalContent">
<ul class="navbar-nav container">
<li data-menuanchor="Link1">Link1</li>
<li data-menuanchor="Link2">Link2</li>
<li data-menuanchor="Link3">Link3</li>
</ul>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
For more info visit this link
I was trying something today. In a Bootstrap NavBar, if the logo (navbar-brand) is text only then the hamburger stays on the right. But if the logo is an image, the hamburger shifts to the left when you resize the browser. I can't figure this out.
I'm currently working on Angela Yu's Udemy course and completed the Bootstrap module. Now trying to use what I learned to re-create my own website.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="title">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="img/techsnazzy-logo.png" width="30%" height="30%" alt="TechSnazzy Logo" />
</a>
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse id=" navbarSupportedContent>
<ul class="navbar-nav mr-auto">
<li class="nav-item">Home</li>
</ul>
</div>
</nav>
</div>
</section>
enter image description here
Use flex-nowrap bootstrap class to your navbar. Read some information on the documentation here https://getbootstrap.com/docs/4.2/utilities/flex/#wrap
From w3schools
The flex-wrap property specifies whether the flexible items should
wrap or not.
Also avoid to use width and height on logo image because it creates extra space between logo and nav-item like this:
Use width: 30% on .navbar-brand instead and set width: 100% to logo image.
I updated your code, please check:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<section id="title">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light flex-nowrap">
<a class="navbar-brand" href="#" style="width: 30%;">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="TechSnazzy Logo" class="w-100" />
</a>
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse id=" navbarSupportedContent>
<ul class="navbar-nav mr-auto">
<li class="nav-item">Home</li>
</ul>
</div>
</nav>
</div>
</section>
The toggler is simply getting wrapped to the next line, based on the width of .navbar-brand and this is expected behavior for it to then be left-aligned. If you want the toggler to always be right-aligned, adding the class ml-auto appears to work.
<button class="navbar-toggler ml-auto" ...
See https://getbootstrap.com/docs/4.2/utilities/flex/#auto-margins
I'm using bootstrap and have a simple menu with two items
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<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="navbar1">
<ul class="nav navbar-nav navbar-right">
<li>item1</li>
<li>item2</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-1.10.2.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script></body></html>
1) When the browser is expanded I see buttons item1, item2 on the right side and it's working well
2) When the width of the browser is smaller, menu is collapsed
collapsed menu button
3) But, after clicking on the menu button, item1 and item2 are not shown.
Any idea what is wrong?
Did you import the jquery and the bootstrap js in the html. They are required for the navigation to work in responsive mode?
If not, try adding both of them in the html:
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
You need to import/add first the jquery and then the bootstrap js, because bootstrap js is dependent of the jquery.
Thanks a lot
I was linking to wrong *.js files :(
I didn't see any error, so I thought path were correct.
I have logo on left side of navbar and menu button on right side I want to change navbar orientation such that logo come to the right side and button for menu on left side my code is,
<nav class="navbar navbar-inverse navbar-default">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="./Styles/img/seha1.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</div>
</div>
</nav>
I tried one thing to use style navbar pull right on the outer side of this nav tag. and on button navbar pull left it work but result in increase the width of the navbar
Hopes for your suggestions
thanks
You was right, the solution mentioned in the next link do not work for Bootstrap 3:
How to implement RTL bootstrap 4 navbar?
However, I manage to solve your problem using a custom class named navbar-rtl that will customize the CSS style of the navbar for give it a RTL appearance. I hope this can help you:
#media(min-width:768px) {
.navbar-rtl .navbar-header {
float: right;
}
}
.navbar-rtl .navbar-brand {
float: right;
}
.navbar-rtl .navbar-toggle {
float: left;
}
.navbar-rtl .navbar-nav {
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 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">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-default navbar-rtl">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
Navbar
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</div>
</div>
</nav>