2
I have a little problem that for who knows should be relatively simple, but being a little new in the Front branch I’m having some problems, is the following, I need to make a site with a fixed menu side, as I’m using bootstrap, I managed to get a medium that ready, after making some aesthetic changes it was perfect to leave on my site, HOWEVER, it is a retractable menu, so I have to press a button on the site for the menu to appear, I need to change this, I need to make it visible and present all the time, the menu I’m using is this: https://startbootstrap.com/template-overviews/simple-sidebar/ <- in this link it is possible to download the full menu template already with css and js from the menu.
HTML MENU CODE:
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Shortcuts</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
<a href="#menu-toggle" class="btn btn-secondary" id="menu-toggle">Toggle Menu</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu est augue. Duis ac mollis lacus. Proin sodales consequat enim at fermentum. Donec eget egestas tellus. Nam egestas tristique aliquam. Sed aliquam feugiat bibendum. Pellentesque mattis felis nec varius vehicula. Donec blandit tristique ipsum vitae commodo. Fusce at ex fringilla, vulputate nibh vitae, gravida nibh. Fusce eget cursus est, a placerat arcu. Maecenas non turpis dolor. Quisque non enim non lacus euismod mattis. Sed sit amet purus tellus. Maecenas ut mollis diam. Nullam sed fringilla magna, at vestibulum neque. Vestibulum fringilla leo id feugiat placerat.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dignissim non enim ac dapibus. Integer suscipit turpis metus, non dignissim arcu laoreet in. Ut iaculis, arcu sit amet varius vestibulum, felis velit facilisis tortor, ac iaculis nisi est a ante. Nam rutrum elit nec magna porttitor, in efficitur mauris placerat. Morbi luctus varius ligula id consectetur. Cras efficitur enim orci, eu sagittis urna lacinia eu. Integer sed elit eget metus posuere cursus ut sed elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc metus eros, luctus et ante ut, elementum dictum neque. Vivamus pellentesque sollicitudin dui sed fringilla. Praesent posuere malesuada enim et dictum.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean dictum commodo sollicitudin. Vestibulum viverra, sapien et suscipit viverra, arcu massa finibus nisi, quis iaculis purus arcu mollis turpis. Donec nec velit sed turpis dignissim mollis. Nulla facilisis rhoncus ante, vel venenatis purus gravida eget. Praesent accumsan elementum dui eu tempor. Duis sit amet mi sagittis elit pulvinar aliquet. Sed auctor nibh sapien, eget placerat nulla tempor cursus. Ut suscipit lectus quam, sit amet laoreet nisi volutpat nec. Donec tempor nec felis id lobortis. Donec lacinia mi sed elit vulputate, et eleifend arcu eleifend. Mauris eu aliquam sem.
Ut posuere lorem sem, nec tempus sem tristique at. Maecenas vehicula velit in gravida ultricies. Pellentesque dictum tortor a mi congue, nec commodo ipsum bibendum. Suspendisse sed purus vitae ex blandit pharetra vitae egestas est. Nulla semper vitae quam eu luctus. Nullam eget malesuada augue. Nulla facilisi.
Aliquam rutrum accumsan eros, vitae scelerisque tortor interdum id. Cras eu lacus neque. Vestibulum quam tellus, feugiat in aliquet vitae, laoreet sit amet velit. Ut vel lacus elementum, tincidunt justo non, pulvinar nisl. Aenean placerat lorem ut justo malesuada, sit amet facilisis sem condimentum. Morbi imperdiet egestas diam, eleifend laoreet nisl dictum vitae. Suspendisse eget egestas ante.
Pellentesque mauris mauris, placerat vel est egestas, tristique facilisis elit. Suspendisse ante risus, vestibulum non mattis vel, pellentesque a purus. Donec elit massa, porta vel orci at, imperdiet fringilla diam. Nulla quis sapien vel est rutrum sollicitudin. Quisque ullamcorper quam a ipsum porta varius. Ut ultricies, lacus nec aliquam tristique, metus tellus fermentum augue, non tristique nunc massa non massa. Aliquam dapibus tellus ut mauris pulvinar, ac porttitor dolor sollicitudin.
Quisque egestas, orci a porttitor eleifend, justo turpis lobortis urna, in facilisis justo dolor quis magna. Nulla nunc sapien, sagittis ut turpis a, imperdiet fermentum mi. Vestibulum a finibus quam, at condimentum risus. Aenean tincidunt dolor sit amet pellentesque efficitur. Donec vel quam a mi volutpat mattis sed nec velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tellus lacus, commodo sed convallis nec, luctus vel ipsum.
Morbi sodales nulla non malesuada feugiat. Nulla vel lobortis lectus. Nam efficitur erat in ultrices dapibus. Suspendisse et sem eleifend, porta magna vitae, hendrerit leo. Nullam nec iaculis lectus. Sed aliquam, nibh et blandit consequat, neque ipsum faucibus nibh, sit amet egestas mi nisi vel quam. Donec sit amet elementum justo.
Nulla iaculis nulla et sagittis tincidunt. Sed quis ornare metus, et imperdiet est. Donec volutpat nisi augue, sit amet imperdiet turpis maximus eu. Maecenas luctus sollicitudin mattis. Integer ac ligula eu quam pulvinar hendrerit. Suspendisse vitae risus eget nulla pharetra tincidunt ac nec ex. Pellentesque mollis nunc sollicitudin mauris tempus, ac posuere est laoreet. Nam aliquam mollis odio, at egestas justo. Fusce faucibus dapibus ex ut cursus. Pellentesque tellus neque, facilisis sit amet purus vitae, ornare varius metus. Duis non orci id mauris rutrum fringilla id eget lorem.
Donec a molestie tellus. Quisque in rhoncus orci, id suscipit libero. Donec blandit metus ut pharetra vestibulum. Nunc semper, tellus ac cursus condimentum, dolor est vulputate lectus, nec placerat leo nisl eu diam. Morbi et augue eget arcu vulputate fermentum in eget enim. Fusce vel mauris semper, venenatis leo nec, cursus nisl. Quisque vulputate dignissim rhoncus. Vivamus ac vulputate nulla, eu iaculis lorem. Aenean at risus tellus. In posuere est vitae mauris congue, quis sollicitudin felis lacinia. Duis in diam in nibh mattis porta pulvinar vel diam. Nullam volutpat pulvinar eros a dapibus. Fusce suscipit tincidunt eros, in malesuada lorem feugiat pulvinar. Cras arcu libero, tempus et turpis a, iaculis maximus ante
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
CSS MENU CODE:
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
margin-top: 50px;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: white;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
background-color: #ffffff;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
display: flex;
justify-content: flex-end;
justify-content: space-around;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #000;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #e5e5e4;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}