I have developed an an application using MVC 5 with bootstrap 3.3.7. I have added a sidebar and need the sidebar to open by default when the page loads. Also I am trying to add a fixed company logo right to the sidebar. My current sidebar doesn't open by
default and the logo is scrolling. I want the logo to be static to the length of the sidebar. Below is my code. Any help will be appreciated.
<img src="@Url.Content("~/Content/Images/about.jpg")" alt="school2-logo"/>------> I need to add a fixed Image here
<!-- Page Content -->
<div id="page-content-wrapper">
Thanks for your response. No my bootstrap is before the startup script and I don't get any error. I just want the sidebar to open when the page first load by default and also have a container before the content page with a static Image
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
50 Points
192 Posts
Add logo to bootstrap sidebar
Jan 19, 2021 11:40 PM|denkyira|LINK
I have developed an an application using MVC 5 with bootstrap 3.3.7. I have added a sidebar and need the sidebar to open by default when the page loads. Also I am trying to add a fixed company logo right to the sidebar. My current sidebar doesn't open by default and the logo is scrolling. I want the logo to be static to the length of the sidebar. Below is my code. Any help will be appreciated.
<script type="text/javascript">
$(document).ready(function () {
$("#ToggleSideMenu").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
</script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar">
</span>
</button>
<img src="@Url.Content("~/Content/Images/emp-logo.png")" alt="school-logo1" />
</div>
<div id="navbar" class="navbar-collapse collapse">
@Html.Partial("_Login")
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container body-content">
</div>
<div id="wrapper">
<!-- Sidebar -->
<nav id="sidebar-wrapper">
<ul class="sidebar-nav navbar-right">
<li><a href="#">ABOUT</a> </li>
<li><a href="#">BENEFITS</a> </li>
<li><a href="#">COMMUNITY</a> </li>
<li><a href="#">PUBLICATIONS</a> </li>
<li><a href="#">SUPPORT ALUMNI</a> </li>
</ul>
</nav>
<img src="@Url.Content("~/Content/Images/about.jpg")" alt="school2-logo"/>------> I need to add a fixed Image here
<!-- Page Content -->
<div id="page-content-wrapper">
</div>
@RenderBody()
<br/>
<br/>
<a href="#ToggleSideMenu" class="btn btn-default" id="ToggleSideMenu">Toggle Menu</a>
<hr/>
<footer>
<p>© @DateTime.Now.Year - School Web Application</p>
</footer>
</div>
<!-- /#page-content-wrapper -->
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js" ></script>
@RenderSection("modal", false)
@RenderSection("scripts", false)
</body>
</html>
All-Star
58254 Points
15675 Posts
Re: Add logo to bootstrap sidebar
Jan 20, 2021 01:03 AM|bruce (sqlwork.com)|LINK
your startup script is before you include query and bootstrap, so you should be getting errors.
Member
50 Points
192 Posts
Re: Add logo to bootstrap sidebar
Jan 20, 2021 01:51 AM|denkyira|LINK
Hi Bruce
Thanks for your response. No my bootstrap is before the startup script and I don't get any error. I just want the sidebar to open when the page first load by default and also have a container before the content page with a static Image
Member
50 Points
192 Posts
Re: Add logo to bootstrap sidebar
Jan 20, 2021 02:30 AM|denkyira|LINK
Hi Bruce
I have managed to fixed one portion. I just need the sidebar to open by default when the page opens
Contributor
2770 Points
789 Posts
Re: Add logo to bootstrap sidebar
Jan 20, 2021 06:53 AM|YihuiSun|LINK
Hi denkyira,
I used your code for testing, but you seem to have written a custom css style. According to your needs, I wrote an example, you can refer to it.
View
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") <link href="~/Content/customsiderbar.css" rel="stylesheet" /> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"> </span> </button> <img src="@Url.Content("~/Content/Images/emp-logo.png")" alt="school-logo1" /> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="#">Help</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </div> <div class="container body-content wrapper"> <!-- Page Content --> <div id="content"> <div class="container-fluid"> <button type="button" id="sidebarCollapse" class="btn btn-info navbar-right navbar-btn"> <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span> </button> </div> @RenderBody() </div> <!-- Sidebar --> <nav id="sidebar" class="navbar-right"> <div class="sidebar-header"> <h3><img src="@Url.Content("~/Content/Images/about.jpg")" alt="school2-logo" /> Sidebar</h3> </div> <ul class="list-group"> <li class="list-group-item"><a href="#">ABOUT</a> </li> <li class="list-group-item"><a href="#">BENEFITS</a> </li> <li class="list-group-item"><a href="#">COMMUNITY</a> </li> <li class="list-group-item"><a href="#">PUBLICATIONS</a> </li> <li class="list-group-item"><a href="#">SUPPORT ALUMNI</a> </li> </ul> </nav> </div> <hr /> <footer> <p>© @DateTime.Now.Year - My ASP.NET Application</p> </footer> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) <script type="text/javascript"> $(document).ready(function () { $('#sidebarCollapse').on('click', function () { $('#sidebar').toggleClass('active'); }); }); </script> </body> </html>customsiderbar.css
a, a:hover, a:focus { color: inherit; text-decoration: none; transition: all 0.3s; } .navbar { padding: 15px 10px; background: #fff; border: none; border-radius: 0; margin-bottom: 40px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); } .navbar-btn { box-shadow: none; outline: none !important; border: none; } .line { width: 100%; height: 1px; border-bottom: 1px dashed #ddd; margin: 40px 0; } .wrapper { display: flex; width: 100%; align-items: stretch; } #sidebar { min-width: 250px; max-width: 250px; transition: all 0.3s; } #sidebar.active { margin-right: -250px; display: none; } #sidebar .sidebar-header { padding: 20px; } #sidebar ul p { padding: 10px; } #sidebar ul li a { padding: 10px; font-size: 1.1em; display: block; } #sidebar ul li a:hover { color: #808080; background: #fff; } a[data-toggle="collapse"] { position: relative; } ul ul a { font-size: 0.9em !important; padding-left: 30px !important; } #content { width: 100%; padding: 20px; min-height: 100vh; transition: all 0.3s; } @media (max-width: 768px) { #sidebar { margin-right: -250px; display: block; } #sidebar.active { margin-right: 0; display: none; } }Here is the result.
Best Regards,
YihuiSun
Member
50 Points
192 Posts
Re: Add logo to bootstrap sidebar
Jan 20, 2021 01:04 PM|denkyira|LINK
Hi
Thanks very much. I will give it a try today and give feedback