I want to use mmenu plugin on asp.net mvc at home \ index page. For this, I included the plugin in my adminLTE v.3 (bootstrap v4) themed project. But when the plugin works, it takes over the body and the menu starts working right inside the body. But where it should work is home \ index. What kind of setting should I make for this? I want help from those who use this plugin.
***UPDATED Paint drawn exactly what I want
my original AdminLTE template;
mispositioned mmenu;
original mmenu
The styles that mmenu creates inside the body of asp.net mvc
Home\Index.cshtml
@{
ViewBag.Title = "Index";
}
<link type="text/css" rel="stylesheet" href="~/mmenu/demo/css/demo.css" />
<link type="text/css" rel="stylesheet" href="~/mmenu/dist/mmenu.css" />
<div id="page">
<div class="header">
<a href="#menu"><span></span></a>
Demo
</div>
<div class="content">
<p>
<strong>This is a demo.</strong><br />
Click the menu icon to open the menu.
</p>
</div>
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li>
<span>About us</span>
<ul>
<li><a href="#about/history">History</a></li>
<li>
<span>The team</span>
<ul>
<li>
<a href="#about/team/management">Management</a>
</li>
<li>
<a href="#about/team/sales">Sales</a>
</li>
<li>
<a href="#about/team/development">Development</a>
</li>
</ul>
</li>
<li><a href="#about/address">Our address</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
<li class="Divider">Other demos</li>
<li><a href="advanced.html">Advanced demo</a></li>
<li><a href="onepage.html">One page demo</a></li>
</ul>
</nav>
</div>
@section Scripts
{<script type="text/javascript">
$(document).ready(function () {
const menu = new Mmenu(
document.querySelector('#menu')
);
});
</script>
}
<script src="~/mmenu/dist/mmenu.polyfills.js"></script>
<script src="~/mmenu/dist/mmenu.js"></script>
_Layout.cshtml
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>@ViewBag.Title - Merinos Tablet</title>
<!-- Font Awesome Icons -->
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
@Html.Partial("_Header")
@Html.Partial("_Sidebar")
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">@ViewBag.Title</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">
@Html.ActionLink(@ViewContext.RouteData.Values["controller"].ToString(),
@ViewContext.RouteData.Values["action"].ToString(), @ViewContext.RouteData.Values["controller"])
</li>
@*@if (@ViewContext.RouteData.Values["controller"].ToString() != "Dashboard" ||
@ViewContext.RouteData.Values["action"].ToString() != "Dashboard")
{
}*@
<li class="breadcrumb-item active">@ViewBag.Title</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
@RenderBody()
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
@Html.Partial("_Footer")
@Html.Partial("_Aside")
</div>
<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/adminlte/js")
@RenderSection("scripts", required: false)
</body>
</html>
mmenu.demo.css
.header,
.content,
.footer {
text-align: center;
}
.header,
.footer {
background: #4bb5ef;
font-size: 16px;
font-weight: bold;
color: #fff;
line-height: 44px;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 44px;
padding: 0 50px;
}
.header.fixed {
position: fixed;
top: 0;
left: 0;
}
.footer.fixed {
position: fixed;
bottom: 0;
left: 0;
}
.header a {
display: block;
width: 28px;
height: 18px;
padding: 11px;
margin: 2px;
position: absolute;
top: 0;
left: 0;
}
.header a:before,
.header a:after {
content: '';
display: block;
background: #fff;
height: 2px;
}
.header a span {
background: #fff;
display: block;
height: 2px;
margin: 6px 0;
}
.content {
padding: 150px 50px 50px 50px;
}