I'm new to flex, and my boss wants me to use only flexbox for this! the problem is I am trying to get the nav menu to show in it's own row, but it keeps wrapping to be right next to the search icon, etc. I have it in it's own row in the code, so I don't know why it's appearing side by side
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="d-flex flex-row w-100">
<div class="flex-column">
company logo here
</div>
<div class="flex-column">
<a class="navbar-brand" href="#">
company name here
</a>
</div>
<div class="flex-column justify-content-end">
search icon here
</div>
<div class="flex-column justify-content-end">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="d-flex flex-row w-100">
<div class="flex-column justify-content-start">
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</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>
You just need to add a CSS rule :
.navbar-expand-lg > .container {
flex-wrap:wrap
}
Fiddle
I assume that you mean that the button of the menu keeps appearing next to the search icon. That's because the button is in the same row as the search icon. You are right that the menu itself is in its own row, but the button is not.
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 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>
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
I am working with the Bootstrap 4 default navbar and I just want to add a collapsing menu that is positioned on the right, not the left, when not collapsed.
I have tried adding text-right and float-right, but neither are actually moving the menu to the right.
Here is a bootply showing the issue.
Here also is a snippet, since StackOverflow wants me to use one, though I don't think it'll be wide enough to show the non-collapsed menu:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse float-right">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
Add ml-auto class to ul tag containing menu
<ul class="nav navbar-nav ml-auto">
<li class="active nav-item">
Homes
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
The element .collapse.navbar-collapse requires .justify-content-end class as it is positioned with flex (display: flex) and takes full remaining width of your navbar.
The other answers with .ml-auto are perfectly valid. The difference between these two is that .justify-content-end will make all elements inside navbar-collapse stick to the right, whereas .ml-auto will only do the same for the ones inserted after your ul.nav.nav-bar, so the ones on the left can still stick to the left. You can choose the one most appropriate to you, and feel free to combine these two for more sophisticated layouts.
Your updated Boolply can be found here.
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
add .navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;} in your style sheet. thanks
.navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto"> <!-- here -->
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
I want to create a gap above navigation bar for echo name like: Welcome Sarah! Kindly check the image what output I am getting:
In above image I want to echo Welcome Sarah above the Login | Sign Up buttons.
I want to show search bar above the Adidad Shoe Store Starting from let-top. And welcome Sarah on the right-end. Then navigation will show.
my code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row float-right" >
// Search bar
<input type="text" placeholder="Search" name="search">
Hello Sarah!
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Adidas Shoe Store</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color:#007bff;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>
</li>
</ul>
</div>
</nav>
This is not working as expected because Bootstrap .fixed-top class assigns z-index value of 1030 and position:fixed at top to the nav.
As a result, the .container you added is displayed both behind and not above the nav.
The .container needs position other than static and z-index greater than 1030 to display above the nav. Additionally, the nav needs some padding-top to make visual space for the .container contents in this scenario.
The following structure and added CSS achieves the effect you're looking for:
<div class="container" style="position: relative; z-index: 1031; padding: .5rem 1rem;">
<div class="row">
<div class="col-sm-6">
<input type="text" placeholder="Search" name="search">
</div>
<div class="col-sm-6 text-right">
Hello Sarah!
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 2.5rem">
(I've thrown in two .col-sm-6 divs inside your .row to make things easier to arrange on mobile resolutions; also note that .container class is of limited width unlike nav so you should change it to .container-fluid)
I'm trying to let users get informed to enable javascript for better use of the website to I want the message placed above the navigation bar using bootstrap, but instead, they stack upon one another. Don't mind how I describe this.
I want them to be placed in this manner:
But they stack on top of each other this way:
Using Bootstrap 4, please any ideas?
Here's some section of the code
<html>
...
<body>
<noscript class='bg-danger text-light py-2 text-center d-block fixed-top mb-4' style='z-index: 9999;'>Enable javascript to use App better.</noscript>
<header class='navbar fixed-top navbar-expand-lg navbar-light bg-light'>
<div class='container'>
...
</div>
</header>
...
</body>
</html>
In the code below the div parts:
<div class='bg-danger text-light py-2 text-center mb-0'>Enable javascript to enhance this App.</div>
would need to be replaced with noscript. The div is just for easy testing/visibility.
To make the whole thing work, you move everything into a div with the fixed-top class and then add your noscript line followed by the navbar code.
Then you'll also need to add something like style="margin-top: 120px;" to the main container that would follow the fixed-top div to push the main content down.
Click the "run code snippet" button below and expand to full page:
<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>
<div class="fixed-top">
<div class='bg-danger text-light py-2 text-center mb-0'>Enable javascript to enhance this App.</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</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="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
<p style="margin-top: 120px;">first line of text</p>