I have two navigations. One sideNav and one navbar. The problem is that my sideNav overlaps everything. It's on top of the navbar and the footer. How can I move this under all of the layers? Here is an image to assist.. enter image description here I am using MVC with the navbar in my _layout.cshtml page, and the sidenav inside of my List.cshtml page.
SideNav
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav sn-bg-1 fixed">
<ul class="custom-scrollbar">
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect arrow-r">
<i class="fas fa-hand-pointer"></i> Websites<i class="fas fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body">
<ul class="list-unstyled">
<a class="collapsible-header waves-effect arrow-r">
<i class="fas fa-hand-pointer"></i> Sort By Category<i class="fas rotate-icon"></i>
</a>
<li>
For authors
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> Marketing<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul class="list-unstyled">
<li>
Introduction
</li>
<li>
Monthly meetings
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact me<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul class="list-unstyled">
<li>
FAQ
</li>
<li>
Write a message
</li>
<li>
FAQ
</li>
<li>
Write a message
</li>
<li>
FAQ
</li>
<li>
Write a message
</li>
<li>
FAQ
</li>
<li>
Write a message
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<li>
<ul class="social">
<li><i class="fab fa-facebook-f"> </i></li>
<li><i class="fab fa-pinterest"> </i></li>
<li><i class="fab fa-google-plus-g"> </i></li>
<li><i class="fab fa-twitter"> </i></li>
</ul>
</li>
<div class="sidenav-bg mask-strong"></div>
</div>
<!--/. Sidebar navigation -->
navbar
<nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" style="background-color: #4285f4">
<a class="navbar-brand font-weight-bold" asp-controller="Product" asp-action="List" id="navpadding"><strong>FIVEMANGO</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
#if (User.Identity.IsAuthenticated)
{
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Cart" asp-action="Index">
<i class="fas fa-shopping-cart blue-text"></i> Cart
</a>
</li>
<li class="nav-item dropdown ml-3">
<a class="nav-link dropdown-toggle waves-effect waves-light dark-grey-text font-weight-bold"
id="navbarDropdownMenuLink-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user blue-text"></i> Profile
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-cyan" aria-labelledby="navbarDropdownMenuLink-4">
#*<a class="dropdown-item waves-effect waves-light" asp-controller="Account" asp-action="Login">Login</a>*#
<a class="dropdown-item waves-effect waves-light" asp-controller="User" asp-action="Index">View Orders</a>
<a class="dropdown-item waves-effect waves-light" asp-controller="Account" asp-action="Logout">Log out</a>
</div>
</li>
</ul>
}
else
{
<ul class="navbar-nav ml-auto">
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Account" asp-action="Register">
<i class="fas fa-registered blue-text"></i> Sign Up
</a>
</li>
<li class="nav-item ml-3">
<a class="nav-link waves-effect waves-light dark-grey-text font-weight-bold" asp-controller="Account" asp-action="Login">
<i class="fas fa-user blue-text"></i> Login
</a>
</li>
</ul>
}
</div>
</nav>
Related
I am facing a weird issue with AdminLTE admin panel template which is I am using for my Angular 11 app. Its all loading the menu item. No issue with it. But when clicking an item refreshes the page instead of expanding the group.
Here is how it looks
When I clicking on Data Reconciliation for example, it reloads the page again. Then when I click it again, it expands the group
Here is the markup
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Data Reconciliation
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
</ul>
</li>
<li class="nav-header">Reports</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-copy"></i>
<p>
Layout Options
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">6</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="pages/layout/top-nav.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Top Navigation</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="./index3.html" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Dashboard v3</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
What could be the reason? Is this issue have any connection with Angular?
Replace ALL
href="#"
by
[routerLink]=""
This should works.
I have a problem in my burger menu. It is not hiding after I click on the menu. I'm a beginner and I don't know where the problem is?
I need your help please. If you need any other information about my code feel free to ask me.
<nav id="navbar" class="navbar default">
<div class="container mob-logo">
<div class="navbar-header col-sm-2 tablet-logo">
<button type="button" class="navbar-toggle mob-menu" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
<span class="icon-bar nature"></span>
</button>
<div class="mobile-sidebar">
<span class="sidebar-btn btn fa-bar-hide" data-action="toggle" data-side="right" >
<i class="fa fa-bars"></i>
</span>
</div>
</div>
<div class="collapse navbar-collapse " id="myNavbar" >
<ul class="nav navbar-nav pull-right ">
<li class="active">
<a href="#accueil" data-du-smooth-scroll data-du-scrollspy>Accueil</a>
</li>
<li class="active">
<a href="#home" data-du-smooth-scroll data-du-scrollspy>Groupe</a>
</li>
<li>
<a href="#Competences" data-du-smooth-scroll data-du-scrollspy>Competences</a>
</li>
<li>
<a href="#Services" data-du-smooth-scroll data-du-scrollspy>Services</a>
</li>
<li>
<a href="#References" data-du-smooth-scroll data-du-scrollspy>References</a>
</li>
<li>
<a href="#contact" data-du-smooth-scroll data-du-scrollspy>Contact</a>
</li>
</ul>
</div>
</div>
</nav>
$(document).ready(function(){
$(".mob-menu").click(function(){
$(this).hide();
});
});
Please refer: APEC Energy
In the right corner, there is a user icon. On clicking it, we can see an accordion in the dropdown menu. How can this be achieved?
I have put together a JSFiddle with the basic code. I removed all my trials of the accordion because whatever I tried only breaks the code.
My code for the navbar:
<!-- Navigation -->
<div id="gxcpl" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand hidden-lg hidden-md" href="#">Living Ahimsa</a>
<a class="hidden-sm hidden-xs" href="#">
<img class="gxcpl-logo" src="assets/images/logo.png" />
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Homes
<ul class="dropdown-menu" role="menu">
<li>Introduction</li>
<li>Innovation</li>
<li>Services</li>
<li>Development</li>
<li>Future</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Energy
<ul class="dropdown-menu" role="menu">
<li>BIO Heating</li>
<li>BIO Lighting</li>
<li>BIO Air</li>
<li>BIO Frequency</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Water
<ul class="dropdown-menu" role="menu">
<li>Whole House Filter</li>
<li>Reverse Osmosis</li>
<li>Portable Filters</li>
<li>Portable Storage</li>
<li>Rain Water Storage</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Garden
<ul class="dropdown-menu" role="menu">
<li>Bio Grow System</li>
<li>Bio Watering System</li>
<li>Indoor Growing</li>
<li>Organic Seeds</li>
<li>Organic Plants</li>
</ul>
</li>
<li class="dropdown">
<i class="fa fa-angle-down"></i> Bio Health
<ul class="dropdown-menu" role="menu">
<li>Core Health</li>
<li>Oils</li>
<li>Raw Foods</li>
<li>Natural Supplements</li>
<li>Protien</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-angle-down"></i> <i class="fa fa-user-o"></i>
<ul class="dropdown-menu" role="menu">
<li>Shopping Basket</li>
<li>Contact Us</li>
<li>Call Request</li>
<li>Account Settings</li>
<li>Login/Register</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Navigation -->
Your JSFiddle seems to have accordion menu. I don't understand, what behaviour is missing?
Hi,My question is how to drag the content when clicks on any option in
dropdown,colud you please tel me...
it is leftside menu-bar,when clicks on any dropdown item it is covering the below menu-bar list,so i need to drag the other menu bar
list when clicks on any dropdown list..
<ul class="sidebar-menu">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="active dropdown">
<a href="general.html" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-gavel"></i> <span>General <span class="caret"></span></span>
</a>
<ul class="dropdown-menu">
<li><a href="#General1" class="btn btn-success" data-toggle="tab" >General1</a></li>
<li><a href="#General2" class="btn btn-success" data-toggle="tab" >General2</a></li>
<li>General3</li>
</ul>
</li>
<li>
<a href="basic_form.html">
<i class="fa fa-globe"></i> <span>Basic Elements</span>
</a>
</li>
<li>
<a href="simple.html">
<i class="fa fa-glass"></i> <span>Simple tables</span>
</a>
</li>
</ul>
<div id="wrapper">
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse collapse">
<ul class="nav" id="side-menu">
<li>
<a class="active" href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Operation <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<i class="fa fa-bar-chart-o fa-fw"> </i> Request<span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
<i class="fa fa-dashboard fa-fw"></i> Browse
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Add
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Hello,
I have a bootstrap (3) side menu who works great but I can't understand why third level collapse (and with him his parent) on click.
I'd like to prevent his collapse and make it works like the second level.
Any suggestions?
Thanks.