Controlling height of pre container in bootstrap - html

I have an app using Bootstrap 5.0 laid out as in the dashboard example. In the main content column, I have a heading followed by a set of tabs. Each tab contains a block of preformatted text in a pre tag. The preformatted text can be both wide and tall, so scroll bars are needed in both directions. I have set up a codepen to demonstrate the issue.
By default, the pre element is the full height of the content and the vertical scroll bar is attached to the page instead of the pre element. This means that in order to access the hortizontal scroll bar, users have to scroll the page down to the very bottom so they lose track of what they were looking at when they needed to scroll horizontally.
What I really want is to limit the height of the pre block to the vertical space available on the page so that both the vertical and horizontal scroll bars are attached to the pre element itself. I have managed to almost achieve what I want by setting the max-height of the pre as follows:
.scrollable-pre {
max-height: calc(100vh - 16em);
}
However, this is brittle because if add anything to the heading that increases its height, the hard coded 16em will have to be adjusted.
How do I get the pre to automatically size to the available height?
body {
font-size: .875rem;
}
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
/* rtl:raw:
right: 0;
*/
bottom: 0;
/* rtl:remove */
left: 0;
z-index: 100;
/* Behind the navbar */
padding: 48px 0 0;
/* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #727272;
}
.sidebar .nav-link.active {
color: #2470dc;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
/*
* Navbar
*/
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
.pre-container {}
.scrollable-pre {
max-height: calc(100vh - 16em);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">Sign out</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="home"></span> Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span> Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span> Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span> Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span> Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span> Integrations
</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="link-secondary" href="#" aria-label="Add a new report">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span> Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span> Last quarter
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span> Social engagement
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span> Year-end sale
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="pre-container">
<pre class="scrollable-pre">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
x
</pre>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
</main>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Related

container-fluid doesn't take full width except for navbar

.container-fluid-1 {
padding: 0;
}
.navbar {
padding: 0 5%;
}
.navbar-section{
background-color: #fff;
width: 100%;
padding: 0 1%;
margin: 0;
position: fixed;
z-index: 1;
}
.nav-item {
padding: 0 20px;
}
.nav-link {
color: black;
}
.nav-link:focus {
color: black;
}
.nav-link:hover {
color: #feb633;
}
.navbar-brand {
font-size: 3.5rem;
font-family: 'Hind Siliguri', sans-serif;
color: #feb633;
}
.navbar-brand:hover {
color: grey;
}
/* title */
.introduction {
background-color: #fbfbfb;
padding-top: 10%;
}
.subtitle {
font-size: 1.5rem;
color: grey;
}
.twotitle {
padding-top: 220px;
padding-left: 200px;
}
.btn {
background: #feb633;
color: #fff;
}
.btn:hover {
border: 2px solid #feb633;
transition: 0.2s ease-in all;
color: #feb633;
background-color: #fbfbfb;
}
I put a container-fluid class in my whole body but it doesn't provides a full width container except for navbar.
Everything looks fine on PC (1440px) but on mobile the whole body (except for navbar)moving to left side.
Here is the screenshot on laptop that's what I want.
Here is the screenshot on iPhoneX The grey background is on the left now.
Could someone please help me with it? Thanks in advance.
*container-fluid-1 is a class for CSS.
<body>
<!--navbar -->
<div class="container-fluid-1 container-fluid">
<section id="title">
<div class="navbar-section">
<nav class="navbar navbar-expand-lg">
<a class=" navbar-brand" href="#">M</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</nav>
</div>
<!--title -->
<div class="introduction row">
<div class="twotitle col-lg-6">
<h1>I'm Marcus</h1>
<p class="subtitle">Web Design& Front End Developer</p>
<br>
Hire me
</div>
<div class="profile col-lg-6">
<img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
</div>
</div>
</section>
</div>
</body>
<body>
<!--navbar -->
<div class="container-fluid-1 container-fluid">
<section id="title">
<div class="navbar-section">
<nav class="navbar navbar-expand-lg">
<a class=" navbar-brand" href="#">M</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#title">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about-me">About me</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Service</a></li>
<li class="nav-item"><a class="nav-link" href="#mini-shop">Mini Shop</a></li>
<li class="nav-item"> <a class="nav-link" href="#contact-me">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
</ul>
</div>
</nav>
</div>
<!--title -->
<div class="introduction row">
<!--use mobile responsive classes here for full width use col-xs-12 col-sm-12 col-md-12 -->
<div class="twotitle col-lg-6 col-md-12 col-sm-12 col-xs-12">
<h1>I'm Marcus</h1>
<p class="subtitle">Web Design& Front End Developer</p>
<br>
Hire me
</div>
<div class="profile col-lg-6 col-md-12 col-sm-12 col-xs-12">
<img src="images/fa0b3895-7e4e-4ac9-a977-1a99fdefc4dd.png" alt="profile">
</div>
</div>
</section>
</div>
</body>
<!-- begin snippet: js hide: false console: true babel: false -->

Change logo colour on scroll

I have tried to implement the following solution but have doing so seems to break my website. The logo I have for the website is the same color as the navbar background, so I am trying to switch to a black logo once the navbar shows up. However the website hangs on the spinner loader and fails to load in when the code block is active. Commenting out the code fixes this and the website behaves normally. Any ideas what I am missing here? Here is the relevant code:
// Javascript
// jQuery to collapse the navbar on scroll
$(window).on('scroll load', function() {
if ($(".navbar").offset().top > 20) {
$(".fixed-top").addClass("top-nav-collapse");
//$("img.logo-image").attr('src', "images/master_logo_black.svg"​);
} else {
$(".fixed-top").removeClass("top-nav-collapse");
//$("img.logo-image").attr('src', "images/master_logo_gold.svg"​)
}
});
//jQuery to change to logo colour THIS IS THE ISSUE
$(document).ready(function() {
$(window).on("scroll", function () {
if($(this).scrollTop() > 20){
$(".logo-image img").attr("src", "images/master_logo_black.svg"​);
} else {
$(".logo-image img").attr("src", "images/master_logo_gold.svg"​);
}
})
});
.navbar-custom {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
background-color: #FFBF00;
box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
font: 600 0.875rem/0.875rem "Open Sans", sans-serif;
transition: all 0.2s;
}
.navbar-custom .navbar-brand {
font-size: 0;
}
.navbar-custom .navbar-brand.logo-image img {
width: 20rem;
height: 5rem;
-webkit-backface-visibility: hidden;
}
.navbar-custom.top-nav-collapse {
padding: 0.375rem 1.5rem 0.375rem 2rem;
box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
background-color: #FFBF00;
}
.navbar-custom.top-nav-collapse .navbar-brand.logo-image img {
fill: rgba(0, 0, 0, 1)
}
<body data-spy="scroll" data-target=".fixed-top">
<!-- Preloader -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<!-- end of preloader -->
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark navbar-custom fixed-top">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">redacted</a> -->
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html"><img class="logo-image" src="images/master_logo_gold.svg" alt="alternative"></a>
<!-- Mobile Menu Toggle Button -->
<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-awesome fas fa-bars"></span>
<span class="navbar-toggler-awesome fas fa-times"></span>
</button>
<!-- end of mobile menu toggle button -->
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#header">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#research">RESEARCH</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#experience">EXPERIENCE</a>
</li>
<li class="nav-item">
<a class="nav-link page scroll" href="blog.html">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">CONTACT</a>
</li>
</ul>
<span class="nav-item social-icons">
<span class="fa-stack">
<a href="https://www.linkedin.com/in/redacted/">
<span class="hexagon"></span>
<i class="fab fa-linkedin-in fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="https://github.com/redacted">
<span class="hexagon"></span>
<i class="fab fa-github fa-stack-1x"></i>
</a>
</span>
</span>
</div>
</nav>
<!-- end of navbar -->
<!-- end of navbar -->
Seems to work as shown below. Try changing the image src on scroll as shown in the example.
// Javascript
// jQuery to collapse the navbar on scroll
const $window = $(window);
$window.on('scroll', function() {
let scroll = $window.scrollTop();
if (scroll > 20) {
$(".fixed-top").addClass("top-nav-collapse");
//$("img.logo-image").attr('src', "images/master_logo_black.svg");
} else {
$(".fixed-top").removeClass("top-nav-collapse");
//$("img.logo-image").attr('src', "images/master_logo_gold.svg")
}
});
.navbar-custom {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
background-color: #FFBF00;
box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
font: 600 0.875rem/0.875rem "Open Sans", sans-serif;
transition: all 0.2s;
}
.fixed-top {
position: fixed;
top: 0;
left :0;
width: 100%;
}
.navbar-custom.top-nav-collapse {
padding: 0.375rem 1.5rem 0.375rem 2rem;
box-shadow: 0 0.0625rem 0.375rem 0 rgba(0, 0, 0, 0.1);
background-color: red;
}
.logo-img {
width: 50px;
height: 20px;
background: red;
}
.top-nav-collapse .logo-img {
background: green;
}
.nav-item {
display: inline-block;
margin: .2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark navbar-custom fixed-top">
<!-- Text Logo - Use this if you don't have a graphic logo -->
<!-- <a class="navbar-brand logo-text page-scroll" href="index.html">redacted</a> -->
<!-- Image Logo -->
<a class="navbar-brand logo-image" href="index.html">
<div class="logo-img"></div>
</a>
<!-- end of mobile menu toggle button -->
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" href="#header">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#research">RESEARCH</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#experience">EXPERIENCE</a>
</li>
<li class="nav-item">
<a class="nav-link page scroll" href="blog.html">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">CONTACT</a>
</li>
</ul>
<span class="nav-item social-icons">
<span class="fa-stack">
<a href="https://www.linkedin.com/in/redacted/">
<span class="hexagon"></span>
<i class="fab fa-linkedin-in fa-stack-1x"></i>
</a>
</span>
<span class="fa-stack">
<a href="https://github.com/redacted">
<span class="hexagon"></span>
<i class="fab fa-github fa-stack-1x"></i>
</a>
</span>
</span>
</div>
</nav>
<!-- end of navbar -->
<!-- end of navbar -->
<div style="height:10000px"></div>

Make dropdown menu floating in bootstrap

I'm trying to create a quite complex navbar using bootstrap. I wonder wether it is possible to make the dropdown menu floating, so it does not make the navbar big and ugly. The picture is quite self-explanatory:
Code:
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
#media screen and (max-width: 736px) {
.navbar-expand-lg .navbar-collapse {
flex-basis: auto;
}
.flex-derecha {
width: 250px;
position: absolute;
height: auto;
background: black;
top: 50px;
right: 0;
}
.collapse:not(.show) {
display: none !important;
}
.nav-item
{
width:250px;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>

How do I link my navigation to the toggle?

Coded a webpage as practice using some JS, everything works how I'd like except I can't figure out how to make the toggle functional. I tried a few things but it didn't work out. The page collapses, the toggle appears, but when you click on it the nav does not pop up.
Tips and suggestions would be great, thanks for your time and patience!
Link to all code on codepen here
snippet of html below
<nav class="navbar navbar-expand-lg px-4" style="font-size:25px;">
<a class="navbar-brand"></a>
<button class="navbar-toggler" data-toggle="collapse" href="myNav" role="button" type="button" >
<span class="toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto text-capitalize">
<li class="nav-item active">
<a class="nav-link" style="font-size:35px;" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link " style="font-size:35px;" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-size:35px;" href="#store">store</a>
</li>
</ul>
<div class="nav-info-items d-none d-lg-flex ">
<div class="nav-info align-items-center d-flex justify-content-between mx-lg-5">
<span class="info-icon mx-lg-3"><i class="fas fa-phone"></i></span>
<p class="mb-0">+ 123 456 789</p>
</div>
<div id="cart-info" class="nav-info align-items-center cart-info d-flex justify-content-between mx-lg-5">
<span class="cart-info__icon mr-lg-3"><i class="fas fa-shopping-cart"></i></span>
<p class="mb-0 text-capitalize"><span id="item-count">2 </span> items - $<span class="item-total">10.49</span></p>
</div>
</div>
</div>
</nav>
snippet of css below
.navbar-toggler {
outline: none !important;
}
.toggler-icon {
font-size: 2.5rem;
color: var(--mainBlue);
}
.nav-link {
color: var(--mainBlue);
font-size: 1.5rem;
transition: all 0.5s ease-in-out;
}
.nav-link:hover {
color: var(--mainYellow);
}
.cart-info__icon {
color: var(--mainBlue);
cursor: pointer;
}
I think you want Element.classList.
var toggle = document.querySelector('.toggle');
var nav = document.querySelector('.nav');
toggle.onclick = function() {
nav.classList.toggle('collapsed');
}
.nav {
background: lightblue;
transition: .2s;
}
.nav.collapsed {
opacity: 0;
}
<button class="toggle">Toggle</button>
<div class="nav">
<ul>
<li>
home
</li>
<li>
about
</li>
<li>
store
</li>
</ul>
</div>

how to develop bootstrap layout with sticky top nav, side bar and footer

I have page where there is four components.
Top Navigation
Sidebar
Footer
Main content
I want Top Navigation fixed at top and footer to be fixed at bottom. But sidebar needs to be sticked to left with the full height.
To achieve all these stuff I have created this plunker. When we run it in full screen it makes the sidebar collapse to actual height.
Here is a code
/* Styles go here */
body, html {
height:100%;
}
/*
* Off Canvas sidebar at medium breakpoint
* --------------------------------------------------
*/
#media screen and (max-width: 992px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
margin-left: -6px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
#media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
margin-left: -6px;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-body .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-body .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}
HTML
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary mb-3">
<div class="flex-row d-flex">
<button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Admin Template</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.codeply.com">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-md-3 col-lg-2 sidebar-offcanvas bg-light pl-0" id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-0 pt-5 mt-3">
<li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
<li class="nav-item">
<a class="nav-link" href="#submenu1" data-toggle="collapse" data-target="#submenu1">Reports▾</a>
<ul class="list-unstyled flex-column pl-3 collapse" id="submenu1" aria-expanded="false">
<li class="nav-item"><a class="nav-link" href="">Report 1</a></li>
<li class="nav-item"><a class="nav-link" href="">Report 2</a></li>
</ul>
</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>
<li class="nav-item"><a class="nav-link" href="#">Snippets</a></li>
<li class="nav-item"><a class="nav-link" href="#">Flexbox</a></li>
<li class="nav-item"><a class="nav-link" href="#">Layouts</a></li>
<li class="nav-item"><a class="nav-link" href="#">Templates</a></li>
<li class="nav-item"><a class="nav-link" href="#">Themes</a></li>
</ul>
</div>
<!--/col-->
<div class="col main pt-5 mt-3">
<h1 class="display-4 d-none d-sm-block">
Bootstrap 4 Dashboard
</h1>
</div>
</div>
</div>
<!--/.container-->
<footer class="container-fluid">
<p class="text-right small">©2016-2018 Company</p>
</footer>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body">
<p>This is a dashboard layout for Bootstrap 4. This is an example of the Modal component which you can use to show content. Any content can be placed inside the modal and it can use the Bootstrap grid classes.</p>
<p>
Grab the code at Codeply
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary-outline" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
With the help of Bootstrap 4 you can do the following changes on your code:
Add h-100 class to your #main container and to the .row-offcanvas right next to it.
Add fixed-bottom class to your <footer>.
Your code will look like these:
<div class="container-fluid h-100" id="main">
<div class="row row-offcanvas row-offcanvas-left h-100">
<!-- your subsequent codes -->
</div>
</div>
<!--/.container-->
<footer class="container-fluid fixed-bottom">
<!-- your footer's paragraph code -->
</footer>
You can check it on Plunker.
I think you should review the structure of your code. I hope that it helps.
Add h-100 class on both the below divs
<div class="container-fluid h-100" id="main">
<div class="row row-offcanvas row-offcanvas-left h-100">
See the updated plunker
For the footer this might help :
footer{
position: absolute;
bottom:0;
transform: translateX(-40%);
}
https://plnkr.co/edit/gKmLbFcF1IxVS7QyYyaL?p=preview - if you want this solution:
.container-fluid, .row {
height: 100%;
}