locked
To create the fixed side bar and fixed header RRS feed

  • Question

  • User2038750770 posted

    I am looking for the help to create the bootstrap screen along with  fixed side menu bar bar and  with fixed header and fixed footer. I want to give just title  of the website  in the header and the menu should be on the sidebar . Please can you help to design the layout

    https://drive.google.com/open?id=136ZAIrS4SAvfsW6X8KDrevSIAutGu7lw

    Saturday, December 21, 2019 11:42 PM

Answers

  • User1535942433 posted

    Hi systemthreep,

    I suggest you could  divide the page into left navigation bar and the right side including the header, content and bottom.

    Then you should set these position is fixed.Besides , you could add carousel  class to achieve carasoul image.I do a demo for you.

    More details ,you could refer to below codes:

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <style>
            html, body {
                height: 100%;
                color: #fff;
            }
    
            body, p {
                margin: 0;
                padding: 0;
            }
    
            #wrap {
                min-height: 100%;
                height: auto !important;
                height: 100%;
                overflow: auto;
                background: #888;
            }
    
            #header {
                top: 0px;
                height: 55px;
                background-color: aquamarine;
                ;
                width: 100%;
                z-index: 4;
                text-align: center;
                color: black;
            }
    
            #SC-wrap {
                float: left;
                margin-bottom: 40px;
            }
            /* BEGIN HEADER NAV */
            #nav {
                padding-left: 32%;
                z-index:3;
            }
    
                #nav li {
                    ;
                    display: inline;
                    color: white;
                }
    
                #nav a {
                    display: inline-block;
                    padding: 10px;
                }
    
                #nav ul {
                    ;
                    /*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
                    left: -9999px;
                    margin: 0;
                    padding: 0;
                    text-align: left;
                    text-decoration: none;
                }
    
                    #nav ul li {
                        display: block;
                    }
    
                #nav li:hover ul {
                    left: 0;
                }
    
                #nav li:hover a {
                    text-decoration: none;
                    background: darkgrey;
                }
    
                #nav li:hover ul a {
                    text-decoration: none;
                    background: #B8B8B8;
                }
    
                    #nav li:hover ul a:hover {
                        text-decoration: none;
                        background: #CCCCCC;
                    }
    
                #nav ul a {
                    white-space: nowrap;
                    display: block;
                    border-bottom: 1px solid #ccc;
                    color: white;
                    text-decoration: none;
                }
    
                #nav a {
                    text-decoration: none;
                    color: blue;
                }
    
                    #nav a:hover {
                        text-decoration: none;
                        background: #f1f1f1;
                        color: blue;
                    }
            /* END HEADER NAV */
    
            #sidebar {
                background-color: green;
                width: 150px;
                height: 100%;
                ;
                line-height: 2em;
                font-size: 1.2em;
                z-index: 5;
                text-align: center;
                padding-top: 6%;
                overflow-y: auto;
            }
    
                #sidebar a {
                    text-decoration: none;
                }
    
                    #sidebar a:hover {
                        background-color: grey;
                    }
    
    
            #content {
                /*float: left;*/
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding-right: 250px;
                width: 100%;
                padding-top: 100px;
                font-size: 1.2em;
                line-height: 1.6em;
                z-index: 1;
                text-align: left;
                padding-left: 200px;
            }
    
            #footer {
                ;
                bottom: 0px;
                height: 40px;
                width: 100%;
                background: #222;
                z-index: 4;
                text-align: center;
            }
        </style>
    
    <div id="wrap">
            <nav id="sidebar">
                <ul class="list-unstyled components">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">First</a>
                    </li>
                    <li>
                        <a href="#">Second</a>
                    </li>
                    <li>
                        <a href="#">Third</a>
                    </li>
                </ul>
            </nav>
    
            <div id="SC-wrap">
                <div id="header">
                    Header
                </div>
                <!-- End sidebar nav -->
                <div id="content">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
    
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="image/apple.jpg" alt="Los Angeles" style="width:100%;"/>
                            </div>
    
                            <div class="item">
                                <img src="image/apple.jpg" alt="Chicago" style="width:100%;" />
                            </div>
    
                            <div class="item">
                                <img src="image/apple.jpg" alt="New york" style="width:100%;"/>
                            </div>
                        </div>
    
                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div>
                        <span class="anchor" id="section1"></span>
                        <div class="section">
                            <p>ONE at erat sodales, fermentum felis vel, adipiscing magna. Nullam pharetra luctus dictum. Mauris tristique risus a neque blandit faucibus. Quisque lobortis ligula et commodo pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor neque lectus. Fusce convallis, nibh quis euismod dictum, velit lorem accumsan sapien, sit amet consequat velit nunc ac tellus. Morbi sed lorem laoreet, tristique lorem vel, ultricies turpis. Quisque convallis porta arcu vitae venenatis. Pellentesque gravida diam sit amet diam egestas cursus. Mauris egestas nulla elit, ac rhoncus justo vestibulum fringilla.</p>
                        </div>
    
                        <span class="anchor" id="section2"></span>
                        <div class="section">
                            <p>TWO sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</p>
                        </div>
    
                        <span class="anchor" id="section3"></span>
                        <div class="section">
                            <p>THREE nec pulvinar risus. Donec nisi lectus, eleifend eget tellus sed, rhoncus hendrerit urna. Donec petium placerat tortor ac aliquam. Vestibulum at metus eget leo pharetra bibendum. Nam sodales purus sem, vitae interdum elit auctor ut. Suspendisse fringilla nulla in sodales laoreet. Sed scelerisque tincidunt</p>
                        </div>
    
                        <span class="anchor" id="section4"></span>
                        <div class="section">
                            <p>FOUR aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sed molestie massa. Proin ac blandit risus, id posuere lorem. Donec quam dolor, luctus nec augue a, porta euismod lectus. Curabitur venenatis quis ligula sed luctus. Nulla facilisi. Praesent eu tellus elit. Quisque viverra turpis a risus volutpat vestibulum. Proin sagittis sem ac bibendum molestie. Suspendisse potenti. Vestibulum molestie, sapien at gravida sodales, tortor purus consequat dolor, vel consectetur augue felis sodales nisi. Nam dapibus arcu sed elit fermentum, sed elementum metus tristique. Phasellus semper tellus a odio porttitor, in pretium elit commodo. Sed rhoncus molestie ipsum, vel convallis turpis aliquam eget. Nam orci ligula, luctus at dictum et, consequat id velit. Cras tempor, urna a dignissim fermentum, odio felis congue turpis, quis rhoncus nibh nulla eget est.</p>
                        </div>
                        <span class="anchor" id="section5"></span>
                        <div class="section">
                            <p>FOUR aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sed molestie massa. Proin ac blandit risus, id posuere lorem. Donec quam dolor, luctus nec augue a, porta euismod lectus. Curabitur venenatis quis ligula sed luctus. Nulla facilisi. Praesent eu tellus elit. Quisque viverra turpis a risus volutpat vestibulum. Proin sagittis sem ac bibendum molestie. Suspendisse potenti. Vestibulum molestie, sapien at gravida sodales, tortor purus consequat dolor, vel consectetur augue felis sodales nisi. Nam dapibus arcu sed elit fermentum, sed elementum metus tristique. Phasellus semper tellus a odio porttitor, in pretium elit commodo. Sed rhoncus molestie ipsum, vel convallis turpis aliquam eget. Nam orci ligula, luctus at dictum et, consequat id velit. Cras tempor, urna a dignissim fermentum, odio felis congue turpis, quis rhoncus nibh nulla eget est.</p>
                        </div>
                        <span class="anchor" id="section6"></span>
                        <div class="section">
                            <p>FOUR aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi sed molestie massa. Proin ac blandit risus, id posuere lorem. Donec quam dolor, luctus nec augue a, porta euismod lectus. Curabitur venenatis quis ligula sed luctus. Nulla facilisi. Praesent eu tellus elit. Quisque viverra turpis a risus volutpat vestibulum. Proin sagittis sem ac bibendum molestie. Suspendisse potenti. Vestibulum molestie, sapien at gravida sodales, tortor purus consequat dolor, vel consectetur augue felis sodales nisi. Nam dapibus arcu sed elit fermentum, sed elementum metus tristique. Phasellus semper tellus a odio porttitor, in pretium elit commodo. Sed rhoncus molestie ipsum, vel convallis turpis aliquam eget. Nam orci ligula, luctus at dictum et, consequat id velit. Cras tempor, urna a dignissim fermentum, odio felis congue turpis, quis rhoncus nibh nulla eget est.</p>
                        </div>
    
                    </div>
    
                </div>
                <!-- End content div-->
            </div>
            <!-- End SC-wrap -->
            <div id="footer">Footer</div>
        </div>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 23, 2019 9:58 AM