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
Related
I am presently practising some stuff in expressJS and EJS rendering. I noticed that Bootstrap float-right class is not working on the navbar. I even tried d-flex but the result still remain the same. I don't if I am probably doing something wrong. Below is my code:
_header.ejs
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-success">
<a class="navbar-brand" href="/urls">TinyApp</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/urls">URLs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/urls/new">New URL</a>
</li>
</ul>
<li class="flaot-right">
<button class="btn btn-outline-danger me-2">
Logout
</button>
</li>
</div>
</div>
</nav>
</header>
This is the button I tried to float to the right
<li class="flaot-right">
<button class="btn btn-outline-danger me-2">
Logout
</button>
</li>
Nothing changes.
I think you should put float-right to the button and set the li tag class to standard (bootstrap 4) nav-item class. Additional we set float-right not flaot-right you have a typo ;-)
Second proposition to set button on the right side is set d-flex and flex-row-reverse to li class like this:
<li class="nav-item d-flex flex-row-reverse">
The code is commented in html code snippet below, You can simple switch if you like second proposition, but remember to remove float-right from button ;-) Good Luck!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Hello, float vs d-flex Bootstrap 4!</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-success">
<a class="navbar-brand" href="/urls">TinyApp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/urls">URLs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/urls/new">New URL</a>
</li>
</ul>
<!-- <li class="nav-item d-flex flex-row-reverse"> -->
<li class="nav-item">
<button class="btn btn-outline-danger me-2 float-right">
Logout
</button>
</li>
</div>
</div>
</nav>
</header>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>
</html>
I'm using Bootstrap4 and I want to have collapsible menu on mobile that is full width and a different colour to my navbar.
I have set a background color on navbar-collapse - so far so good. The problem is that the navbar has a padding which means that the collapseible also is subject to the padding. If I over-ride the padding of the navbar class then brand and burger menu are not aligned correctly.
This is my mark-up:
<nav class="navbar bg-light navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">
<div class="container">
<a class="navbar-brand nb-brand" href="/index.php">My Brand</a>
<button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse show" id="collapseCoreNav" style="">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>
</li>
</ul>
</div>
</div>
</nav>
This must be available out of the box without me hack the css?
To get this, don't use the default bg-light class - it applies !important which we want to avoid...
We can get this using a simple media query for this?
working snippet:
nav {
background-color: lightpink
}
#media screen and (max-width:595px) {
nav {
background-color: lightgreen
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">
<div class="container">
<a class="navbar-brand nb-brand" href="/index.php">My Brand</a>
<button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="navbar-collapse collapse show" id="collapseCoreNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<s
I followed this code having the left brand and center links :
.flex-fill {
flex:1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">Brand</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
When I try to push the brand a bit farther to the right the links are also moved to center in the remaining space.
Is there a way that I can move the brand further to the right and still have the links centered in the whole width of the window rather then the remaining space to the right of the brand?
By applying position: absolute to the "Brand" span so you can move it independently from the menu, also removing the useless div spacer and the d-flex classes because the navbar class is already using display : flex by default, I have applied a margin-left of 3rem to the "Brand" span with the help of bootstrap's ml-5 class helper just for demo purpose (you can set your own margin at your convenience).
Code below :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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.0.0/js/bootstrap.min.js"></script>
<style>
.flex-fill {
flex:1;
}
</style>
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand position-absolute ml-5">Brand</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center flex-fill">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Codeply</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
I'm using Bootstrap 4. I'd like the navbar-brand item (which is just a text element) to be on the far right. The menu (as normal) defaults to the left.
I've tried applying ml-auto, mx-auto, mr-auto, pull-right, etc. Nothing does what I want.
mx-auto was nice for the small screen. It put the navbar-brand centered when the hamburger menu is there. However, I need something that works when the regular menu is there.
Here is my code:
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
BSB Feedback
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item homeLink">
<a class="nav-link" href="/">
<span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/">Give Feedback</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/managefeedback/">Manage Feedback</a>
</li>
</ul>
</div>
</nav>
You can use the order-last class. However, you'll probably want the brand to be still first/top on mobile screens, so you can use order responsively like this...
navbar-brand order-md-last
https://www.codeply.com/go/Vq7ajCEfsg
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
BSB Feedback
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item homeLink">
<a class="nav-link" href="/">
<span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/">Give Feedback</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/managefeedback/">Manage Feedback</a>
</li>
</ul>
</div>
</nav>
More on Bootstrap ordering
An alternate option is to use flex-row-reverse responsively on the parent navbar. This will switch the order of the brand and nav links, but only on the non-mobile menu.
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu flex-md-row-reverse">
...
</nav>
And, if you want to keep the brand and toggler centered on mobile, you can wrap them in another div and still center with mx-auto: https://www.codeply.com/go/xXBdCHGAAN
Related:
Bootstrap 4 align navbar items to the right
Use .justify-content-md-end
<nav class="navbar navbar-expand navbar-dark bg-info">
<div class="container justify-content-md-end">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
how to put the navbar-brand on the right?
Add the order-md-last class to it (additionally to mx-auto that you experimented with).
That ordering class re-orders the element on screens that are medium (md) or larger. On smaller screens, no re-ordering happens and your mx-auto class gets applied.
Here's the code snippet with that order class applied:
<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" 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>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top main-menu">
BSB Feedback
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="mainNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item homeLink">
<a class="nav-link" href="/">
<span aria-hidden="true" class=" fa fa-spacer-right fa-home"></span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/">Give Feedback</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/managefeedback/">Manage Feedback</a>
</li>
</ul>
</div>
</nav>
This question already has answers here:
Bootstrap 4 navbar not collapsing on large screen
(4 answers)
Closed 4 years ago.
I'm new to Bootstrap. I installed Bootstrap 4 and took the Navbar code directly from Bootstrap 4 Navbar example code, but the code does not show the navigation - it only shows the menu icon. Could someone tell me what I'm doing wrong here please?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css">
<link rel="stylesheet" type="text/css" href="js/bootstrap.js">
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
</div>
</body>
</html>
The Bootstrap V4 Beta navbar is different to the Bootstrap V4 Alpha navbar.
Here's an example Bootstrap v4 Beta navbar taken from https://getbootstrap.com/docs/4.0/components/navbar/
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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 active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Not sure which version of bootstrap you are using. However you are missing Jquery CDN which will definitely break bootstrap.
Get rid of the Bootstrap JS at the start of your html doc and add this at the end. (jquery must be referenced before bootstrap JS.)
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
You are using the navbar of an old bootstrap version.
You need to get the template of bootstrap 4.
Follow the link:
https://getbootstrap.com/docs/4.0/components/navbar/