We Keep Coding

Collapsed navbar push elements outside of parent container when shown (Bootstrap 5)

Intro
I'm using Bootstrap 5 (bundled with webpack 5), with his grid system and the collapse function to create the home page to this site, that has 2 sidebars that collapse into a topbar.
When we get to a mobile format the navs collapse and the columns containing them stack up leaving the 3rd col with the logo at the bottom without overflowing the parent.
Look at my 100% accurate ms paint graphics to understand better
Issue
When we show the collapsed navs, the columns containing them push the 3rd col with the logo out of the row and the container-fluid containing it.
Question
How can i make the navs expanding without pushing the logo? (to clarify the logo needs to stay below the navs
ms paint 100% accurate graphics
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 order-0 my-auto">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand brand d-lg-none" href="#"
><b>ENV</b>Productions</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul
class="navbar-nav flex-column justify-content-between text-center text-lg-start"
>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SEVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-10 order-lg-1 order-last my-auto text-center">
<a class="navbar-brand brand d-none d-lg-block" href="#"
><b>ENV</b>Productions</a
>
<img
src="assets/img/BG_ENV_MONO-800px.png"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-1 order-lg-2 my-auto">
<nav class="navbar navbar-expand-lg">
<div
class="collapse navbar-collapse justify-content-end"
id="navbarResponsive"
>
<ul
class="navbar-nav flex-row flex-lg-column justify-content-around justify-content-lg-between"
>
<li class="nav-item text-center">
<a
href="https://www.instagram.com/env.productions/?hl=it"
target="”_blank”"
><i class="fa fa-instagram fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.youtube.com/channel/UCIloBELeZR4x8jmrhIQXQCw/featured"
target="”_blank”"
><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.facebook.com/env.productions/"
target="”_blank”"
><i class="fa fa-facebook-f fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.linkedin.com/company/env-productions/"
target="”_blank”"
><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>

I solved this by making the logo a background-image and merging the collapsible elements under the same parent with js.
There's probably a better solution though and maybe one that let you have the image at a block/inline level.

How to close a sidebar when clicking outside the bar using JavaScript

In my angular application for small devices the sidebar toggling is working but I want to to close or hide the sidebar when we click on anywhere on the page(i.e body).
.component.html
<nav class="sidebar sidebar-offcanvas active" id="sidebar">
<ul class="nav">
<li class="nav-item nav-profile">
<a href="javascript:;" class="nav-link">
<div class="nav-profile-image">
<img src="assets/images/bbbs2.png" alt="profile">
<span class="login-status online"></span>
<!--change to offline or busy as needed-->
</div>
<div class="nav-profile-text">
<span class="font-weight-bold mb-2" style="color: #00B5B8"></span>
</div>
</a>
</li>
<li class="nav-item" [ngClass]="{ 'active': dashboard.isActive }">
<a class="nav-link" routerLink="/dashboard" routerLinkActive #dashboard="routerLinkActive">
<span class="menu-title" style="color: #00B5B8">Dashboard</span>
<i class="mdi mdi-home menu-icon" style="color:#00B5B8"></i>
</a>
</li>
// --and some more sidebar tabs
Now I want to remove the sidebar when the class is not active (class name is active).

<nav
class="sidebar sidebar-offcanvas"
[ngClass]="{'active': condition}"
id="sidebar">...
In this way you can control if class "active" is inserted or not.
The condition obviously is a boolean and you can control it by a click listener in the rest of your application.
...
...
Maybe you can use a service variable, localstorage, or a store...

Bootstrap 3 Website Header Menu Collapse Not Working in Middle Screen Widths

I have found that the header menu on my website changes from a horizontal to a vertical menu when shrinking below a specified size (presumably the tablet width), rather than collapsing so that the bars icon needs to be clicked to show the full menu, the full menu stays open blocking access to the page below. When shrunk yet further (presumably to mobile width) the vertical menu does collapse leaving the icon to be clicked, which is exactly what should happen. The HeaderMenu.cshtml and _Header.cshtml are shown below:
<div class="navbar-collapse collapse float-right nav-main-collapse">
<nav class="nav-main">
<ul id="topMain" class="nav nav-tabs nav-button-tabs nav-tabs-justified">
<li class="nav-item">Home</li>
<li class="nav-item">Meetings</li>
<li class="nav-item">News</li>
<!--<li class="nav-item">Notes & Queries</li>-->
<li class="nav-item">Proceedings</li>
<li class="nav-item">Publications</li>
<li class="nav-item">Gallery</li>
<li class="nav-item">Membership</li>
<li class="nav-item">Enquiries</li>
<li class="nav-item">Committee</li>
<li class="nav-item">Links</li>
#if (SignInManager.IsSignedIn(User))
{
<li class="nav-item">Admin</li>
}
</ul>
</nav>
</div>
<div id="header" class="navbar-toggleable-md sticky clearfix">
<!-- TOP NAV -->
<header id="topNav">
<div class="container">
<!-- Mobile Menu Button -->
<button class="btn btn-mobile" data-toggle="collapse" data-target=".nav-main-collapse">
<i class="fa fa-bars"></i>
</button>
<link rel="shortcut icon" href="http://historyofbath.org/HBRG Logo.png" type="image/x-icon" />
<!-- Logo -->
<a class="logo float-left" href="/">
<img style="height:100px;" src="~/images/HBRG Logo.png" alt="Logo" />
</a>
#Html.Partial("_HeaderMenu")
</div>
</header>
<!-- /Top Nav -->
</div>
The odd thing is that I have an almost identical site where this problem does not occur. All of the css libraries are the same, the scripts.js is identical, etc. One was built from the other and this header menu is identical apart from the obvious internal references. I have tinkered around with this endlessly and cannot get the vertical menu to collapse as it should.

I hope this help you:
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
<a class="navbar-brand" href="#">Absalon TTT</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>

I found that the issue was in the _Layout.cshtml file:
<!-- CORE CSS -->
`<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />`
`<link href="~/lib/bootstrap3/css/bootstrap.min.css" rel="stylesheet" />`
by removing the reference to bootstrap3 the menu in mobile landscape mode comes up as a collapsed icon as it should.
If anyone can explain why this caused an issue here and yet works fine in the Staging, Production section, please let me know.

Render a main menu into a fixed navbar when scrolling on the browser

I'm using bootstrap latest version.
I create a main menu like this:
This is the code for in my html view:
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-folder-close"></span>
<p>header Menu 1</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-flash"></span>
<p>header Menu 2</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-list-alt"></span>
<p>header Menu 3</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-home"></span>
<p>header Menu 4</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-wrench"></span>
<p>header Menu 5</p>
</button>
</div>
</div>
</div>
</div>
Now I would like, when user scrolling, change this menu into a fixed to top navbar like this (check the link to have a better idea, scroll to see the animation):
this is the code for the nav fixed to top:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#dropdown-thumbnail-preview">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand active" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="dropdown-thumbnail-preview">
<ul class="nav navbar-nav">
{# Suivis Fluides #}
<li class="dropdown thumb-dropdown">
Header Menu 1 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Suivis Contrats #}
<li class="dropdown thumb-dropdown">
Header Menu 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Gestion Patrimoines #}
<li class="dropdown thumb-dropdown">
Header Menu 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Gestion Equipements Technique #}
<li class="dropdown thumb-dropdown">
Header Menu 4 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# User #}
<li class="dropdown thumb-dropdown navbar-right">
Menu Header 5 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
The purpose of this question is to render my main menu into a navbar fixed to top when user is scrolling.
Anybody knows what is the best solution and to make this?

You could use something like Prinzhorn/skrollr or imakewebthings/waypoints to define, when (talking about scroll position) to add/remove a class which makes the navbar sticky.

You can do something like below if you have an option of including jquery
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) //Change this value 280 as per your need
{
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});

Considering the structure of each navigation is different, I would suggest hiding/showing each element with a css class of hidden. Then it's just a matter of adding/removing that class when the first nav is scrolled equal to or passed the top of the viewport.
The jQuery would look something like this:
//Fired when the page is scrolling
$(window).scroll(function() {
var window = $(this);
//Create a reference to both navigations
var buttonNav = $('#buttonNav');
var fixedNav = $('#fixedNav');
if(window.scrollTop() >= buttonNav.offset().top) {
//Hide the buttonNav and Show the fixed nav
buttonNav.addClass('hidden');
fixedNav.removeClass('hidden');
} else {
//The opposite
fixedNav.addClass('hidden');
buttonNav.removeClass('hidden');
}
}
Keep in mind that you will need to add id's to each nav in order to reference them with jQuery and the hidden class just needs the css property display: none; in it. Hope this helps :)

Thanks to you all , I found a solution for my project, following the specification of my clients.
First, I add an id to the button nav, named firstMainMenu. Then, I add an id for the navbar named secondMainMenu. I add an hidden class for the navbar and make the script.
This is the script for:
$(window).scroll(function() {
if ($(this).scrollTop()>222) {
$('#secondMainMenu').removeClass('hidden').fadeIn();
$('#firstMainMenu').addClass('hidden').fadeOut('fast');
} else {
$('#secondMainMenu').fadeOut('fast');
$('#firstMainMenu').removeClass('hidden').fadeIn('slow');
}
});
This is the code who works for me. But the three answer are right too. Tahnk you to all of you for your suggestions. You are the best.
Don't hesitate if you have suggestions or edits for this script.

Dropdown menu overflow not working when inside a bootstrap nav bar

I have this dropdown menu which works great:
<div class="btn-group pull-left">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-map-marker icon-large"></i> Change Site
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="arSiteList">
<li>
<a href='#'><b>Select a site</b></a>
</li>
<li class="divider"></li>
</ul>
</div>
When the list of dropdown items is longer than the screen, scrolling the mouse wheel will scroll down through the list of items. This is perfect.
However, when I moved the dropdown menu into the nav bar, it stopped working:
<div class="navbar navbar-fixed-top" >
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="http://portal.parworksapi.com/ar/mars/portal/developer">PAR Works</a>
<div class="btn-group pull-left">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-map-marker icon-large" ></i> My Sites <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="arSiteList" style="overflow: scroll;">
<li><a href='#'><b>Select a site</b></a></li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
The dropdown still opens, but when the list of items is too long it's impossible to scroll through them.
How can I make scrolling work inside the nav bar?

Check all parent elements of your menu on existing "overflow: hidden;" property in CSS