My understanding is that I can nest container-fluid inside navbar and then use the grid. I'm trying to have a navbar have 3 elements: logo left, navigation breadcrumbs center, and then button on the right. I do this with col and it looks great in mobile. However, in a bigger screen, it pulls to the left and is messed up, even though all the cols add up to 12.
Codeply: https://www.codeply.com/p/jTBpYDfUk9
Here's the code:
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top border border-3 border-danger border-top-0 border-start-0 border-end-0">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-3 col-sm-2 col-lg-1">
<img ...>
</div>
<div class="col-6 col-sm-8 col-lg-10 tiny-text">
<nav aria-label="">
<ul class="pagination justify-content-center m-0">
<li class="page-item">
<a class="page-link p-1 px-lg-3 previous_page" href="#" aria-label="Previous">
<i aria-hidden="true" class="bi-chevron-double-left text-danger"></i>
</a>
</li>
<li class="page-item active" data-page="0"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">1</a></li>
<li class="page-item" data-page="1"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">2</a></li>
<li class="page-item" data-page="2"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">3</a></li>
<li class="page-item" data-page="3"><a class="page-link p-1 px-lg-3 text-reset disabled pe-none" href="#" tabindex="-1" aria-disabled="true">4</a></li>
<li class="page-item">
<a class="page-link p-1 px-lg-3 next_page" href="#" aria-label="Next">
<i aria-hidden="true" class="bi-chevron-double-right text-danger"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-3 col-sm-2 col-lg-1 text-end">
<i class="bi-cart-fill text-danger fs-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#cart-panel" aria-controls="cart-panel"></i>
</div>
</div>
</div>
</nav>
You just need to add one more bootstrap class w-100 on the 3rd line like this <div class="row align-items-center w-100">
Related
I am using Bootstrap 5, trying to make responsive card ads. left card. For some reason, the sticky-top won't work.
I'm trying to create a sticky sidebar on the left. The sidebar menu is inside a grid column. I'm using the sticky-top class as shown in this question, but it still doesn't work.
Here is my code:Here is my code; I am not aware of any possible collisions with sticky-top.
<!Docktype html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<title>Selda</title>
</head>
<body class="bg-light d-flex flex-column min-vh-100" data-new-gr-c-s-check-loaded="8.904.0" data-gr-ext-installed="">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container">
<a class="navbar-brand" href="#">Selda</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Counselings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Learning</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">About-US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact-US</a>
</li>
</ul>
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container min-vh-100">
<div class="row">
<div class="col-lg-8 mb-3">
<div class="card">
<div class="card-header" style="height: 90px"></div>
<div class="card-body">
<div class="d-block d-md-flex mb-3">
<div style="width:115px; margin-top:-75px">
<img src="https://i.stack.imgur.com/vRDsY.png" class="rounded-circle img-thumbnail">
<div class="text-center">
<span class="badge bg-success">Online</span>
</div>
</div>
<h1 class="h5">
<i class="fa-solid fa-circle-check text-success"></i>
John Sina
</h1>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="menu sticky-top">
<div class="card">
<div class="card-body">
<h6 class="card-title">Plan</h6>
</div>
<ul class="list-group">
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-file-pdf"></i>
<span>Download PDF</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-photo-film"></i>
<span>Download Video</span>
</div>
<span class="badge bg-primary rounded-pill">85,000 $</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-book"></i>
<span>Download Word</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
</ul>
<div class="card-body">
<button class="btn btn-success btn-lg w-100">Payment</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h6 class="card-title">About me</h6>
<p>Text</p>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="card">
<div class="card-body">
<h6 class="card-title">My Video</h6>
<video poster="https://i.stack.imgur.com/vRDsY.png" controls="" class="w-100" __idm_id__="1286145">
<source src="http://localhost:8000/storage/videos/counselings/1674029169.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.bundle.min.js "></script>
</body>
</html>
The menu div is the one I'd like to stick to the top as the user scrolls down.
It looks like the issue is that the sticky-top class is not being applied to the correct element. In your code, it is being applied to the navbar element, but it should be applied to the sidebar column that you want to make sticky.
Try adding the sticky-top class to the col-lg-4 element that contains the sidebar menu, like this:
<div class="col-lg-4 mb-3 sticky-top">
Also make sure that the parent element of that sidebar column has a position property set to relative, so that the sticky element can be positioned relatively to it.
<div class="row" style="position:relative">
You may also add a top property to the sticky element for better positioning.
<div class="col-lg-4 mb-3 sticky-top" style="top:50px">
This should make the sidebar menu sticky on the left as you scroll down the page.
The problem is that elements only stick to their parent element, so the menu stays within the column. You should separate your page to two large columns: one for all the other rows/columns and the other for your sidebar that will stay sticked to the top. Try this (although you may have to change some padding/margins due to nested rows):
<div class="container min-vh-100">
<div class="row">
<div class="col-lg-8 mb-3">
<div class="row">
<div class="col-12"></div>
<div class="card">
<div class="card-header" style="height: 90px"></div>
<div class="card-body">
<div class="d-block d-md-flex mb-3">
<div style="width:115px; margin-top:-75px">
<img src="https://i.stack.imgur.com/vRDsY.png" class="rounded-circle img-thumbnail">
<div class="text-center">
<span class="badge bg-success">Online</span>
</div>
</div>
<h1 class="h5">
<i class="fa-solid fa-circle-check text-success"></i>
John Sina
</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-body">
<h6 class="card-title">About me</h6>
<p>Text</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<h6 class="card-title">My Video</h6>
<video poster="https://i.stack.imgur.com/vRDsY.png" controls="" class="w-100" __idm_id__="1286145">
<source src="http://localhost:8000/storage/videos/counselings/1674029169.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 mb-3">
<div class="menu sticky-top">
<div class="card">
<div class="card-body">
<h6 class="card-title">Plan</h6>
</div>
<ul class="list-group">
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-file-pdf"></i>
<span>Download PDF</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-photo-film"></i>
<span>Download Video</span>
</div>
<span class="badge bg-primary rounded-pill">85,000 $</span>
</a>
</li>
<li class="list-group-item p-0 align-items-center">
<a class="d-flex justify-content-between list-group-item list-group-item-action border-0" href="#">
<div>
<i class="fa-solid fa-book"></i>
<span>Download Word</span>
</div>
<span class="badge bg-primary rounded-pill">Free</span>
</a>
</li>
</ul>
<div class="card-body">
<button class="btn btn-success btn-lg w-100">Payment</button>
</div>
</div>
</div>
</div>
</div>
</div>
I've been working on a demo project and inorder to insert a side menubar to all the pages I inserted a navbar to the _Layout.html with flex-nowrap property so that the view contents would be rendered to the right of the menubar instead of the bottom. But this is creating extra additional space to the right of the content as it's evident from the screenshot (depicted inside black rectangle).
Is flex-nowrap the ideal way to do it?
Some solution to solve this issue is much appreciated.
I've also added the code for _Layout.html
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-5 d-none d-sm-inline">Menu</span>
</a>
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle text-white text-decoration-none">
<i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Employees</span>
</a>
<ul class="collapse nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
<li class="w-100">
<a asp-action="AllEmployees" asp-controller="Employee" class="nav-link px-0 text-white text-decoration-none"> <span class="d-none d-sm-inline">All</span> Employees </a>
</li>
<li>
<span class="d-none d-sm-inline">Leaves</span>
</li>
</ul>
</li>
</ul>
<hr>
</div>
</div>
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 months ago.
Improve this question
Helo, I want to target (a) element inside a css id to change all (a) color inside slidebar id**.
I tried to do this
<style>
#slidebar: a {
color: #fc7f03 !important;
}
</style>
but the color still blue not orange.
Full code:
<style>
#slidebar: a {
color: #fc7f03 !important;
}
</style>
<div id="slidebar">
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0" style=" background-image: linear-gradient(to top, #444444, #cccccc); border-radius: 30px;">
<div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
<a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<span class="fs-5 d-none d-sm-inline">Website Name</span>
</a>
<ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
<li class="nav-item">
<a href="#" class="nav-link align-middle px-0">
<i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline">Home</span>
</a>
</li>
<li>
<a href="#submenu1" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-speedometer2"></i> <span class="ms-1 d-none d-sm-inline">Dashboard</span> </a>
<ul class="collapse show nav flex-column ms-1" id="submenu1" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Item</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Item</span> 2
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline">Orders</span></a>
</li>
<li>
<a href="#submenu2" data-bs-toggle="collapse" class="nav-link px-0 align-middle ">
<i class="fs-4 bi-bootstrap"></i> <span class="ms-1 d-none d-sm-inline">Bootstrap</span></a>
<ul class="collapse nav flex-column ms-1" id="submenu2" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Item</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Item</span> 2
</li>
</ul>
</li>
<li>
<a href="#submenu3" data-bs-toggle="collapse" class="nav-link px-0 align-middle">
<i class="fs-4 bi-grid"></i> <span class="ms-1 d-none d-sm-inline">Products</span> </a>
<ul class="collapse nav flex-column ms-1" id="submenu3" data-bs-parent="#menu">
<li class="w-100">
<span class="d-none d-sm-inline">Product</span> 1
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 2
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 3
</li>
<li>
<span class="d-none d-sm-inline">Product</span> 4
</li>
</ul>
</li>
<li>
<a href="#" class="nav-link px-0 align-middle">
<i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline">Customers</span> </a>
</li>
</ul>
<hr>
<div class="dropdown pb-4">
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="hugenerd" width="30" height="30" class="rounded-circle">
<span class="d-none d-sm-inline mx-1">Admin</span>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>
</div>
<div class="col py-3">
Content area...
</div>
</div>
</div>
</div>
you can fix it by removing : from the style part
<style>
#slidebar a {
color: #fc7f03 !important;
}
</style>
good luck
For some reason Angulars is saying me that the close tags are wrong, and my page is now running for that errors, but I don't understand why, the close tags are fine I check tab for tab all the tags have one open tab and one close tags, I'm gone leave my code.
<div class="container-fluid">
<h6 class="h2 text-white d-inline-block mb-0 mr-4">Mi perfil</h6>
<!-- Search form -->
<!-- Navbar links -->
<ul class="navbar-nav align-items-center ml-md-auto ">
<li class="nav-item d-xl-none">
<!-- Sidenav toggler -->
<div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</li>
<li class="nav-item d-sm-none">
<a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
<i class="ni ni-zoom-split-in"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://seth.com/dashboard" role="button" >
<i class="fas fa-arrow-alt-circle-left"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- Signo pregunta -->
<i class="far fa-question-circle"></i>
</a>
<!-- Signo pregunta contenido-->
<div class="dropdown-menu dropdown-menu-m dropdown-menu-right py-0 overflow-hidden">
<!-- Dropdown header -->
<!-- List group -->
<div class="list-group list-group-flush">
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Guía de inicio</p>
</div>
</div>
</a>
<!-- Tarea -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Políticas Privacidad</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Contactar asistencia</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Videocapacitaciones</p>
</div>
</div>
</a>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav align-items-center ml-auto ml-md-0 ">
<li class="nav-item dropdown">
<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media align-items-center">
<span class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="../assets/img/theme/foto.jpg">
</span>
<div class="media-body ml-2 d-none d-lg-block">
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right ">
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Hola </h6>
</div>
<a href="/vistas/profile" class="dropdown-item">
<i class="ni ni-single-02"></i>
<span>Ajustes de mi perfil</span>
</a>
<a href="../admin.php" class="dropdown-item">
<i class="ni ni-settings-gear-65"></i>
<span>Consola de administrador</span>
</a>
<div class="dropdown-divider"></div>
<a href="./seth/Plugins/login/php/logout.php" class="dropdown-item">
<i class="ni ni-user-run"></i>
<span>Cerrar sesión</span>
</a>
Ok this tags is what angular is saying me that I need to remove, it is with the last code block.
</li>
</ul>
</div>
</div>
</nav>
I closed the tags, but you have divs inside the links) replace with span, it will be more correct and set display:block in css
I recommend not using divs inside links! Replace with span.
see also
HTML:
<div class="container-fluid">
<h6 class="h2 text-white d-inline-block mb-0 mr-4">Mi perfil</h6>
<!-- Search form -->
<!-- Navbar links -->
<ul class="navbar-nav align-items-center ml-md-auto ">
<li class="nav-item d-xl-none">
<!-- Sidenav toggler -->
<div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</li>
<li class="nav-item d-sm-none">
<a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
<i class="ni ni-zoom-split-in"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://seth.com/dashboard" role="button">
<i class="fas fa-arrow-alt-circle-left"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- Signo pregunta -->
<i class="far fa-question-circle"></i>
</a>
<!-- Signo pregunta contenido-->
<div class="dropdown-menu dropdown-menu-m dropdown-menu-right py-0 overflow-hidden">
<!-- Dropdown header -->
<!-- List group -->
<div class="list-group list-group-flush">
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Guía de inicio</p>
</div>
</div>
</a>
<!-- Tarea -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Políticas Privacidad</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Contactar asistencia</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Videocapacitaciones</p>
</div>
</div>
</a>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav align-items-center ml-auto ml-md-0 ">
<li class="nav-item dropdown">
<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media align-items-center">
<span class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="../assets/img/theme/foto.jpg">
</span>
<div class="media-body ml-2 d-none d-lg-block">
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right ">
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Hola </h6>
</div>
<a href="/vistas/profile" class="dropdown-item">
<i class="ni ni-single-02"></i>
<span>Ajustes de mi perfil</span>
</a>
<a href="../admin.php" class="dropdown-item">
<i class="ni ni-settings-gear-65"></i>
<span>Consola de administrador</span>
</a>
<div class="dropdown-divider"></div>
<a href="./seth/Plugins/login/php/logout.php" class="dropdown-item">
<i class="ni ni-user-run"></i>
<span>Cerrar sesión</span>
</a>
</div>
</li>
</ul>
</div>
Issue Details
Dropdown is present on top right side and when clicked shows items on top left side.
How to replicate it?
Please maximize the window. It will replicate only in maximized window.
What I have done so far?
I have js fiddle here
Here is the code
<div id="app">
<header>
<nav class="navbar navbar-dark navbar-expand-md sticky-top bg-dark flex-md-nowrap p-0">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
<input class="form-control form-control-dark" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Welcome User
</a>
<div class="dropdown-menu pull-left" aria-labelledby="navbarDropdown" style="">
<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>
</ul>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center mb-3 border-bottom">
#yield('content')
</div>
</main>
</div>
</div>
</div>
Change this line of code
<div class="dropdown-menu pull-left" aria-labelledby="navbarDropdown" style="">
into this to get it working using native Bootstrap functions
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown" style="">
Here is the Fiddle: https://jsfiddle.net/1tc7wxnh/
And some more information about Menu Alignment in Bootstrap 4: https://getbootstrap.com/docs/4.5/components/dropdowns/#menu-alignment
Your problem is that _dropdown.scss includes the following style left: 0.
You have to overwrite it using for instance the following additional css:
.dropdown-menu {
left: inherit;
right: 0;
}
This will place your dropdown items on the right side as desired.
You can either place it in your personal css file or use it inline a <style> element or directly on your element <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="left: inherit; right: 0;<">