Can't align unordered lists with 'flex-column' - html

I am creating a vertical nav - top ul list will align to top and the other one to the bottom. Right now my nav looks like two columns instead of one long list of items: https://www.dropbox.com/s/3pmwuih7xij51fj/Screen%20Shot%202019-12-28%20at%2010.41.34%20PM.png?dl=0
Here is a quick photoshop work to show what I am expecting (all menu items in one column):
I tried adding w-100 but I can't get them to align to one col. How do I create a break between the two?
<div class="container-fluid">
<div class="row">
<div class="col-1" style="background-color: aliceblue; height: 600px;">
<nav class="navbar navbar-expand-md flex-column p-0"> <a class="navbar-brand" href="#">logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav flex-column">
<li class="nav-item active"> <a class="nav-link" href="#">Help <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
</ul>
<ul class="navbar-nav flex-column">
<li class="nav-item active"> <a class="nav-link" href="#">Help <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
</ul>
</div>
</nav>
</div>
</div>
</div>


You should add flex-column to the div #navbarsExampleDefault and between the 2 ul you can add hr to seperate them out and later style it.
<div class="container-fluid">
<div class="row">
<div class="col-1" style="background-color: aliceblue; height: 600px;">
<nav class="navbar navbar-expand-md flex-column p-0"> <a class="navbar-brand" href="#">logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse flex-column" id="navbarsExampleDefault">
<ul class="navbar-nav flex-column">
<li class="nav-item active">
<a class="nav-link" href="#">
Help <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
</ul>
<hr>
<ul class="navbar-nav flex-column">
<li class="nav-item active">
<a class="nav-link" href="#">
Help <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Help</a> </li>
</ul>
</div>
</nav>
</div>
</div>

Related

bootstrap 4 nav bar not covering full width when dropdown

This is what my code looks like for the nav bar, when I press the dropdown button, this is how it will look like on my page
https://docs.google.com/document/d/1gHsqAZ9QTaJX4A-1PXrVVoXi2KWBWqa6YTA_-QtG8wo/edit?usp=sharing
<nav class="navbar navbar-expand-lg navbar-dark bg-color mb-3">
<a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px">RYCE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">OUR CARS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SHOP PARTS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">TEST DRIVE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SERVICING</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SUPPORT</a>
</li>
<li class="nav-item dropdown">
STAFF
<div class="dropdown-menu">
Users Management
Bookings Management
Products Management
Orders Management
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'></i></a>
</li>
<li class="nav-item dropdown">
<i class="material-icons"></i>
<div class="dropdown-menu">
LOGIN
SIGN UP
PROFILE
</div>
</li>
</ul>
</div>
</nav>
I have tried changing the width of the navbar and some of the bootstrap properties but none of my attempts have worked so far. I am unsure if the problem lies with the navbar or dropdown menu.
Thank you so much for all your inputs!

You can add .dropdown-menu-right to .dropdown-menu to align the dropdown to the right when it is shown -- this way it stops it from increasing the width of the page. Is this what you wanted?
Otherwise consider using Bootstrap collapse, I can change my example if you want!
body { height: 100vh }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="bg-dark h-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-danger bg-color mb-3">
<a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px"> RYCE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link text-white" href="/">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">OUR CARS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SHOP PARTS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">TEST DRIVE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SERVICING</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="">SUPPORT</a>
</li>
<li class="nav-item dropdown">
STAFF
<div class="dropdown-menu dropdown-menu-right">
Users Management
Bookings Management
Products Management
Orders Management
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'></i></a>
</li>
<li class="nav-item dropdown">
<i class="material-icons"></i>
<div class="dropdown-menu dropdown-menu-right">
LOGIN
SIGN UP
PROFILE
</div>
</li>
</ul>
</div>
</nav>
</div>
<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>

How I can remove this bootstrap container-fluid default margin? Please see the attached image

When I wanted to add a navbar in the parent class .container-fluid. the navbar is taking a default left right margin as you can see the image here Please see the image
here is my code-
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<nav id="navbar_top" class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Campaign</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>

Bootstrap 5 the .no-gutters class has been replaced with .g-0. Use it
on the .row where you want no spacing between columns.
https://stackoverflow.com/a/21256143/244811
.g-0 has been added to the .col-lg-12 div, which appears to have had the gutters:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="g-0 col-lg-12">
<nav id="navbar_top" class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Campaign</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>

Navbar is not showing up on mobile

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="`enter code here`">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Linkedin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Email</a>
</li>
</ul>
</div>
</div>
</nav>
This is the navbar in html made with BootStrap. but somehow it does not show up on the mobile any tips of how to change this? I have tried a lot and I looked over previous questions aswell but nothing helped

As you can see in the Bootstrap 5 docs...
"Navbars can use .navbar-toggler, .navbar-collapse, and
.navbar-expand{-sm|-md|-lg|-xl|-xxl} classes to determine when their
content collapses behind a button"
Your code is missing the toggler...
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="`enter code here`">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Linkedin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">GitHub</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Email</a>
</li>
</ul>
</div>
</div>
</nav>
Demo
Also note the data attributes have changed in Bootstrap 5

Alignment issues and navbar is not collapsing

I am very new to learning Bootstrap, my navbar is not collapsing, furthermore, I want my three list items Home, Features and Pricing to be on left whereas sign up and login on the right.
I was successfully able to scale my image using CSS (id = brandimg). Please fix this issue.
My markup is:
<nav class="navbar navbar-default navbar-light navbar-expand" style="background-color: #3ab3f0">
<div class="container collapse navbar-collapse">
<div class="navbar-header">
<span class="navbar-brand">
<img src="https://images8.alphacoders.com/416/416969.jpg" id="brandimg">
AnmGal
</span>
</div>
<div class="navbar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</div>
</nav>

This should work for you:
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Signup</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
However, I would recommend you to read this https://getbootstrap.com/docs/4.3/components/navbar/ you will learn all you need about bootstrap navbars.

If you are use bootstrap 4 then try this:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light justify-content-md-center justify-content-start">
<a class="navbar-brand" href="#"><img src="https://images8.alphacoders.com/416/416969.jpg" id="brandimg">
AnmGal</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="navbar-nav mr-0">
<li class="nav-item">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<div class="right-menu">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
<li class="nav-item"><a class="nav-link" href="#">Login</a></li>
</ul>
</div>
</div>
</nav>

Top navbar to go underneath side navbar

I'm currently using the example from bootstrap called 'dashboard' I'm wanting to get the top navbar to actually tuck underneath the side navbar. Like this example: Image Example from Dribbble
I've put the dashboard code from bootstrap onto jsfiddle for ease of use for those that are willing to help (I really appreciate any help with this).
https://jsfiddle.net/1dy65wqx/
It should impact this:
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<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="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-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>
</header>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Export</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Nav item again</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">One more nav</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another nav item</a>
</li>
</ul>
</nav>

I have changed few styles, please add this to your css file..
<div class="row" style="position:relative;">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar" style="position:fixed; z-index:2000; top:0px;">