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>
Related
I am using bootstrap 5. The color is working properly for background but I think something is wrong with that too but right now my main problem is that the menu buttons are not being colored completely. Only the middle part of them is colored and not the paddings. i have tried using background-clip but that is also not working.
HTML
<div class="theme-bg offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft" aria-labelledby="offcanvasLeftLabel" style="background-color: #7bed9f;">
<div class="offcanvas-header justify-content-end">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-header d-flex flex-column justify-content-center">
<img class="profile mb-2" src="{% static 'images/profile-default.png' %}">
<h2 class="text-center ">Welcome Saif</h2>
</div>
<hr class="m-0">
<div class="offcanvas-body p-0 container-fluid list-group list-group-flush border-bottom">
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
<div class="d-flex w-100 align-items-center justify-content-between container-fluid theme-bg">
<p class="mb-1 fs-6"><i class="fa fa-home me-1"></i> Home </p>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
<div class="d-flex w-100 align-items-center justify-content-between theme-bg">
<p class="mb-1 fs-6"><i class="fa fa-search me-1"></i> Search </p>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
<div class="d-flex w-100 align-items-center justify-content-between theme-bg">
<p class="mb-1 fs-6"><i class="fa fa-pencil me-1"></i> Write your blog </p>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
<div class="d-flex w-100 align-items-center justify-content-between theme-bg">
<p class="mb-1 fs-6"><i class="fa fa-briefcase me-1"></i> Portfolio </p>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
<div class="d-flex w-100 align-items-center justify-content-between theme-bg">
<p class="mb-1 fs-6"><i class="fa fa-gear me-1"></i> Settings </p>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
<div class="d-flex w-100 align-items-center justify-content-between theme-bg">
<p class="mb-1 fs-6"><i class="fa fa-sign-out me-1"></i> Sign Out </p>
</div>
</a>
</div>
</div>
CSS
.theme-bg {
background-color: #7bed9f;
padding: 0px;
background-clip: padding-box;
}
the menu items aren't colored completely
Remove all padding from your list-group-item elements (you can do this by giving them a class of p-0)
Add your padding to the direct child (d-flex w-100 align-items-center justify-content-between container-fluid theme-bg)
That did it for me, hope it helps :)
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<div class="container">
<div class="navbar-brand mx-auto"><h2 style="color: white;">Name</h2></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="burger">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<h2 style="color: white;">Python</h2>
</li>
<li class="nav-item">
<h2 style="color: white;">Name</h2>
</li>
<li class="nav-item">
<h2 style="color: white;">Html&Css</h2>
</li>
</ul>
</div>
</div>
</nav>
<!--Secion One-->
<section class="bg-dark text-light p-5 p-lg-0 text-center text-md-start">
<div class="container">
<div class="row align-items-center text-center">
<h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1>
</div>
</div>
</section>
</body>
Here is what it looks like right now
!(https://media.discordapp.net/attachments/855988935149486120/896932433319059487/unknown.png?width=609&height=406)
Use flex:
<body class="h-100 d-flex flex-column">
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<div class="container">
<div class="navbar-brand mx-auto">
<h2 style="color: white">Name</h2>
</div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#burger">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="burger">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a href="#python" class="nav-link px-3">
<h2 style="color: white">Python</h2>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-3">
<h2 style="color: white">Name</h2>
</a>
</li>
<li class="nav-item">
<a href="#html&css" class="nav-link px-3">
<h2 style="color: white">Html&Css</h2>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Secion One-->
<section
class="
d-flex
align-items-center
flex-1
justify-items-center
bg-dark
text-light
p-5 p-lg-0
text-center text-md-start
">
<div class="container">
<div class="row align-items-center text-center">
<h1 class="hi">
Design made by the <span style="color: #f23dff">youth</span>
</h1>
</div>
</div>
</section>
</body>
the only thing you should also note is that the wrapping html might not be taking the full height, so add the following css:
html{
height:100%
}
.flex-1{
flex: 1;
}
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>
I want to create cards in a row with dropdown. But when one card collapses, height of all other card changes corresponding the first one. How can I prevent that? I want to expand only the selected card. Here is my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mr-0 ml-0">
<div class="card" style="width: 18rem;">
<div class="card-header">
1
</div>
<div class="card-body">
<h5 class="card-title">First card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
<h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
</div>
<div class="collapse" id="collapseExample1">
<ul class="list-group list-group-flush">
<li class="list-group-item">t1</li>
<li class="list-group-item">t2</li>
<li class="list-group-item">t3</li>
<li class="list-group-item">t4</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price</li>
</ul>
</div>
<div class="card" style="width: 18rem;">
<div class="card-header">
2
</div>
<div class="card-body">
<h5 class="card-title">Second card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
<h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
</div>
<div class="collapse" id="collapseExample2">
<ul class="list-group list-group-flush">
<li class="list-group-item">t1</li>
<li class="list-group-item">t2</li>
<li class="list-group-item">t3</li>
<li class="list-group-item">t4</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price</li>
</ul>
</div>
</div>
You can add this class align-items-start to <div class="row mr-0 ml-0">. This will prevent the height of all cards from expansion when expanding one.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row align-items-start mr-0 ml-0">
<div class="card" style="width: 18rem;">
<div class="card-header">
1
</div>
<div class="card-body">
<h5 class="card-title">First card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
<h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
</div>
<div class="collapse" id="collapseExample1">
<ul class="list-group list-group-flush">
<li class="list-group-item">t1</li>
<li class="list-group-item">t2</li>
<li class="list-group-item">t3</li>
<li class="list-group-item">t4</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price</li>
</ul>
</div>
<div class="card" style="width: 18rem;">
<div class="card-header">
2
</div>
<div class="card-body">
<h5 class="card-title">Second card <i class="fas fa-info-circle fa-x info" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample"></i></h5>
<h6 class="card-subtitle mb-2 text-muted">9/10/2020</h6>
</div>
<div class="collapse" id="collapseExample2">
<ul class="list-group list-group-flush">
<li class="list-group-item">t1</li>
<li class="list-group-item">t2</li>
<li class="list-group-item">t3</li>
<li class="list-group-item">t4</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price</li>
</ul>
</div>
</div>
in my current project I have a navbar with a burger menu. It scales correctly to md-breakpoint, but after this breakpoint all the elements go to the left and the toggle works weird.
On medium:
view on medium
On laptop L - 1440px:
view on larger than medium
This is the code that I have for my header header right now, but I can't seem to figure out what makes my navbar act so weird, since I'm not specifying anything different between md and >md.
<header>
<div class="container ">
<nav class="navbar bg-light navbar-light fixed-top ">
<button class="navbar-toggler align-items-center" type="button" data-toggle="collapse" data-target="#navDropdownMenu" aria-controls="navbarDropdownToggle" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand mx-auto" href="index.html">FORRESTR</a>
<button class="shoppingCart navbar-toggler" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<div class="container">
<div class="collapse navbar-collapse" id="navDropdownMenu">
<ul class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Products</a>
<a class="nav-item nav-link" href="ourstory.html">Our Story</a>
<a class="nav-item nav-link" href="partners.html">Partners</a>
<a class="nav-item nav-link" href="process.html">Process</a>
<a class="nav-item nav-link" href="contact.html">Contact Us</a>
<a class="nav-item nav-link" href="faq.html">FAQ</a>
</ul>
</div>
</div>
</nav>
</div>
Does anyone know what the problem is?
UPDATED
Besides of moving the class .fixed-top to your container, you have to use .container-fluid if you want a full width header. Plus, you have to remove the container wrapping the narvbar-collapse. Otherwise ii'll react to breackpoint aswell.
<header class="container-fluid fixed-top">
<nav class="navbar navbar-light">
<button class="navbar-toggler align-items-center" type="button" data-toggle="collapse" data-target="#navDropdownMenu" aria-controls="navbarDropdownToggle" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand mx-auto" href="index.html">FORRESTR</a>
<button class="shoppingCart navbar-toggler" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<div class="collapse navbar-collapse" id="navDropdownMenu">
<ul class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Products</a>
<a class="nav-item nav-link" href="ourstory.html">Our Story</a>
<a class="nav-item nav-link" href="partners.html">Partners</a>
<a class="nav-item nav-link" href="process.html">Process</a>
<a class="nav-item nav-link" href="contact.html">Contact Us</a>
<a class="nav-item nav-link" href="faq.html">FAQ</a>
</ul>
</div>
</nav>
</header>
#Periplo this is what it looks like after replacing the fixed-top class from the navbar to the parent container.
After added fixed-top to container instead of navbar
Not quite what I'm looking for because I would like a full-width navbar :). Here's my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Products</title>
</head>
<header>
<div class="container fixed-top">
<nav class="navbar bg-light navbar-light ">
<button class="navbar-toggler align-items-center" type="button" data-toggle="collapse" data-target="#navDropdownMenu" aria-controls="navbarDropdownToggle" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand mx-auto" href="index.html">FORRESTR</a>
<button class="shoppingCart navbar-toggler" type="button">
<i class="fa fa-shopping-cart"></i>
</button>
<div class="container">
<div class="collapse navbar-collapse" id="navDropdownMenu">
<ul class="navbar-nav">
<a class="nav-item nav-link active" href="index.html">Products</a>
<a class="nav-item nav-link" href="ourstory.html">Our Story</a>
<a class="nav-item nav-link" href="partners.html">Partners</a>
<a class="nav-item nav-link" href="process.html">Process</a>
<a class="nav-item nav-link" href="contact.html">Contact Us</a>
<a class="nav-item nav-link" href="faq.html">FAQ</a>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main>
<picture>
<img class="img-fluid headerImg mt-5 mb-5" src="images/jungle.jpg">
</picture>
<div class="container">
<div class="row">
<div class="col d-flex mb-3 align-items-center">
<h1 class="m-0 ml-5" style="flex-grow: 1;">Products</h1>
<button class="navbar-toggler" type="button">
<i class="fa fa-list"></i>
</button>
</div>
</div>
</div>
<div class="container">
<div class="row m-0">
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-3">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-5">€25,00</h6>
</article>
<article class="col-6 col-md-3 col-lg-">
<img class="img-fluid" src="images/jungle.png" alt="jungleImage">
<h5 class="mt-1">Productname</h5>
<h6 class="mt-n2 mb-5">€25,00</h6>
</article>
</div>
<div class="mx-3 mb-5">
<a href="ourstory.html">
<button type="submit" class="btn btn-primary col-sm-12 col-md-6 d-flex align-items-center justify-content-center mx-auto">Read our story<i class="button fa fa-angle-double-right ml-2"></i></button>
</a>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</main>
<footer>
<div class="container">
<ul class="list-unstyled">
<div class="row flex-md-row">
<div class="col-md-6 col-lg-3">
<li><a class="mx-3" href="#">Terms & Conditions</a></li>
<li><a class="mx-3" href="#">Privacy Policy</a></li>
<li><a class="mx-3" href="#">Return Policy</a></li>
</div>
<div class="d-sm-block d-md-none" style="height: 10px; background-color: white; width: 100px; visibility: hidden;"></div>
<div class="col-md-6 col-lg-3">
<li><a class="mx-3" href="contact.html">Contact Us</a></li>
<li><a class="mx-3" href="faq.html">FAQ</a></li>
</div>
</div>
</ul>
<a href="https://www.instagram.com/biancalooijen/">
<div class="icons mx-3 float-right">
<img src="images/instagram.svg" alt="instagramIcon">
</div>
</a>
<a href="https://m.facebook.com/bianca.looijen">
<div class="icons float-right">
<img src="images/facebook.svg" alt="facebookIcon">
</div>
</a>
</div>
</footer>
</html>