locked
Add logo to bootstrap sidebar RRS feed

  • Question

  • User457850011 posted

    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>&copy; @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>

    Tuesday, January 19, 2021 11:40 PM

Answers

  • User1686398519 posted

    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>&copy; @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"] {
        ;
    }
    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 20, 2021 6:53 AM

All replies

  • User-474980206 posted

    your startup script is before you include query and bootstrap, so you should be getting errors.

    Wednesday, January 20, 2021 1:03 AM
  • User457850011 posted

    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

    Wednesday, January 20, 2021 1:51 AM
  • User457850011 posted

    Hi Bruce 

    I have managed to fixed one portion. I just need the sidebar to open by default when the page opens

    Wednesday, January 20, 2021 2:30 AM
  • User1686398519 posted

    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>&copy; @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"] {
        ;
    }
    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 20, 2021 6:53 AM
  • User457850011 posted

    Hi 

    Thanks very much. I will give it a try today and give feedback

    Wednesday, January 20, 2021 1:04 PM