I'm trying to get my nav menu to collapse on mobile devices, but not on desktops.
Adding data-toggle="collapse" data-target="#navbarResponsive" seems to work, but then nav items also collapse when they're clicked on a desktop device.
<div class="py-0 px-3 fixed-top">
<nav class="navbar container navbar-transparent navbar-padded navbar-expand-md">
<a class="navbar-brand" href="#">
Logo
</a>
<button
class="navbar-toggler navbar-toggler-right d-md-none"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-uppercase" id="navbarResponsive">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" data-toggle="collapse" data-target="#navbarResponsive">
<a class="nav-link"href="#link1">link1</a>
</li>
<li class="nav-item" data-toggle="collapse" data-target="#navbarResponsive">
<a class="nav-link" href="#link2">link2</a>
</li>
</ul>
</div>
</nav>
</div>
Change the data-target to the mobile collapsed version: .navbar-collapse.show
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link" href="#link1">link1</a>
</li>
Demo: https://www.codeply.com/go/qBh0qJYekK
Related: How to hide collapsible Bootstrap 4 navbar on click
Related
I want to have the nav-bar such that the name of the company is on the left with items X and Y on the right. I tried using justify-content-right as suggested in bootstrap documentation but it doesn't work.
<header>
<nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
<a class="navbar-brand gold-text font-weight-bold" href="index.php">Company Name</a>
<!--Creates a clickable button with a toggle icon once the screen collapses-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex flex-row" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px; href="x.php">X <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px; href="y.php">Y<a>
</li>
</ul>
</div>
</nav>
<header>
Edit: I removed mr-auto class and that seemed to do the trick!
You forgot to close style attribute
<header>
<nav class="navbar navbar-expand-md fixed-top whitelight nav-masthead">
<a class="navbar-brand gold-text font-weight-bold" href="index.php">Company Name</a>
<!--Creates a clickable button with a toggle icon once the screen collapses-->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex flex-row" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px"; href="x.php">X <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-black" style="font-size:16px"; href="y.php">Y<a>
</li>
</ul>
</div>
</nav>
<header>
I have a navbar for bootstrap 4 and the nav-brand centered on computer window, but it will moving to dropdown when expand the toggle on mobile. Does there any way to make the brand fixed on top and center?
my navbar code on html:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-start" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i
class="fas fa-store mr-3"></i>Product
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="...">..</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="/" style="color: papayawhip"><i class="fas fa-home mr-3"></i>Home
<span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto" href="/"><img src="....." style="max-height: 60px" /></a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav"><li class="nav-item">
<a>...</a>
</li>
</ul>
</div>
</nav>
try doing this so the navbar-brand
<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>
so the navbar-brand is outside the navbarNavDropdown
i'm new to web development in general and I have this issue with Bootstrap:
the navbar on a large display
the button should be visible only on smaller screens (on the right and than collapse), but when the display gets larger - the button sticks to my navbar-logo instead of disappearing :\
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a href="#" class="navbar-brand"
><img src="img/logo.png" alt="Logo"
/></a>
<!-- dropdown btn -->
<button
class="navbar-toggle collapsed"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
>
<span class="navbar-toggler-icon"></span>
</button>
<!-- nav-links -->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
home
</li>
<li class="nav-item">
about
</li>
<li class="nav-item">
services
</li>
<li class="nav-item">
team
</li>
<li class="nav-item">
connect
</li>
</ul>
</div>
</div>
</nav>
You should change your <button class="navbar-toggle collapsed" to <button class="navbar-toggler"
With your code it states that the navbar is always in "collapsed" state, so it doesnt work. If my anwser helped pls upvote it and check is as answered!
The only issue here is with your button. I would make a slightly bigger change than the one suggested by Hakfo:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
This will mean that the button only appears on smaller screens and will disappear everywhere else.
How to set the bootstrap 4 navbar height in all viewport to 80px ?
I tried "min-height: 80px" in ".navbar" but the navbar is broken.
The sass code:
$navbar-bg: #26f3fd;
$navbar-height: 80px;
.navbar {
background-color: $navbar-bg;
min-height: $navbar-height;
}
The html code:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="main-navbar" data-toggle="sticky-onscroll">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbar-content">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="<?= esc_url(home_url('/')); ?>">Accueil</a>
</li>
</ul>
</div>
http://codepen.io/juavenel/pen/xqMPrQ/
The issue is because your navbar doesn't contain a navbar-brand so it's height collapses when the navbar stacks vertically.
This is a known issue that will be fixed in the beta release: https://github.com/twbs/bootstrap/pull/22230
The workaround is to include an empty placehold navbar-text or navbar-brand..
<nav class="navbar navbar-toggleable-md navbar-light bg-faded py-3" id="main-navbar">
<button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-text"> </span>
<div class="collapse navbar-collapse justify-content-md-center" id="navbar-content">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil</a>
</li>
</ul>
</div>
</nav>
http://www.codeply.com/go/FIKesgfDhL
Also, you can use vertical padding (py-3) instead to increase the height of the navbar and keep items vertically centered.
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 5 years ago.
I'm trying to align my navbar items to the right in bootstrap 4 alpha 6.
I'd like to have everything aligned right, except for the brand/title.
This is what my code looks like:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<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="#">Oliver</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#projects">Projects</a>
<a class="nav-item nav-link" href="#contact">Contact</a>
</div>
</div>
</nav>
You can add .justify-content-end to the .navbar-collapse element. And I'm assuming you also want to move the mobile toggle menu items to the right. To do that, add .align-items-end to .navbar-nav
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<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="#">Oliver</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav align-items-end">
<a class="nav-item nav-link active" href="#">About <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#projects">Projects</a>
<a class="nav-item nav-link" href="#contact">Contact</a>
</div>
</div>
</nav>