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.

Change background color with JQuery problem

I have created boxes of different colors. When the user clicks on one of the box, the background color changes.
I found a code to do this and everything works fine.
But now the menu links no longer work.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="color-boxes">
<div data-color="#000000" class="Black"></div>
<div data-color="#7E392F" class="BurntHenna"></div>
<div data-color="#AE856C" class="TawnyBirch"></div>
<div data-color="#DAB58F" class="Sheepskin"></div>
</div>
<script>
$(document).ready(function(){
$("div").click(function(){
var Color = $(this).attr("data-color");
$("body").css("background", Color);
return false;
});
});
</script>
my navbar:
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">
<img src="media/logo-bressana.png" width="250px" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="bio.html">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="press.html">Press</a>
</li>
</ul>
</div>
</nav>

Submenu of a menu doesn't open

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link dropdown-toggle" dropdownToggle>
</a>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="btn dropdown-item" *ngFor="let language of languages" (click)="setLanguage(language)">
<span style="vertical-align: super;"></span>
</a>
</div>
</li>
<!-- utente con avatar -->
<li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link float-right mt-1 pr-4" dropdownToggle>
<span class="float-left mt-1">
<i class="fa fa-user" style="font-size: 1.5rem;"></i>
<!-- prevedere user image -->
</span>
<span class="float-right mt-1 ml-1">
<div><b>user</b></div>
<div *ngIf="currentUser.roles && currentUser.roles.length == 1">desc</div>
<div *ngIf="currentUser.roles && currentUser.roles.length > 1">role</div>
</span>
</a>
<!-- menu -->
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<!-- logo confidi -->
<div class="dropdown-item text-center user-image">
<img [src]="userService.getUserPicture(currentUser?.image?.content)" class="img-fluid" alt="">
</div>
<!-- ultimo accesso -->
<div class="dropdown-item">
<div class="font-weight-bold">access </div>
<div>date</div>
</div>
<!-- matricola -->
<div class="dropdown-item">
<div class="font-weight-bold">numer </div>
<div>user</div>
</div>
<!-- ruoli -->
<div class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link dropdown-toggle font-weight-bold" dropdownToggle>roles</a>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="btn dropdown-item" *ngFor="let role of currentUser.roles; let i = index">
code - desc
</a>
</div>
</div>
<a class="dropdown-item logout-link" (click)="logout()">
<i class="fa fa-lock"></i> <span class="font-weight-bold">logout</span></a>
</div>
</li>
</ul>
</div>
</nav>
</header>
I have a dropdown-menu that contains multiple dropdown-item and an item that I want to be a submenu(that contains a list of item).
I add the submenu on my menu but when I try to open it does not open.
Here is the stackblitz
https://angular6-bootstrap4-navbar-j8ar1z.stackblitz.io
As you see there is a submenu called roles that doesn't open. How can I fix it?

The problem lies in your HTML - you cannot nest <li> tag inside of another <li> tag.
The HTML <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).
Source: MDN web docs
You can put <ul> inside of <li> though. It is actually a proper way to create a nested list.
Another thing is that you are trying to use nested dropdown and these seem to still be an experimental feature of ngx-bootstrap
Basic working example:
<!-- template.html !-->
<ul >
<li dropdown [autoClose]="false" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">Languages <span class="caret"></span></a>
<ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-nested">
<li role="menuitem" *ngFor="let lang of languages"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{lang}}</a></li>
</ul>
</li>
<li dropdown [autoClose]="false" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">User <span class="caret"></span></a>
<ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-nested">
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Settings</a></li>
<li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
<a dropdownToggle class="dropdown-item dropdown-toggle"
(click)="false">Roles<span class="caret"></span></a>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li role="menuitem" *ngFor="let role of currentUser.roles"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{role}}</a></li>
</ul>
</li>
<li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Logout</a></li>
</ul>
</li>
</ul>
// Component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
public menu: {}[] = [];
languages = ['pl', 'en', 'de', 'es'];
currentUser = {roles: ['admin', 'inboxUser', 'developer']}
}
Example on Stackblitz

jQuery toggle sidebar submenu based on active

I have a sidebar menu that's built using Bootstrap 4. To create a submenu that expanded right utilizing jQuery. It looks like this:
<div class="container-fluid">
<div class="row">
<nav class="col-md-1 d-none d-md-block sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center flex-column sidebar" href="#" data-toggle="collapse" data-target="#submenu" aria-expanded="false" id="sidebarCollapse" >
<%= image_tag 'products.png' %>
<p>Products</p>
</a>
</li>
</ul>
</div>
</nav>
<!--Product Sidebar-->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
Main Item
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</li>
</ul>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-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 mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
</div>
</div>
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
</main>
</div>
</div>
Then the jQuery:
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
This mostly works correctly. I click on the anchor tag of Products and the submenu/sidebar opens up to the right. However the problem is when not active it will show Bootstrap Sidebar and Main Item. How do I get it so that when not active that the sidebar has a visibility of hidden?
I've tried the following with jQuery with no luck:
$(document).ready(function () {
$('#sidebar').hide();
$('#sidebarCollapse').on('click', function (e) {
e.preventDefault();
$('#sidebar', this).toggle('active');
});
});

Do you have your CSS set up to hide it initially?
#sidebar {
display:none;
}
#sidebar.active{
display:block;
}

Vue.js : How to make dynamic menu?

Could someone help me with creating menus dynamically from a database? Lets say all the data from the database is already supplied by me, but I want to show a dynamic menu if a user is logged in or not.
I created some Vue components
App.vue
<template>
<div id="app">
<navbar></navbar>
<div class="page-container">
<leftmenu></leftmenu>
<container></container>
</div>
</div>
</template>
<script>
import Menu from './components/Menu.vue'
import LeftMenu from './components/Leftmenu.vue'
import Container from './components/Container.vue'
export default {
components: {
'navbar': Menu,
'leftmenu': LeftMenu,
'container': Container,
}
}
</script>
The LeftMenu component is in charge of making the menu that will make use of the database data:
Leftmenu.vue
<template>
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true"
data-slide-speed="200" style="padding-top: 20px">
<li class="sidebar-toggler-wrapper hide">
<div class="sidebar-toggler">
<span></span>
</div>
</li>
<li class="nav-item start active open">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
<ul class="sub-menu">
<router-link
to="/home"
tag="li">
<a class="nav-link">
<i class="icon-layers"></i>
<span class="title">Home</span>
<span class="badge badge-danger">5</span>
</a>
</router-link>
<router-link
to="/grafik"
tag="li">
<a class="nav-link">
<i class="icon-layers"></i>
<span class="title">Grafik</span>
<span class="badge badge-danger">5</span>
</a>
</router-link>
<router-link
to="/form"
tag="li">
<a class="nav-link">
<i class="icon-layers"></i>
<span class="title">Form</span>
<span class="badge badge-danger">5</span>
</a>
</router-link>
<router-link
to="/uploadfile"
tag="li">
<a class="nav-link">
<i class="icon-layers"></i>
<span class="title">Upload File</span>
<span class="badge badge-danger">5</span>
</a>
</router-link>
<router-link
to="/login"
tag="li">
<a class="nav-link">
<i class="icon-layers"></i>
<span class="title">Login</span>
<span class="badge badge-danger">5</span>
</a>
</router-link>
</ul>
</li>
<li class="nav-item ">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-settings"></i>
<span class="title">System</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
<a href="ui_metronic_grid.html" class="nav-link ">
<span class="title">Login</span>
</a>
</li>
<li class="nav-item ">
<a href="ui_metronic_grid.html" class="nav-link ">
<span class="title">Ganti Password</span>
</a>
</li>
<li class="nav-item ">
<a href="ui_metronic_grid.html" class="nav-link ">
<span class="title">Ganti Profil</span>
</a>
</li>
<li class="nav-item ">
<a href="ui_metronic_grid.html" class="nav-link ">
<span class="title">Logout</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
import _ from 'lodash'
export default {
created() {
if(_.isEmpty(this.$auth.getAuthenticatedUser())) {
alert('empty')
} else {
alert('user authenticated')
}
}
}
</script>
this.$auth.getAuthenticatedUser() is already done but will return an empty object if my localStorage is empty. It will but filled if I am logged in.
I am using this bit of code for it:
this.$http.get('api/getmenu')
.then(response => {
this.data = response.body
})
In which component should I query the database to obtain the data to render a menu for the logged in user?
If I place a function to query the database inside my App.vue component, then the application will show an error.
What should I put in the Leftmenu component ?