Below is picture of where I am now. I always face this problem of not being able to place things flexibly using bootstrap. In this case, I would like to place all the buttons in the center using justify-content: center, but the built-in class of navbar-expand-sm apparently defaults to justify-content: flex-start. What should I do? Thanks
![Text](https://stacenter image description here
<nav class="navbar bg-danger navbar-dark position-relative">
<div class="navbar-expand-sm">
<div class="container-xxl">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<!-- How to put the buttons in the middle? -->
<ul class="navbar-nav">
<li class="nav-item ml-3">
Login
</li>
<li class="nav-item">
Other Service
</li>
<li class="nav-item">
My Blog
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
</div>
</nav>
Either add justify-content-center next to navbar-expand-sm and see if this is working
Or trying adding the respective CSS
.navbar-expand-sm { justify-content: center !important; }
Related
We are having trouble with our responsive navigation covering content.
When the user toggles the navigation button, we want it to push the H1 and down the screen. I am thinking that our css for the body is effecting this. I cannot think of a decent solution for this, but I have considered having the navigation have a background, but it will still cover our "Denver Moving and Storage" content.
We're still learning how to use stackoverflow and we're thankful for any help you guys may be able to offer.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
This is our code:
<!-- container with bg img -->
<div class="cover">
<div class="container">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark d-flex" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
<!-- Nav end -->
</div>
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I don't know if your body CSS is affecting it or not, since you didn't post that out. But just by looking at your HTML, I see something wrong with your button toggler:
<button ... data-bs-toggle="collapse" data-bs-target="#responsive-navbar" />
Where did you get this kind of syntax from? In Bootstrap documentation, there is no -bs on the data attribute.
In order for the toggler to work properly, you need to remove -bs.
Minor improvement
Your "free estimate" button. Bootstrap has a button style to make an anchor tag look like a button. You don't need to wrap a button with an anchor tag. You can change it to something like:
<li class="nav-item">
<a class="btn btn-success" href="free-estimate.html">Free Estimate</a>
</li>
demo: https://jsfiddle.net/davidliang2008/p4ofdcae/8/
i have navbar with two menu, want to center menu icon and text but i dont't find the class to used.
how can i do it ?
im sorry for my bad english
here my code
<body class="text-center">
<div class="bg-login">
<div class="container">
<nav class="navbar navbar-dark sticky-top h-100">
<ul class="nav navbar-nav ml-auto nav-fill">
<li class="navbar-item">
<a class="navbar-brand" href="#" id="navlink">
<span data-feather="globe"></span>
EN-US
</a>
</li>
<li class="navbar-item">
<a class="navbar-brand" href="#">
<span data-feather="globe"></span>
en-uk
</a>
</li>
</ul>
</nav>
</div>
</div>
<script type="text/javascript">
feather.replace()
</script>
</body>
jsfiddle : https://jsfiddle.net/lexavey/jywL5ves/12/
im use
<ul class="nav navbar-nav ml-auto nav-fill">
because i want navigation i right side like this https://prnt.sc/wb1d3s
my problem is center verticaly https://prnt.sc/wb1hp1
add flex classes to the container div
<div class="container d-flex justify-content-center">
You can use these classes in Nav elements
<a class="navbar-brand d-flex align-items-center" href="#" id="navlink">
I have a bootstrap 4 navbar which is set to expand on lg and collapse on small devices. This works on a default navbar height but whenever I set the navbar to a height smaller than the default height the expand for the small devices doesnt work...
HTML-Code:
<header style="background-color: blue;color: white;font-size: 14px">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-default" style="height:30px">
<ul class="navbar-nav mr-auto flex-row justify-content-start">
<li class="nav-item">
<a href="#" class="mr-4">
<i class="fa fa-twitter-square fa-lg"></i>
</a>
</li>
</ul>
<a class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-road"></i>
</a>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto d-flex">
<li class="nav-item active d-inline">
<a class="nav-link" href="#">Home1 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active d-inline">
<a class="nav-link" href="#">Home2 <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
</div>
</header>
The content is also not set in the middle. What am I missing out?
The above shows the following. Even the expand fails
I want to define the height as 30px and i want the content to center vertically in the set height.
Actually Bootstrap navbar height is not defined by a CSS height property, but it changes with <a> padding and their content.
Try to add py-0 CSS class to <a> of your navbar to remove padding top and bottom.
See this example: https://codepen.io/navalex/pen/jOPXxor
Setting the height to 30px here is causing your issue:
<nav class="navbar navbar-expand-lg navbar-default" style="height:30px">
Here is a codepen that shows your code in a standard boostrap4 template with that inline style commented out:
codepen
I'm working on a Bootstrap 4 project where I have a nav bar with a centered logo and tagline, then some links to the left and right. It works pretty much as I would like, only ideally I would like the logo to stay centered after the nav links collapse.
Here is the code I have so far:
<nav class="navbar navbar-expand-lg navbar-light bg-white justify-content-between">
<div class="container-fluid ">
<div class="d-flex flex-column text-center order-lg-2">
<a class="navbar-brand" href="#">
<img src="http://via.placeholder.com/350x150" alt="">
</a>
<h2 class="tagline navbar-text">eco freindly clothing</h2>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse dual-nav w-50 order-lg-3">
<ul class="nav navbar-nav ml-auto">
<a class="nav-link" href="#">our ethics</a>
<a class="nav-link" href="#">contact</a>
<a class="nav-link" href="#">shop</a>
</ul>
</div>
<div class="navbar-collapse collapse dual-nav w-50 order-lg-1">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="">instagram</a></li>
<li class="nav-item"><a class="nav-link" href="">facebook</a></li>
<li class="nav-item"><a class="nav-link" href="">pinterest</a></li>
</ul>
</div>
</div>
</nav>
Currently after the links collapse the navbar toggle is on the right and logo and tagline on the left. How can I retain the logo and tagline in the center?
Here is a codeply
Thanks for any help!
The flexbox parent of the brand, logo, navbar toggler and 2 collapsable menus is .container-fluid, not the <nav>. So you need to do flex-direction: column; on small screens and flex-direction: row; with justify-content: space-between; on larger screens.
You can use bootstrap built-in classes for that too.
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid flex-column flex-lg-row justify-content-lg-between">
...
</div>
</nav>
fiddle: http://jsfiddle.net/aq9Laaew/144985/ (don't want to register with codeply)
You can do this really simply by creating a "centered" class for the div containing your logo and header text.
.centered {
margin:auto;
display:block;
}
Is this what you had in mind? See the codepen below.
https://www.codeply.com/go/nss8DJRYN3
I cannot think of a way to have the logo on the left of the navbar but for the items to be perfectly centered. I tried using margin auto for the items but then they move further right away from the center because of the logo taking up space.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse justify-content-center d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Second NavBar: -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav" style="margin: 0 auto;">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/DUmlhXetYE
As you can see from the preview link above, the 2nd navbar items are in the exact same position at the first navbar items. The problem is that I want these to be perfectly centered as though the logo was never there. Therefore I need the nav items to shift to the left to be perfectly centered and unaffected by the logo.
How can I do this? Hope that makes sense!
EDIT: Image to illustrate issue more clearly:
There are 2 way to fix your problem.
1) Logo class apply css position: absolute and parent class apply css position: relative;
2) Menu Class navbar-nav apply css transform: translateX(-80px); you can get navigation center align. as per your expectation.
Use absolute positioning:
.navbar-brand {
position: absolute;
left: 16px;
}
Please use Bootstrap 4 for this kind of predefined library of css.
Copy paste the below code you found the result
enter image description here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<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">WIDE-LOGO-TEXT</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">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
</body>
</html>
Best of luck :)