We Keep Coding

JQuery dropdown toggle not working on mobile but works perfect locally

I have a nav menu with dropdown lists. When running locally and clicking the element the dropdown menu list appears perfect. When actually attempting on a mobile device it does nothing. Any suggestions why this maybe happening and how to fix?
I have figured that the script injecting the header.html is breaking the toggle? If I put the entire header.html code in index.html the dropdown works on mobile .... any suggestions / alternatives to how I am injecting the header.html code, other than PHP.
Html (index.html)
<!-- Header -->
<header id="main-header" class="header-main header-dark fixed-top header-fluid">
<script>
fetch('/includes/header.html')
.then(response => response.text())
.then(value => {
document.getElementById('main-header').innerHTML = value
});
</script>
</header>
<!-- Header End -->
Worth noting I am injecting the header via JQuery - see screenshot below
Feel free to demo at http://credit.fleetfactors.co.uk, try on desktop, mobile and desktop (inspect as mobile device)...
Scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="static/vendor/counter/jquery.countTo.js"></script>
<!-- typed -->
<script src="static/vendor/typed/typed.js"></script>
<!-- owl-carousel -->
<script src="static/vendor/owl-carousel/js/owl.carousel.min.js"></script>
<!-- magnific -->
<script src="static/vendor/magnific/jquery.magnific-popup.min.js"></script>
<script src="static/vendor/isotope/isotope.pkgd.min.js"></script>
<!-- svg-injector -->
<script src="static/vendor/svginjector/svg-injector.min.js"></script>
<!-- jarallax -->
<script src="static/vendor/jarallax/jarallax-all.js"></script>
<!-- count-down -->
<script src="static/vendor/count-down/jquery.countdown.min.js"></script>
<!-- working form -->
<script src="static/vendor/mail/js/form.min.js"></script>
<script src="static/vendor/mail/js/script.js"></script>
JQuery
CRE.MegaMenu = function() {
var mDropdown = $(".px-dropdown-toggle")
mDropdown.on("click", function() {
$(this).parent().toggleClass("open-menu-parent");
$(this).next('.dropdown-menu').toggleClass("show");
$(this).toggleClass("open");
});
}
Includes (header.html)
<div class="header-top header-border-bottom small">
<div class="container">
<div class="d-flex justify-content-between align-items-center">
<!-- Left -->
<div class="d-flex align-items-center justify-content-center d-none d-lg-block">
<ul class="nav">
<li class="nav-item me-3 text-white">
<span>
<i class="fa fa-envelope me-2"></i>
Email: sales#fleetfactors.co.uk
</span>
</li>
<li class="nav-item">
<a href="#" class="navbar-link text-white">
<i class="fas fa-headset me-2"></i>
Call: 01642 770 664
</a>
</li>
</ul>
</div>
<!-- Right -->
<div class="d-flex align-items-center justify-content-center w-100 w-lg-auto">
<!-- Language -->
<div class="dropdown ms-0 ms-lg-3">
<a class="dropdown-toggle text-white" href="#" role="button" id="dropdown_language" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa-fw me-2 bi bi-globe"></i>Global</a>
<div class="dropdown-menu mt-2 shadow" aria-labelledby="dropdown_language" style="margin: 0px;">
<span class="dropdown-item-text">Select Site</span>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i class="fa-fw me-2 bi bi-cart4"></i> Fleet Shop</a>
<a class="dropdown-item" href="#"><i class="fa-fw me-2 bi bi-upc-scan"></i> E-Cat</a>
</div>
</div>
<!-- Top link -->
<ul class="nav ms-auto ms-lg-3">
<li class="nav-item">
Contact
</li>
<li class="nav-item">
<i class="fa-solid fa-folder-open me-2"></i>Downloads
</li>
</ul>
<!-- Top social -->
<div class="nav header-social justify-content-end d-none d-lg-block">
<a class="h-social-link" href="#"><i class="bi bi-facebook"></i></a>
<a class="h-social-link" href="#"><i class="bi bi-twitter"></i></a>
<a class="h-social-link" href="#"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- End Top Header -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<!-- Logo -->
<a class="navbar-brand" href="index.html">
<img class="logo-dark" src="/static/img/fleet-logo-dark.svg" width="160px" title="" alt="">
<img class="logo-light" src="/static/img/fleet-logo-light.svg" width="160px" title="" alt="">
</a>
<!-- Logo -->
<!-- Mobile Toggle -->
<button class="navbar-toggler ms-auto me-2" 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>
<!-- End Mobile Toggle -->
<!-- Menu -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto">
<li class="nav-item">
<a href="https://fleetfactors.co.uk" class="nav-link">
Home
</a>
</li>
<li class="dropdown nav-item">
Company
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/company/about-us.html">About Us</a></li>
<li><a class="dropdown-item" href="/company/team.html">Our Team</a></li>
<li><a class="dropdown-item" href="/company/corporate-social-values.html">Corporate Social Values</a></li>
<li><a class="dropdown-item" href="/company/qhse.html">QHSE</a></li>
<li><a class="dropdown-item" href="/careers.html">Careers</a></li>
<li><a class="dropdown-item" href="/news.html">News & Events</a></li>
</ul>
</li>
<li class="dropdown nav-item">
Services
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/brands.html">Brands</a></li>
<li><a class="dropdown-item" href="/services/stores-management.html">Stores Management</a></li>
<li><a class="dropdown-item" href="/services/commercial-parts.html">Bus, Truck & Trailer Parts</a></li>
<li><a class="dropdown-item" href="/services/consumables.html">Consumables</a></li>
<li><a class="dropdown-item" href="/services/lubricants.html">Lubricant Products</a></li>
<li><a class="dropdown-item" href="/services/refinish.html">Refinish Products</a></li>
<li><a class="dropdown-item" href="/services/ppe.html">PPE Products & Embroidery</a></li>
<li><a class="dropdown-item" href="/services/janitorial.html">Janitorial Products</a></li>
</ul>
</li>
<li class="dropdown nav-item">
Resources
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/resources/brand-guidelines.html">Brand Guidelines</a></li>
<li><a class="dropdown-item" href="/resources/promotions.html">Promotions</a></li>
<li><a class="dropdown-item" href="/resources/brochures.html">Brochures</a></li>
<li><a class="dropdown-item" href="/resources/accreditations.html">Accreditations</a></li>
</ul>
</li>
<li class="dropdown nav-item">
Support
<label class="px-dropdown-toggle mob-menu"></label>
<ul class="dropdown-menu left list-unstyled">
<li><a class="dropdown-item" href="/support/returns-policy.html">Returns</a></li>
<li><a class="dropdown-item" href="/support/delivery-policy.html">Delivery</a></li>
<li><a class="dropdown-item" href="/branch-locator.html">Branch Locator</a></li>
<li><a class="dropdown-item" href="/contact-us.html">Contact Us</a></li>
</ul>
</li>
</ul>
</div>
<!-- End Menu -->
<div class="nav flex-nowrap align-items-center">
<!-- Nav Search-->
<div class="nav-item">
<a class="nav-link pe-0 collapsed display-7 py-0 me-3" data-bs-toggle="collapse" href="javascript:void(0)" data-bs-target="#search-open" aria-expanded="false">
<i class="bi bi-search display-8"> </i>
</a>
</div>
<!-- Nav Button -->
<div class="nav-item d-none d-xl-block">
Login to Fleet Shop<i class="bi bi-arrow-right-short ms-2"></i>
</div>
</div>
</div>
</nav>

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.

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

bootstrap navbar items alignment when toggle button is clicked

In small screen when I click toggle button my navbar items are appear below the search bar as shown below. I want to align the notification bell and welcome user elements just below the about like home and about .
Here is my html code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" 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>
<div class="nav navbar-nav pull-right">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user">
</span>Welcome, User <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="icon-cog"></i> Preferences</li>
<li><i class="icon-envelope"></i> Contact Support</li>
<li class="divider"></li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
</ul>
</div>
<div class="nav navbar-nav dropdown pull-right">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
<i class='fa fa-bell faa-ring animated fa-1x'></i>
<i class="glyphicon glyphicon-bell"></i>
</a>
<ul class="dropdown-menu notifications" role="menu" aria-labelledby="dLabel">
<div class="notification-heading"><h4 class="menu-title">Notifications</h4><h4 class="menu-title pull-right">View all<i class="glyphicon glyphicon-circle-arrow-right"></i></h4>
</div>
<li class="divider"></li>
<div class="notifications-wrapper">
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 · day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 · day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
<a class="content" href="#">
<div class="notification-item">
<h4 class="item-title">Evaluation Deadline 1 • day ago</h4>
<p class="item-info">Marketing 101, Video Assignment</p>
</div>
</a>
</div>
<li class="divider"></li>
<div class="notification-footer"><h4 class="menu-title">View all<i class="glyphicon glyphicon-circle-arrow-right"></i></h4></div>
</ul>
</div>
</div><!--/.nav-collapse -->
</div>
</nav>
Here is the js code for the toggle menu. Is this problem of js or html ?
/*Menu-toggle*/
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});

You can simply do it by using "hidden-xs" class and "visible-xs" class on Bootstrap
First, adding "hidden-xs" to hide them on mobile screen
<ul class="nav pull-right hidden-xs">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user">
</span>Welcome, User <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="icon-cog"></i> Preferences</li>
<li><i class="icon-envelope"></i> Contact Support</li>
<li class="divider"></li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
</ul>
Second, copy the above code just before Home link and add "visible-xs" class to tell browser that this only show on mobile screen.
<li class="dropdown visible-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user">
</span>Welcome, User <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><i class="icon-cog"></i> Preferences</li>
<li><i class="icon-envelope"></i> Contact Support</li>
<li class="divider"></li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
Please read here for more information

There is a Delay when refreshing / reload two divs

I use codeigniter php frame work for my project I am able to refreah / reload my selected divs
<script type="text/javascript">
$('#button-refresh').on('click', function(e) {
e.preventDefault();
});
$(document).ready(function() {
var refresh = function () {
$("#newtotalinbox").load(window.location.href + " #newtotalinbox");
$('#menu_unread').load(window.location.href + " #menu_unread");
}
setInterval(refresh, 60 * 1000);
refresh();
});
</script>
How ever there seems to be a few seconds delay between the two.
It does not change at the same time.
Question how to make sure the refresh / reload of both divs done at the same time?
Here is my dashboard view
<div class="content-wrapper">
<div class="container-fluid">
<ol class="breadcrumb">
<li class="breadcrumb-item">
Dashboard
</li>
<li class="breadcrumb-item active">My Dashboard</li>
</ol>
<div class="row">
<div class="col-sm-12 mb-3">
<button class="btn btn-dark btn-lg" id="button-refresh"><i class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="card text-white bg-primary o-hidden h-100" id="inbox-dashbord">
<div class="card-body" id="total_inbox">
<div class="card-body-icon">
<i class="fa fa-fw fa-comments"></i>
</div>
<div class="mr-5" id="newtotalinbox"><?php echo $total_inbox;?> New Messages</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="<?php echo base_url('mail/inbox');?>">
<span class="float-left">View Inbox</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
Here is my Menu view
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-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 navbar-sidenav" id="exampleAccordion">
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('dashboard');?>">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-danger text-white" id="compose-button">
<span class="nav-link-text">Compose</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('mail/inbox');?>">Inbox <span id="menu_unread" class="text-white"><?php echo $menu_unread;?></span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('mail/sent');?>">
<span class="nav-link-text">Sent</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('mail/drafts');?>">Drafts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('mail/spam');?>">Spam
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('mail/trash');?>">Trash
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseExamplePages" data-parent="#exampleAccordion">Events
</a>
<ul class="sidenav-second-level collapse" id="collapseExamplePages">
<li>
Create Event
</li>
<li>
View All Events
</li>
</ul>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('logout');?>">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>