I have a lot of time creating a sidebar that matches my current carousel bootstrap. Here's what my current site looks like:
http://i.imgur.com/lwEox4a.png
And here is what I am trying to achieve after the user clicks the button of the media object:
http://i.imgur.com/nbNVDLy.png
I tried to do this for a while, and the sidebar always finishes moving the image down, on top of the arrows, or completely beyond the carousel. Can someone help with this or show me a template that achieves this?
This is also a single design, so if you also know the way in which the sidebar basically remains frozen on the left side of the page, no matter what part of the site you are on, please tell me!
thanks
Edit: The site, materializecss, is what I aim for. I don’t even care about the button of the media object.
Edit 2: So I use this carousel and this one page template
http://startbootstrap.com/template-overviews/full-slider/ http://startbootstrap.com/template-overviews/scrolling-nav/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title></title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/full-slider.css" rel="stylesheet"> <link href="css/scrolling-nav.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="navmenu navmenu-default navmenu-fixed-left"> <a class="navmenu-brand" href="#">Project name</a> <ul class="nav navmenu-nav"> <li><a href="../navmenu/">Slide in</a></li> <li><a href="../navmenu-push/">Push</a></li> <li class="active"><a href="./">Reveal</a></li> <li><a href="../navbar-offcanvas/">Off canvas navbar</a></li> </ul> <ul class="nav navmenu-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu navmenu-nav"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> <div class="canvas"> <div class="navbar navbar-default navbar-fixed-top"> <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="container-fluid"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <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> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://lorempixel.com/460/345/cats" /> </div> <div class="item"> <img src="http://lorempixel.com/460/345/business" /> </div> <div class="item"> <img src="http://lorempixel.com/460/345/abstract" /> </div> <div class="item"> <img src="http://lorempixel.com/460/345/transportation" /> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> </div> <section id="photos" class="about-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Photos section</h1> </div> </div> </div> </section> <section id="projects" class="services-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Projects Section</h1> </div> </div> </div> </section> <section id="recognition" class="contact-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Recognition Section</h1> </div> </div> </div> </section> <section id="teammembers" class="services-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Team Members Section</h1> </div> </div> </div> </section> <section id="contact" class="about-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Contact Section</h1> </div> </div> </div> </section> <div class="container"> <div class="Flexible-container"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3326.973484035864!2d-111.93373599999995!3d33.50206699673241!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x872b749e6453718b%3A0x2efd3ce15e57a886!2sNorris+Architects+LLC!5e0!3m2!1sen!2sus!4v1432435089092" width="1300" height="600" frameborder="0" style="border:0"></iframe></div> <div class="row"> <div class="col-lg-12"> <h1>Full Slider by Start Bootstrap</h1> <p>The background images for the slider are set directly in the HTML using inline CSS. The rest of the styles for this template are contained within the <code>full-slider.css</code>file.</p> </div> </div> <hr> <footer> <div class="row"> <div class="col-lg-12"> <p>Copyright © Your Website 2014</p> </div> </div> </footer> </div> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script> $('.carousel').carousel({ interval: 0 </script> <script src="js/jquery.easing.min.js"></script> <script src="js/scrolling-nav.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script> </body> </html> .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 70%; margin: auto; } html, body { height: 100%; } .navbar-toggle { float: left; margin-left: 15px; } .navmenu { z-index: 1; } .canvas { position: absolute; left: 0; right: 0!important; z-index: 2; min-height: 100%; padding: 50px 0 0 0; background: #fff; } .navbar-toggle { display: block; } .navbar { right: auto; background: none; border: none; } .container-fluid { padding: 0px; } /*! * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com) * Code licensed under the Apache License v2.0. * For details, see http://www.apache.org/licenses/LICENSE-2.0. */ body { width: 100%; height: 100%; } html { width: 100%; height: 100%; } @media(min-width:767px) { .navbar { -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out; } .top-nav-collapse { padding: 0; } } /* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based. The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children of those sections to manage the look and feel of the site. */ .intro-section { height: 100%; padding-top: 150px; text-align: center; background: #fff; } .about-section { height: 100%; padding-top: 150px; text-align: center; background: #eee; } .services-section { height: 100%; padding-top: 150px; text-align: center; background: #fff; } .contact-section { height: 100%; padding-top: 150px; text-align: center; background: #eee; } /* Flexible iFrame */ .Flexible-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0px; overflow: hidden; } .Flexible-container iframe, .Flexible-container object, .Flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 50%; }