I am currently using the CoreUI admin template. The layout I have set up is the basic one outlined on the following page:
My goal is to make the aside menu appear on the right side of the main content, floating over it rather than inline and reducing the width of the main section.
I have attempted to remove the class "aside-menu-fixed" and add either "aside-menu-floating" or "aside-menu-absolute", but these changes do not seem to take effect.
Is there a way to achieve this without needing to modify the CSS provided by CoreUI?
Below is a snippet of the code, however please note that it may not work perfectly here on SO:
.app-header{background-color:#4B8BF4}
.sidebar{background-color:#FFCD42}
.app-footer{background-color:#DD4F43}
.aside-menu{background-color:#19A15F}
.main{background-color:#EEE}<link href="https://cdn.jsdelivr.net/npm/@coreui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0804190e1e022b59455a455c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@coreui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c5c9d4c3d3cfe69488978891">[email protected]</a>/dist/css/coreui.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@coreui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae9e5f8efffe3cab8a4bba4bd">[email protected]</a>/dist/js/coreui.min.js"></script>
<body class="app header-fixed sidebar-fixed aside-menu-fixed sidebar-lg-show">
<header class="app-header navbar">
<!-- Header content here -->
<h2>I'm the header!</h2>
</header>
<div class="app-body">
<div class="sidebar">
<!-- Sidebar content here -->
<nav class="sidebar-nav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="index.html">
<i class="nav-icon icon-speedometer"></i> Dashboard
</a>
</li>
<li class="nav-title">Settings</li>
</ul>
</nav>
</div>
<main class="main">
<h1>I'm the main content...</h1>
</main>
<aside class="aside-menu">
<!-- Aside menu content here -->
</aside>
</div>
<footer class="app-footer">
<!-- Footer content here -->
</footer>
</body>