locked
Adjusting content of web page upon visible sidebar RRS feed

  • Question

  • User-1994446809 posted

    Hello Forum,

    I created a web page with sidebar navigation and horizontal navigation. The horizontal navigation has two navigation links and buttons, and the sidebar is where I have most of the navigation to other web forms.

    The issue is that I made the sidebar fixed when the content is scrolled. But I want a situation is that when the sidebar navigation is visible, it covers the “<span>Toggle Navigation</span>” button which is on the top left of the screen. Also if the toggle button is visible and is used to view the sidebar, when the sidebar scrolls in, the content does not move; the content is supposed to adjust when the sidebar scrolls in. Please how do I resolve this?

    Here is my HTML, CSS and JavaScript

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Dashboard</title>
         <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
        <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
        <!-- Bootstrap CSS CDN -->
        <link href="css/bootstrap.css" rel="stylesheet" />
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
        <!-- Our Custom CSS -->
        <!-- <link rel="stylesheet" href="style.css"/>-->
        <!-- <link href="css2/style2.css" rel="stylesheet" />-->
        <!--<link rel="stylesheet" href="style2.css" />-->
        <!-- Scrollbar Custom CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
        <!-- Font Awesome JS -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <style type="text/css">
            .wrapper {
                display: flex;
                width: 100%;
                align-items: stretch
            }
            #content{
                max-width: 100%;
            }
    
            #sidebar {
                width: 250px;
        ;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 999;
        background: #7386D5;
        color: #fff;
        transition: all 0.3s;
            }
    
                #sidebar.active {
                    margin-left: -250px;
                }
    
            a[data-toggle="collapse"] {
                ;
            }
    
            .dropdown-toggle::after {
                display: block;
                ;
                top: 50%;
                right: 20px;
                transform: translateY(-50%);
            }
    
            @media (max-width: 768px) {
                #sidebar {
                    margin-left: -250px;
                }
    
                    #sidebar.active {
                        margin-left: 0;
                    }
            }
    
            body {
                font-family: Constantia;
                background-color: #DCDCDC;
            }
    
            p {
                font-family: 'Poppins', sans-serif;
                font-size: 1.1em;
                font-weight: 300;
                line-height: 1.7em;
                color: #999;
            }
    
            a, a:hover, a:focus {
                color: inherit;
                text-decoration: none;
                transition: all 0.3s;
            }
    
            #sidebar {
                /* don't forget to add all the previously mentioned styles here too */
                 width: 250px;
                 ;
                 top: 0;
                 left: 0;
                 height: 100vh;
                 z-index: 999;
                 background: #355171;
                 color: #fff;
                 transition: all 0.3s;
            }
    
            #topbar {
                background: #355171;
            }
    
            #sidebar .sidebar-header {
                padding: 20px;
                background: #355171;
                font-family: Nunito;
                font-weight: bold;
            }
    
            #sidebar ul.components {
                padding: 20px 0;
                border-bottom: 1px solid #47748b;
            }
    
            #sidebar ul p {
                color: #fff;
                padding: 10px;
                font-size: medium;
            }
             #sub-head:hover{
                color:#355171;
            }
            #navbarSupportedContent li a {
                color: #00003D;
                font-family: Constantia;
            }
            #sidebar ul li a {
                padding: 10px;
                font-size: 1.1em;
                display: block;
                font-size: 9pt;
                font-family:Gadugi;
            }
                #sidebar ul li a:hover {
                    color: #7386D5;
                    background: #fff;
                }
    
            #sidebar ul li.active > a, a[aria-expanded="true"] {
                color: #fff;
                background: #355171;
            }
    
            ul ul a {
                font-size: 0.9em !important;
                padding-left: 30px !important;
                background: #4682b4;
            }
    
            #sidebarCollapse {
                background-color: #355171;
                font-size: x-small;
                max-width: 25px;
                min-width: 25px;
                max-height: 25px;
                min-height: 25px;
            }
    
            #sideCollapse {
                background-color: #355171;
                font-size: x-small;
                max-width: 26px;
                min-width: 26px;
                max-height: 26px;
                min-height: 26px;
            }
    
            .navbar navbar-expand-lg {
                background-color: #355171;
            }
        </style>
        <style>
            #Label14 {
                ;
                bottom: 80px;
                left: 0px;
                top: 20%;
                left: 40%;
                opacity: 0.2;
            }
    
            .test {
                -moz-transform: rotate(-40deg); /* FF3.5+ */
                -o-transform: rotate(-40deg); /* Opera 10.5 */
                -webkit-transform: rotate(-40deg); /* Saf3.1+, Chrome */
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-40); /* IE6,IE7 */
                -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-40)"; /* IE8 */
                -sand-transform: rotate(-40deg);
            }
        </style>
    </head>
    <body style="font-family: Constantia; background-color: #eeeeee;">
        <form id="form1" runat="server">
            <div class="wrapper">
                <!-- Sidebar -->
                 <nav id="sidebar">
                    <div class="list-unstyled sidebar-header">
                        <li>
                            <a><asp:Label ID="named" runat="server" Font-Size="10pt" Text="Simons@gmail.com" ForeColor="White"></asp:Label></a>
                        </li>
                        <li>
                         <a><img alt="" src="images/navbarimg/user-8-xxl.png" height="13" />&nbsp;<asp:Label ID="user" runat="server" Font-Size="8pt" Text="" ForeColor="White"></asp:Label></a>
                        </li>
                        <li>
                            <a><asp:Label ID="Units" runat="server" Font-Names="Comfortaa" Font-Size="8pt" Text="0000" ForeColor="White"></asp:Label></a>
                        </li>
                    </div>
                    <ul class="list-unstyled components">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>
                        <li>
                           <a href="#">Create Document</a>
                        </li>
                        <li>
                            <a href="#">Design Certificate</a>
                        </li>
                        <li>
                            <a href="#">Design Receipt</a>
                        </li>
                        <li>
                            <a href="#">Choose Templates</a>
                        </li>
                        &nbsp;&nbsp;&nbsp;<a id="sub-head" style="color:#999; font-family:Comfortaa; font-size:8pt;">DESIGN</a>
                        <li>
                            <a href="BackgroundTemplates.aspx" style="font-size:8pt;">Card Templates</a>
                            <a href="BackgroundTemplates.aspx" style="font-size:8pt;">Certificate Templates**</a>
                        </li>
                    </ul>
                    <ul class="list-unstyled components">
                        <li id="dashboard" runat="server"><a href="#">Profile</a>
                        </li>
                        <li id="Li1" runat="server"><a href="Recorddetail.aspx">Record Details</a>
                        </li>
                    </ul>
                </nav>
                <div id="content" style="font-size: 9pt;">
                    <nav id="topnav" class="navbar navbar-expand-lg" role="navigation" style="background-color: #eeeeee; font-size: small; font-family: 'Comfortaa';">
                        <div class="container-fluid">
                            <button type="button" id="sidebarCollapse" class="btn btn-info">
                                <i class="fas fa-align-left"></i>
                                <span class="sr-only">Toggle Navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;<h3 style="font-size: 10pt; font-weight: bolder; font: bolder; color: #00003D;"></h3>
                            <button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <i class="fas fa-align-justify"></i>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                <ul class="nav navbar-nav ml-auto">
                                    <li class="nav-item">
                                        <a class="nav-link" href="Index.aspx" style="font-weight: bolder;">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" style="font-weight: bolder;">About</a>
                                    </li>
                                    <li class="dropdown" id="Pbutton" style="margin-right: 10px;">
                                        <script src="https://js.paystack.co/v1/inline.js"></script>
                                        <asp:Button type="button" ID="lipaybutton" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Units" Style="font-size: 7pt;"/>
                                    </li>
                                    <li class="dropdown" style="margin-right: 10px;">
                                        <asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Log Out" Style="font-size: 7pt"/>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                    <hr />
                    <br />
                    <div class="line"></div>
                    <div class="container" id="center-content" style="margin-top: -4%; font-family: Constantia; max-width: 100%; padding: .5rem; margin: 0px;">
                        <div class="form-horizontal">
                            <h6 style="margin-top: -3%; font-family: Tahoma; color: #00003D;">Dashboard</h6>
                            <hr />
                            <div>
                                <div class="row" style="width: 100%;">
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                 <img alt="" src="images/indeximg/homecert.png" height="20" /></h3><br />
                                              <div class="row" style="font-family:Gadugi;font-size:9pt;font-weight:bold;"><asp:Label ID="lblTotal" runat="server" Text="0000"/>&nbsp;Documents</div>
                                                <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                                <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa;background-color: steelblue;" ID="certbtn"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #DCDCDC;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 11pt;">
                                                    <img alt="" src="images/indeximg/idcardd.png" height="25" /></h3><br />
                                                 <div class="row" style="font-family:Gadugi;font-size:9pt;font-weight:bold;"><asp:Label ID="idlabel" runat="server" Text="0000"/>&nbsp;Documents</div>
                                                <p class="mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                               <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa;background-color: steelblue;" ID="idcardbtn" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #DCDCDC;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                    <img alt="" src="images/indeximg/hominvoice.png" height="25" /></h3><br />
                                                 <div class="row" style="font-family:Gadugi;font-size:9pt;font-weight:bold;"><asp:Label ID="labelinv" runat="server" Text="0000"/>&nbsp;Documents</div>
                                                <p class="mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                               <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa;background-color: steelblue;" ID="invoicebtn"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <strong class="d-inline-block mb-2" style="color: #00003D;"></strong>
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                    <img alt="" src="images/indeximg/recpt.jpg" height="30" /></h3>
                                                <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                               <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa; background-color: steelblue;" ID="receiptbtn" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <footer>
                        <div class="container1" style="background-color: #D1D1D1; font-size: 8pt; height: 240px; ; margin-bottom: 0%; max-width: 100%;">
                            <p class="pull-right"><a href="#" style="color: #384C6B; font-family: Constantia;">Back to Top</a></p>
                            <div class="container-fluid" style="text-align: center; font-family: Constantia;">
                                <p style="color: #384C6B; font-family: Gadugi; margin-top: 3%; margin-left: 0%;">Contact Address: Nigerian Merit Award House</p>
                                <p style="color: #384C6B; font-family: Gadugi;">Maitama District Abuja, F.C.T</p>
                                <p style="color: #384C6B; font-family: Gadugi;">08138709222 08037445843 08023456781</p>
                                <asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="~/images/facebk-icon1.png" ImageHeight="15" Font-Size="XX-Small" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/facebk-icon12.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.twitter.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink6" runat="server" ImageUrl="~/images/email-icon-1.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.gmail.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink7" runat="server" ImageUrl="~/images/linedin.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.linkedin.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink8" runat="server" ImageUrl="~/images/whatsapp2.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.whatsapp.com">HyperLink</asp:HyperLink>
                            </div>
                            <br />
                            <br />
                            <p style="color: #384C6B; margin-bottom: -4%; font-family: Constantia; font-weight: bold;">Copyright &copy; 2020 Joscheck Tech. All Rights Reserved.</p>
                        </div>
                    </footer>
                </div>
            </div>
        </form>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
        <!-- Bootstrap JS -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
        <!-- jQuery Custom Scroller CDN -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                $("#sidebar").mCustomScrollbar({
                    theme: "minimal"
                });
    
                $('#sidebarCollapse').on('click', function () {
                    // open or close navbar
                    $('#sidebar').toggleClass('active');
                    // close dropdowns
                    $('.collapse.in').toggleClass('in');
                    // and also adjust aria-expanded attributes we use for the open/closed arrows
                    // in our CSS
                    $('a[aria-expanded=true]').attr('aria-expanded', 'false');
                });
    
            });
        </script>
    </body>
    </html>
    

    Monday, October 26, 2020 9:26 AM

Answers

  • User1535942433 posted

    Hi georgeakpan233,

    I have created a test of your codes,you could do just like this and you could check with your codes:

    <head runat="server">
        <title></title>
        <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
        <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
        <!-- Bootstrap CSS CDN -->
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
        <!-- Our Custom CSS -->
        <!-- <link rel="stylesheet" href="style.css"/>-->
        <!-- <link href="css2/style2.css" rel="stylesheet" />-->
        <!--<link rel="stylesheet" href="style2.css" />-->
        <!-- Scrollbar.umd.min.js:2 Custom CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
        <!-- Font Awesome JS -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <style type="text/css">
            .wrapper {
                display: flex;
                width: 100%;
                align-items: stretch
            }
    
            #content {
                width: calc(100% - 250px);
                padding: 40px;
                min-height: 100vh;
                transition: all 0.3s;
                ;
                top: 0;
                right: 0;
            }
    
                #content.active {
                    width: 100%;
                }
    
            #sidebar {
                width: 250px;
                ;
                top: 0;
                left: 0;
                height: 100vh;
                z-index: 999;
                background: #7386D5;
                color: #fff;
                transition: all 0.3s;
            }
    
                #sidebar.active {
                    margin-left: -250px;
                }
    
            a[data-toggle="collapse"] {
                ;
            }
    
            .dropdown-toggle::after {
                display: block;
                ;
                top: 50%;
                right: 20px;
                transform: translateY(-50%);
            }
    
            @media (max-width: 768px) {
                #sidebar {
                    margin-left: -250px;
                }
    
                    #sidebar.active {
                        margin-left: 0;
                    }
            }
    
            body {
                font-family: Constantia;
                background-color: #DCDCDC;
            }
    
            p {
                font-family: 'Poppins', sans-serif;
                font-size: 1.1em;
                font-weight: 300;
                line-height: 1.7em;
                color: #999;
            }
    
            a, a:hover, a:focus {
                color: inherit;
                text-decoration: none;
                transition: all 0.3s;
            }
    
            #sidebar {
                /* don't forget to add all the previously mentioned styles here too */
                width: 250px;
                ;
                top: 0;
                left: 0;
                height: 100vh;
                z-index: 999;
                background: #355171;
                color: #fff;
                transition: all 0.3s;
            }
    
            #topbar {
                background: #355171;
            }
    
            #sidebar .sidebar-header {
                padding: 20px;
                background: #355171;
                font-family: Nunito;
                font-weight: bold;
            }
    
            #sidebar ul.components {
                padding: 20px 0;
                border-bottom: 1px solid #47748b;
            }
    
            #sidebar ul p {
                color: #fff;
                padding: 10px;
                font-size: medium;
            }
    
            #sub-head:hover {
                color: #355171;
            }
    
            #navbarSupportedContent li a {
                color: #00003D;
                font-family: Constantia;
            }
    
            #sidebar ul li a {
                padding: 10px;
                font-size: 1.1em;
                display: block;
                font-size: 9pt;
                font-family: Gadugi;
            }
    
                #sidebar ul li a:hover {
                    color: #7386D5;
                    background: #fff;
                }
    
            #sidebar ul li.active > a, a[aria-expanded="true"] {
                color: #fff;
                background: #355171;
            }
    
            ul ul a {
                font-size: 0.9em !important;
                padding-left: 30px !important;
                background: #4682b4;
            }
    
            #sidebarCollapse {
                background-color: #355171;
                font-size: x-small;
                max-width: 25px;
                min-width: 25px;
                max-height: 25px;
                min-height: 25px;
            }
    
            #sideCollapse {
                background-color: #355171;
                font-size: x-small;
                max-width: 26px;
                min-width: 26px;
                max-height: 26px;
                min-height: 26px;
            }
    
            .navbar navbar-expand-lg {
                background-color: #355171;
            }
        </style>
        <style>
            #Label14 {
                ;
                bottom: 80px;
                left: 0px;
                top: 20%;
                left: 40%;
                opacity: 0.2;
            }
    
            .test {
                -moz-transform: rotate(-40deg); /* FF3.5+ */
                -o-transform: rotate(-40deg); /* Opera 10.5 */
                -webkit-transform: rotate(-40deg); /* Saf3.1+, Chrome */
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-40); /* IE6,IE7 */
                -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-40)"; /* IE8 */
                -sand-transform: rotate(-40deg);
            }
        </style>
    
    </head>
    <body style="font-family: Constantia; background-color: #eeeeee;">
        <form id="form1" runat="server">
            <div class="wrapper">
                <!-- Sidebar -->
                 <nav id="sidebar">
                    <div class="list-unstyled sidebar-header">
                        <li>
                            <a><asp:Label ID="named" runat="server" Font-Size="10pt" Text="Simons@gmail.com" ForeColor="White"></asp:Label></a>
                        </li>
                        <li>
                         <a><img alt="" src="images/navbarimg/user-8-xxl.png" height="13" />&nbsp;<asp:Label ID="user" runat="server" Font-Size="8pt" Text="" ForeColor="White"></asp:Label></a>
                        </li>
                        <li>
                            <a><asp:Label ID="Units" runat="server" Font-Names="Comfortaa" Font-Size="8pt" Text="0000" ForeColor="White"></asp:Label></a>
                        </li>
                    </div>
                    <ul class="list-unstyled components">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>
                        <li>
                           <a href="#">Create Document</a>
                        </li>
                        <li>
                            <a href="#">Design Certificate</a>
                        </li>
                        <li>
                            <a href="#">Design Receipt</a>
                        </li>
                        <li>
                            <a href="#">Choose Templates</a>
                        </li>
                        &nbsp;&nbsp;&nbsp;<a id="sub-head" style="color:#999; font-family:Comfortaa; font-size:8pt;">DESIGN</a>
                        <li>
                            <a href="BackgroundTemplates.aspx" style="font-size:8pt;">Card Templates</a>
                            <a href="BackgroundTemplates.aspx" style="font-size:8pt;">Certificate Templates**</a>
                        </li>
                    </ul>
                    <ul class="list-unstyled components">
                        <li id="dashboard" runat="server"><a href="#">Profile</a>
                        </li>
                        <li id="Li1" runat="server"><a href="Recorddetail.aspx">Record Details</a>
                        </li>
                    </ul>
                </nav>
                <div id="content" style="font-size: 9pt;">
                    <nav id="topnav" class="navbar navbar-expand-lg" role="navigation" style="background-color: #eeeeee; font-size: small; font-family: 'Comfortaa';">
                        <div class="container-fluid">
                            <button type="button" id="sidebarCollapse" class="btn btn-info">
                                <i class="fas fa-align-left"></i>
                                <span class="sr-only">Toggle Navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;<h3 style="font-size: 10pt; font-weight: bolder; font: bolder; color: #00003D;"></h3>
                            <button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <i class="fas fa-align-justify"></i>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                <ul class="nav navbar-nav ml-auto">
                                    <li class="nav-item">
                                        <a class="nav-link" href="Index.aspx" style="font-weight: bolder;">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" style="font-weight: bolder;">About</a>
                                    </li>
                                    <li class="dropdown" id="Pbutton" style="margin-right: 10px;">
                                        <script src="https://js.paystack.co/v1/inline.js"></script>
                                        <asp:Button type="button" ID="lipaybutton" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Units" Style="font-size: 7pt;"/>
                                    </li>
                                    <li class="dropdown" style="margin-right: 10px;">
                                        <asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Log Out" Style="font-size: 7pt"/>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                    <hr />
                    <br />
                    <div class="line"></div>
                    <div class="container" id="center-content" style="margin-top: -4%; font-family: Constantia; max-width: 100%; padding: .5rem; margin: 0px;">
                        <div class="form-horizontal">
                            <h6 style="margin-top: -3%; font-family: Tahoma; color: #00003D;">Dashboard</h6>
                            <hr />
                            <div>
                                <div class="row" style="width: 100%;">
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                 <img alt="" src="images/indeximg/homecert.png" height="20" /></h3><br />
                                              <div class="row" style="font-family:Gadugi;font-size:9pt;font-weight:bold;"><asp:Label ID="lblTotal" runat="server" Text="0000"/>&nbsp;Documents</div>
                                                <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                                <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa;background-color: steelblue;" ID="certbtn"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #DCDCDC;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 11pt;">
                                                    <img alt="" src="images/indeximg/idcardd.png" height="25" /></h3><br />
                                                 <div class="row" style="font-family:Gadugi;font-size:9pt;font-weight:bold;"><asp:Label ID="idlabel" runat="server" Text="0000"/>&nbsp;Documents</div>
                                                <p class="mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                               <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa;background-color: steelblue;" ID="idcardbtn" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #DCDCDC;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                    <img alt="" src="images/indeximg/hominvoice.png" height="25" /></h3><br />
                                                 <div class="row" style="font-family:Gadugi;font-size:9pt;font-weight:bold;"><asp:Label ID="labelinv" runat="server" Text="0000"/>&nbsp;Documents</div>
                                                <p class="mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                               <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa;background-color: steelblue;" ID="invoicebtn"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <strong class="d-inline-block mb-2" style="color: #00003D;"></strong>
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                    <img alt="" src="images/indeximg/recpt.jpg" height="30" /></h3>
                                                <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                               <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa; background-color: steelblue;" ID="receiptbtn" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <footer>
                        <div class="container1" style="background-color: #D1D1D1; font-size: 8pt; height: 240px; ; margin-bottom: 0%; max-width: 100%;">
                            <p class="pull-right"><a href="#" style="color: #384C6B; font-family: Constantia;">Back to Top</a></p>
                            <div class="container-fluid" style="text-align: center; font-family: Constantia;">
                                <p style="color: #384C6B; font-family: Gadugi; margin-top: 3%; margin-left: 0%;">Contact Address: Nigerian Merit Award House</p>
                                <p style="color: #384C6B; font-family: Gadugi;">Maitama District Abuja, F.C.T</p>
                                <p style="color: #384C6B; font-family: Gadugi;">08138709222 08037445843 08023456781</p>
                                <asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="~/images/facebk-icon1.png" ImageHeight="15" Font-Size="XX-Small" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/facebk-icon12.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.twitter.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink6" runat="server" ImageUrl="~/images/email-icon-1.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.gmail.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink7" runat="server" ImageUrl="~/images/linedin.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.linkedin.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink8" runat="server" ImageUrl="~/images/whatsapp2.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.whatsapp.com">HyperLink</asp:HyperLink>
                            </div>
                            <br />
                            <br />
                            <p style="color: #384C6B; margin-bottom: -4%; font-family: Constantia; font-weight: bold;">Copyright &copy; 2020 Joscheck Tech. All Rights Reserved.</p>
                        </div>
                    </footer>
                </div>
            </div>
        </form>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
        <!-- Bootstrap JS -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
        <!-- jQuery Custom Scroller CDN -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                $("#sidebar").mCustomScrollbar({
                    theme: "minimal"
                });
    
                $('#sidebarCollapse').on('click', function () {
                    // open or close navbar
                    $('#sidebar,#content').toggleClass('active');
                    // close dropdowns
                    $('.collapse.in').toggleClass('in');
                    // and also adjust aria-expanded attributes we use for the open/closed arrows
                    // in our CSS
                    $('a[aria-expanded=true]').attr('aria-expanded', 'false');
                });
    
            });
        </script>
    </body>

    Result:

    More details,you could refer to below article:

    https://plnkr.co/edit/PCCJb9f7f93HT4OubLmM?p=preview&preview

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 28, 2020 7:46 AM

All replies

  • User1535942433 posted

    Hi georgeakpan233,

    Accroding to your description,I have understand your requirment that when you open the sidebar,the content will be pushed and the sidebar couldn't cover the content.At the same,when the sidebar is closed,the content will back to the original position.

    I suggest you could add jquery to the toggle button.You could add marginLeft style to the content when the sidebar extend.

    I have created a demo just like this:

    <style>
    body {
      font-family: "Lato", sans-serif;
    }
    
    .sidenav {
      height: 100%;
      width: 0;
      ;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }
    
    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }
    
    .sidenav a:hover {
      color: #f1f1f1;
    }
    
    .sidenav .closebtn {
      ;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
    
    #main {
      transition: margin-left .5s;
      padding: 16px;
    }
    
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }
    </style>
    </head>
    <body>
    
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
    
    <div id="main">
      <h2>Sidenav Push Example</h2>
      <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
    </div>
    
    <script>
    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
    }
    
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
    }
    </script>
       
    </body>

    Result:

    Best regards,

    Yijing Sun

    Tuesday, October 27, 2020 5:42 AM
  • User-1994446809 posted

    Hi yij sun,

    I suggest you could add jquery to the toggle button

    I can't even see my toggle button.  If you check and apply my HTML, CSS and JavaScript you will see what I mean. when the page loads, the toggle button that was suppose to be seen is hidden because the sidebar covers it; the content does not shift when the sidebar is opened

    Tuesday, October 27, 2020 10:15 AM
  • User1535942433 posted

    Hi georgeakpan233,

    I have created a test of your codes,you could do just like this and you could check with your codes:

    <head runat="server">
        <title></title>
        <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' />
        <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
        <!-- Bootstrap CSS CDN -->
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
        <!-- Our Custom CSS -->
        <!-- <link rel="stylesheet" href="style.css"/>-->
        <!-- <link href="css2/style2.css" rel="stylesheet" />-->
        <!--<link rel="stylesheet" href="style2.css" />-->
        <!-- Scrollbar.umd.min.js:2 Custom CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" />
        <!-- Font Awesome JS -->
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
        <!-- Font Awesome JS -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <style type="text/css">
            .wrapper {
                display: flex;
                width: 100%;
                align-items: stretch
            }
    
            #content {
                width: calc(100% - 250px);
                padding: 40px;
                min-height: 100vh;
                transition: all 0.3s;
                ;
                top: 0;
                right: 0;
            }
    
                #content.active {
                    width: 100%;
                }
    
            #sidebar {
                width: 250px;
                ;
                top: 0;
                left: 0;
                height: 100vh;
                z-index: 999;
                background: #7386D5;
                color: #fff;
                transition: all 0.3s;
            }
    
                #sidebar.active {
                    margin-left: -250px;
                }
    
            a[data-toggle="collapse"] {
                ;
            }
    
            .dropdown-toggle::after {
                display: block;
                ;
                top: 50%;
                right: 20px;
                transform: translateY(-50%);
            }
    
            @media (max-width: 768px) {
                #sidebar {
                    margin-left: -250px;
                }
    
                    #sidebar.active {
                        margin-left: 0;
                    }
            }
    
            body {
                font-family: Constantia;
                background-color: #DCDCDC;
            }
    
            p {
                font-family: 'Poppins', sans-serif;
                font-size: 1.1em;
                font-weight: 300;
                line-height: 1.7em;
                color: #999;
            }
    
            a, a:hover, a:focus {
                color: inherit;
                text-decoration: none;
                transition: all 0.3s;
            }
    
            #sidebar {
                /* don't forget to add all the previously mentioned styles here too */
                width: 250px;
                ;
                top: 0;
                left: 0;
                height: 100vh;
                z-index: 999;
                background: #355171;
                color: #fff;
                transition: all 0.3s;
            }
    
            #topbar {
                background: #355171;
            }
    
            #sidebar .sidebar-header {
                padding: 20px;
                background: #355171;
                font-family: Nunito;
                font-weight: bold;
            }
    
            #sidebar ul.components {
                padding: 20px 0;
                border-bottom: 1px solid #47748b;
            }
    
            #sidebar ul p {
                color: #fff;
                padding: 10px;
                font-size: medium;
            }
    
            #sub-head:hover {
                color: #355171;
            }
    
            #navbarSupportedContent li a {
                color: #00003D;
                font-family: Constantia;
            }
    
            #sidebar ul li a {
                padding: 10px;
                font-size: 1.1em;
                display: block;
                font-size: 9pt;
                font-family: Gadugi;
            }
    
                #sidebar ul li a:hover {
                    color: #7386D5;
                    background: #fff;
                }
    
            #sidebar ul li.active > a, a[aria-expanded="true"] {
                color: #fff;
                background: #355171;
            }
    
            ul ul a {
                font-size: 0.9em !important;
                padding-left: 30px !important;
                background: #4682b4;
            }
    
            #sidebarCollapse {
                background-color: #355171;
                font-size: x-small;
                max-width: 25px;
                min-width: 25px;
                max-height: 25px;
                min-height: 25px;
            }
    
            #sideCollapse {
                background-color: #355171;
                font-size: x-small;
                max-width: 26px;
                min-width: 26px;
                max-height: 26px;
                min-height: 26px;
            }
    
            .navbar navbar-expand-lg {
                background-color: #355171;
            }
        </style>
        <style>
            #Label14 {
                ;
                bottom: 80px;
                left: 0px;
                top: 20%;
                left: 40%;
                opacity: 0.2;
            }
    
            .test {
                -moz-transform: rotate(-40deg); /* FF3.5+ */
                -o-transform: rotate(-40deg); /* Opera 10.5 */
                -webkit-transform: rotate(-40deg); /* Saf3.1+, Chrome */
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-40); /* IE6,IE7 */
                -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=-40)"; /* IE8 */
                -sand-transform: rotate(-40deg);
            }
        </style>
    
    </head>
    <body style="font-family: Constantia; background-color: #eeeeee;">
        <form id="form1" runat="server">
            <div class="wrapper">
                <!-- Sidebar -->
                 <nav id="sidebar">
                    <div class="list-unstyled sidebar-header">
                        <li>
                            <a><asp:Label ID="named" runat="server" Font-Size="10pt" Text="Simons@gmail.com" ForeColor="White"></asp:Label></a>
                        </li>
                        <li>
                         <a><img alt="" src="images/navbarimg/user-8-xxl.png" height="13" />&nbsp;<asp:Label ID="user" runat="server" Font-Size="8pt" Text="" ForeColor="White"></asp:Label></a>
                        </li>
                        <li>
                            <a><asp:Label ID="Units" runat="server" Font-Names="Comfortaa" Font-Size="8pt" Text="0000" ForeColor="White"></asp:Label></a>
                        </li>
                    </div>
                    <ul class="list-unstyled components">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>
                        <li>
                           <a href="#">Create Document</a>
                        </li>
                        <li>
                            <a href="#">Design Certificate</a>
                        </li>
                        <li>
                            <a href="#">Design Receipt</a>
                        </li>
                        <li>
                            <a href="#">Choose Templates</a>
                        </li>
                        &nbsp;&nbsp;&nbsp;<a id="sub-head" style="color:#999; font-family:Comfortaa; font-size:8pt;">DESIGN</a>
                        <li>
                            <a href="BackgroundTemplates.aspx" style="font-size:8pt;">Card Templates</a>
                            <a href="BackgroundTemplates.aspx" style="font-size:8pt;">Certificate Templates**</a>
                        </li>
                    </ul>
                    <ul class="list-unstyled components">
                        <li id="dashboard" runat="server"><a href="#">Profile</a>
                        </li>
                        <li id="Li1" runat="server"><a href="Recorddetail.aspx">Record Details</a>
                        </li>
                    </ul>
                </nav>
                <div id="content" style="font-size: 9pt;">
                    <nav id="topnav" class="navbar navbar-expand-lg" role="navigation" style="background-color: #eeeeee; font-size: small; font-family: 'Comfortaa';">
                        <div class="container-fluid">
                            <button type="button" id="sidebarCollapse" class="btn btn-info">
                                <i class="fas fa-align-left"></i>
                                <span class="sr-only">Toggle Navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;<h3 style="font-size: 10pt; font-weight: bolder; font: bolder; color: #00003D;"></h3>
                            <button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                <i class="fas fa-align-justify"></i>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                <ul class="nav navbar-nav ml-auto">
                                    <li class="nav-item">
                                        <a class="nav-link" href="Index.aspx" style="font-weight: bolder;">Home</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="#" style="font-weight: bolder;">About</a>
                                    </li>
                                    <li class="dropdown" id="Pbutton" style="margin-right: 10px;">
                                        <script src="https://js.paystack.co/v1/inline.js"></script>
                                        <asp:Button type="button" ID="lipaybutton" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Units" Style="font-size: 7pt;"/>
                                    </li>
                                    <li class="dropdown" style="margin-right: 10px;">
                                        <asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" BackColor="SteelBlue" Text="Log Out" Style="font-size: 7pt"/>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </nav>
                    <hr />
                    <br />
                    <div class="line"></div>
                    <div class="container" id="center-content" style="margin-top: -4%; font-family: Constantia; max-width: 100%; padding: .5rem; margin: 0px;">
                        <div class="form-horizontal">
                            <h6 style="margin-top: -3%; font-family: Tahoma; color: #00003D;">Dashboard</h6>
                            <hr />
                            <div>
                                <div class="row" style="width: 100%;">
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                 <img alt="" src="images/indeximg/homecert.png" height="20" /></h3><br />
                                              <div class="row" style="font-family:Gadugi;font-size:9pt;font-weight:bold;"><asp:Label ID="lblTotal" runat="server" Text="0000"/>&nbsp;Documents</div>
                                                <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                                <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa;background-color: steelblue;" ID="certbtn"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #DCDCDC;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 11pt;">
                                                    <img alt="" src="images/indeximg/idcardd.png" height="25" /></h3><br />
                                                 <div class="row" style="font-family:Gadugi;font-size:9pt;font-weight:bold;"><asp:Label ID="idlabel" runat="server" Text="0000"/>&nbsp;Documents</div>
                                                <p class="mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                               <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa;background-color: steelblue;" ID="idcardbtn" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #DCDCDC;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                    <img alt="" src="images/indeximg/hominvoice.png" height="25" /></h3><br />
                                                 <div class="row" style="font-family:Gadugi;font-size:9pt;font-weight:bold;"><asp:Label ID="labelinv" runat="server" Text="0000"/>&nbsp;Documents</div>
                                                <p class="mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                               <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa;background-color: steelblue;" ID="invoicebtn"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative" style="background-color: #eeeeee;">
                                            <div class="col p-4 d-flex flex-column position-static">
                                                <strong class="d-inline-block mb-2" style="color: #00003D;"></strong>
                                                <h3 class="mb-0" style="color: #8E3939; font-size: 12pt;">
                                                    <img alt="" src="images/indeximg/recpt.jpg" height="30" /></h3>
                                                <p class="card-text mb-auto" style="color: #00003D; font-size: 9pt; font-family: 'Lucida Sans';">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
                                               <asp:Button runat="server" class="btn btn-lg btn-block btn-primary" Font-Size="X-Small" text="More Info" style="font-family:Comfortaa; background-color: steelblue;" ID="receiptbtn" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <footer>
                        <div class="container1" style="background-color: #D1D1D1; font-size: 8pt; height: 240px; ; margin-bottom: 0%; max-width: 100%;">
                            <p class="pull-right"><a href="#" style="color: #384C6B; font-family: Constantia;">Back to Top</a></p>
                            <div class="container-fluid" style="text-align: center; font-family: Constantia;">
                                <p style="color: #384C6B; font-family: Gadugi; margin-top: 3%; margin-left: 0%;">Contact Address: Nigerian Merit Award House</p>
                                <p style="color: #384C6B; font-family: Gadugi;">Maitama District Abuja, F.C.T</p>
                                <p style="color: #384C6B; font-family: Gadugi;">08138709222 08037445843 08023456781</p>
                                <asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="~/images/facebk-icon1.png" ImageHeight="15" Font-Size="XX-Small" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink1" runat="server" ImageUrl="~/images/facebk-icon12.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.twitter.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink6" runat="server" ImageUrl="~/images/email-icon-1.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.gmail.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink7" runat="server" ImageUrl="~/images/linedin.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.linkedin.com">HyperLink</asp:HyperLink>
                                &nbsp;<asp:HyperLink ID="HyperLink8" runat="server" ImageUrl="~/images/whatsapp2.png" ImageHeight="18" Font-Size="X-Small" NavigateUrl="http://www.whatsapp.com">HyperLink</asp:HyperLink>
                            </div>
                            <br />
                            <br />
                            <p style="color: #384C6B; margin-bottom: -4%; font-family: Constantia; font-weight: bold;">Copyright &copy; 2020 Joscheck Tech. All Rights Reserved.</p>
                        </div>
                    </footer>
                </div>
            </div>
        </form>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
        <!-- Bootstrap JS -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
        <!-- jQuery Custom Scroller CDN -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                $("#sidebar").mCustomScrollbar({
                    theme: "minimal"
                });
    
                $('#sidebarCollapse').on('click', function () {
                    // open or close navbar
                    $('#sidebar,#content').toggleClass('active');
                    // close dropdowns
                    $('.collapse.in').toggleClass('in');
                    // and also adjust aria-expanded attributes we use for the open/closed arrows
                    // in our CSS
                    $('a[aria-expanded=true]').attr('aria-expanded', 'false');
                });
    
            });
        </script>
    </body>

    Result:

    More details,you could refer to below article:

    https://plnkr.co/edit/PCCJb9f7f93HT4OubLmM?p=preview&preview

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 28, 2020 7:46 AM