thank you for reading and answering my question. My problem is that #media(min-width: 768px) is not working, instead of showing the toggle button it only shows the desktop style. What I would like to do is have it looked like the mobile design. Here goes my html code:
<!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">
<title>Internship Exercise 1</title>
<link href="css/custom.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body><!--Navbar start-->
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header clearfix">
<a class="navbar-brand" href="#"><img src="img/logo.png" alt="logo" width="60%"></a>
<a class="navbar-toggle pull-right" data-toggle="collapse" data-target="#collapsed-navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse " id="collapsed-navigation">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<!--First middle start-->
<div class="container">
<div class="row">
<div class="col-sm-12">
<img src="img/topimg.jpg" alt="image" width="100%">
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<h2>Heading 1</h2>
<div class="standard-lorem">
<h4>The standard Lorem Ipsum passage, used since the 1500s</h4>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
</div>
<div class="section">
<h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
</p>
</div>
<div>
<h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>
<p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit imperdiet lorem, iaculis elementum ex placerat eu. Curabitur vitae augue placerat, rutrum nisl pretium, tincidunt ex. Aliquam tristique porttitor libero vel commodo. Morbi porttitor neque eget semper placerat.
</p>
</div>
<a class="btn btn-default" href="#">More Info</a>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4">
<div>
<h2>Heading2</h2>
<div class="standard-lorem">
<h4>The standard Lorem Ipsum passage, used since the 1500s</h4>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
</div>
<div>
<h4>Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h4>
<p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
</p>
</div>
<a class="btn btn-default" href="#">More Info</a>
</div>
</div>
<!-- /.col-md-4 -->
</div>
<!--End first middle-->
<!--Start second middle-->
<div class="row">
<div class="secuppermiddle col-sm-4">
<div class="middlebckg secuppermiddleinside col-sm-12">
<span class="align"><h2><small class="text-muted">500X500</small></h2></span>
</div>
</div>
<div class="secuppermiddle col-sm-4">
<div class="middlebckg secuppermiddleinside col-sm-12">
<span class="align"><h2><small class="text-muted">400X400</small></h2></span>
</div>
</div>
<div class="secuppermiddle col-sm-4">
<div class="middlebckg secuppermiddleinside">
<span class="align"><h2><small class="text-muted">300X300</small></h2></span>
</div>
</div>
</div>
</div>
</div>
</div><!--End second middle-->
<div class="row">
<div class="belowmiddle col-sm-12">
<div class="container">
<div class="row">
<div class="secuppermiddle col-sm-4">
<div class="middlebckg secuppermiddleinside col-sm-12">
<span class="align"><h2><small class="text-muted">200X200</small></h2></span>
</div>
</div>
<div class="secuppermiddle col-sm-4">
<div class="middlebckg secuppermiddleinside col-sm-12">
<span class="align"><h2><small class="text-muted">100X100</small></h2></span>
</div>
</div>
<div class="secuppermiddle col-sm-4">
<div class="middlebckg secuppermiddleinside col-sm-12">
<span class="align"><h2><small class="text-muted">50X50</small></h2></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="beforefooter col-md-12">
<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" role="listbox">
<div class="item active">
<img src="img/slide1.jpg" alt="slide1">
</div>
<div class="item">
<img src="img/slide2.jpg" alt="slide2">
</div>
<div class="item">
<img src="img/slide3.jpg" alt="slide3">
</div>
</div>
<!-- Left and right controls -->
<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>
</div>
<!-- Footer -->
<div class="container footer">
<footer>
<div >
<div class="col-lg-12">
<p>Copyright © Mikz Website 2016</p>
</div>
</div>
</footer>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
And here goes my css code:
.navbar-static-top {
min-height: 120px!important;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
border-bottom:3px solid white!important;
background: transparent!important;
margin-bottom: -3px;
}
html, body {
overflow-x:hidden
}
.firstuppermiddle{
border:0px solid black;
height: 890px;
margin-top: 30px;
}
.firstuppermiddleinside{
height: 880px;
}
.standard-lorem{
margin-bottom: 60px;
margin-top:60px;
}
.section{
margin-bottom: 60px;
}
.middle-margin{
margin-left: 10px;
}
.col-1-width{
width: 5px;
}
.secuppermiddle{
border:0px solid black;
margin-top: 20px;
}
.secuppermiddleinside{
height: 300px;
line-height: 280px;
text-align: center;
}
.align{
display: inline-block;
vertical-align: middle;
line-height: normal;
}
.middlebckg{
background: #f2f2f2;
margin-top: 20px;
}
.secmiddlemargin{
margin-left: 48px;
}
.belowmiddle{
height:auto;
background: #401d29;
margin-top:40px;
padding-top: 30px;
padding-bottom:100px;
}
.beforefooter{
margin-top: 20px;
}
.footer{
padding-top: 20px;
}
.right.carousel-control, .left.carousel-control {
opacity: 0;
filter:alpha(opacity=0); /* IE support */
}
#media(max-width: 480px) {
.navbar {
border-radius: 4px;
min-height: 120px!important;
}
.navbar-brand {
margin-left:13%;
}
}
#media(min-width: 560px) {
.navbar {
border-radius: 4px;
min-height: 120px!important;
}
.navbar-brand {
margin-left:25%;
margin-bottom: -4%;
}
.navbar-toggle{
margin-top: 70px!important;
}
}
#media(min-width: 768px) {
.navbar {
border-radius: 4px;
min-height: 120px!important;
}
.navbar-brand {
margin-left:50%;
margin-bottom: -4%;
}
.navbar-default .navbar-nav > li > a {
margin-top: 25px;
}
}
#media(min-width : 992px) {
.navbar {
border-radius: 4px;
min-height: 120px!important;
}
.navbar-default .navbar-nav > li > a {
margin-top: 25px;
}
}
Related
I link Font Awesome to my page using the Bootstrap CDN.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css"
integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
However when I try to use the classes indicated at the Font Awesome website all I get is a small square where the icon was supposed to be.
Any suggestions on how to fix that?
The html code is shown below.
<section id="services">
<div class="container-fluid services-container">
<div class="row">
<i class="fa-light fa-fire-extinguisher"></i>
<div class="col-lg-3 col-md-6">
<h3 class="text-styling">Συντήρηση Πυροσβεστήρων</h3>
<p class="text-styling">Ut facere voluptatem ea neque tempora sed praesentium magni nam omnis dolor.
In sint consectetur
sit
consectetur molestias qui quidem cumque qui eius sint? Et labore dignissimos eum deleniti
consequatur
sed laborum dolore et adipisci nulla.
</p>
</div>
<div class="col-lg-3 col-md-6">
<h3 class="text-styling">Μελέτες Πυρασφάλειας</h3>
<p class="text-styling">Ut facere voluptatem ea neque tempora sed praesentium magni nam omnis dolor.
In sint consectetur
sit
consectetur molestias qui quidem cumque qui eius sint? Et labore dignissimos eum deleniti
consequatur
sed laborum dolore et adipisci nulla.
</p>
</div>
<div class="col-lg-3 col-md-6">
<h3 class="text-styling">Συστήματα Πυρανίχνευσης</h3>
<p class="text-styling">Ut facere voluptatem ea neque tempora sed praesentium magni nam omnis dolor.
In sint consectetur
sit
consectetur molestias qui quidem cumque qui eius sint? Et labore dignissimos eum deleniti
consequatur
sed laborum dolore et adipisci nulla.
</p>
</div>
<div class="col-lg-3 col-md-6">
<h3 class="text-styling">Πιστοποίηση</h3>
<p class="text-styling">Ut facere voluptatem ea neque tempora sed praesentium magni nam omnis dolor.
In sint consectetur
sit
consectetur molestias qui quidem cumque qui eius sint? Et labore dignissimos eum deleniti
consequatur
sed laborum dolore et adipisci nulla.
</p>
</div>
</div>
</div>
</section>
You need to install Font Awesome, or to get your script via this link : https://fontawesome.com/start .
Enter your email to get started with a free Kit!
Go to confirm your email and they will give you the script
I have been looking everywhere for an answer to this problem, but I haven't found one yet.
I have a page with a navigation bar at the top. I want the rest of the content to fill the page perfectly, but instead it overlaps downward and to the right, leading to scrollbars.
I am also unsure of how to separate the side div from the main div. I am currently using margin-left as W3C does, but this feels awfully messy, and has to be altered whenever the padding is changed.
I do not want any elements to have a fixed position if possible.
html, body {
margin: 0;
padding: 0;
}
#topnav {
background-color: #00FF00;
border-bottom: 2px solid black;
overflow: hidden;
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
display: inline-block;
height: 100%;
overflow: scroll;
padding: 8px;
position: absolute;
width: 200px;
}
#main {
background-color: #FF00FF;
display: inline-block;
height: 100%;
margin-left: 217px;
padding: 8px;
position: absolute;
width: 100%;
word-break: break-word;
}
<div id="topnav">
<span>Top Navigator</span>
</div>
<div id="sidenav">
<span>Side Navigator</span>
</div>
<div id="main">
<span>Main Area</span>
</div>
Thank you for any help!
height: 100% represent the height of your page, and as you have your top bar, it is normal that your content is bigger than your page and then that scrollbars appears.
You should use height: calc(100% - <height-of-your-top-bar>); instead. You can also use the vh unit.
You also could use CSS Grid which is perfect for this case.
body {
display: grid;
grid-template-rows: 80px calc(100vh - 80px);
grid-template-columns: 200px auto;
}
#top {
grid-column: 1 / span 2;
background-color: green;
}
#side {
background-color: red;
}
#main {
background-color: blue;
}
<div id="top"></div>
<div id="side"></div>
<div id="main"></div>
Try this fiddle. Hope this is what you are looking for
Try this
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
#topnav {
background-color: #00FF00;
border-bottom: 2px solid black;
overflow: hidden;
width:100%
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
display: inline-block;
height: 100%;
overflow: scroll;
position: absolute;
padding: 8px;
width: 300px;
}
#main {
background-color: #FF00FF;
display: inline-block;
height: 100%;
margin-left: 300px;
padding: 8px;
position: absolute;
width: calc(100% - 300px);
word-break: break-word;
}
Making a few modifications to the CSS and ensuring that your paddings does not affect the width and height of the elements, you can use the following:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#topnav {
width: 100%;
height: 56px;
background-color: #00FF00;
border-bottom: 2px solid black;
overflow: hidden;
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
display: inline-block;
height: calc(100% - 56px);
overflow: scroll;
padding: 8px;
position: absolute;
width: 200px;
}
#main {
background-color: #FF00FF;
display: inline-block;
height: calc(100% - 56px);
margin-left: 200px;
padding: 8px;
position: absolute;
width: calc(100% - 200px);
word-break: break-word;
}
Done. You just needed to add a overflow: hidden; in your html, body tag.
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#topnav {
background-color: #00FF00;
border-bottom: 2px solid black;
overflow: hidden;
width:100%
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
display: inline-block;
height: 100%;
overflow: scroll;
position: absolute;
padding: 8px;
width: 300px;
overflow: scroll;
}
#main {
background-color: #FF00FF;
display: inline-block;
height: 100%;
margin-left: 300px;
padding: 8px;
position: absolute;
width: calc(100% - 300px);
word-break: break-word;
overflow: scroll;
}
<div id="topnav">
<span>Top Navigator</span>
</div>
<div id="sidenav">
<span>Side Navigator</span>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem asperiores doloremque similique nulla atque illum tempora aperiam placeat doloribus cupiditate provident fugit unde, vitae suscipit amet dolor sunt excepturi ullam incidunt tenetur. Saepe laudantium facere perspiciatis voluptatem earum fuga sequi. Veniam aliquid ipsam enim nobis natus maxime blanditiis, beatae iusto illo numquam. Repellat, impedit quia quas sequi velit ipsa exercitationem earum illo corrupti id veniam dolore magni recusandae similique numquam in minus autem perspiciatis natus voluptatibus libero laudantium animi voluptas ullam! Nobis deserunt, iusto hic doloribus alias quos nulla obcaecati! Reiciendis, debitis quibusdam deleniti reprehenderit dolore cum ipsam sint eum. Possimus quae sed enim, molestiae, vel ratione cum ipsam explicabo odit, id nihil aut nam! Qui tempora vitae temporibus dolore voluptatibus dolor laboriosam et reiciendis necessitatibus doloribus, voluptas error labore repellendus repellat minus. Amet quae qui incidunt ipsum unde, mollitia culpa accusantium repellat aspernatur pariatur aliquid ipsa consequatur at quam maxime nesciunt eius fugit beatae. Animi officia quos placeat fugit voluptatibus quibusdam earum! Amet illo, deleniti magni aspernatur facere dolorum eum, quaerat quos laborum aliquam nulla perspiciatis error pariatur harum necessitatibus! Ullam perferendis ex sequi amet quis neque? Ducimus porro quaerat et, dolorum mollitia officiis animi qui, est error quibusdam ut maxime dicta aperiam veniam sunt eaque deleniti praesentium facere natus ea expedita? Dolore aperiam quo, nesciunt commodi temporibus facilis veniam modi dolores vero consectetur, ratione officia sed inventore repellendus tempore? Natus ullam non voluptatem magni. Rerum alias veniam, distinctio numquam nihil minus laudantium accusamus? Tempore unde doloribus rerum ipsum excepturi nostrum non, aperiam at velit ipsa fuga maiores rem sint repellat dolorem. Iste animi illum, iure, ea qui voluptatum illo unde vero sequi error voluptatibus quibusdam corrupti quidem. Harum natus, ratione, fuga, voluptate iure nam eligendi quos sapiente magni a nulla ut! Suscipit dolorum aliquam tempora reprehenderit ratione placeat esse pariatur soluta iusto. Perferendis laborum eligendi numquam et blanditiis molestiae explicabo modi deleniti earum. Porro deserunt laborum deleniti excepturi accusantium similique. Animi, saepe consequatur? Eveniet eligendi adipisci similique error molestias animi repellendus porro iure reiciendis modi exercitationem ab, ratione perferendis quod ea quasi! Repellendus, ipsa veniam. Ducimus, possimus, sit quae explicabo blanditiis atque tenetur praesentium consequuntur labore ab architecto tempore distinctio nulla! Architecto excepturi molestiae sit nihil ipsa. Blanditiis cumque praesentium itaque quibusdam dolores ad accusantium quia, omnis eveniet ipsam maxime pariatur, quis debitis ea exercitationem quod libero perspiciatis nobis quam iste? Distinctio saepe nihil blanditiis optio maxime? Animi delectus laboriosam dignissimos architecto nesciunt, necessitatibus incidunt dolores, ex cumque voluptatum facere earum expedita iure dolor omnis voluptate consequatur repellendus nisi reiciendis. Aperiam, commodi dolorem. Cum eligendi at dolorem iste, dolores delectus. Laboriosam, amet eligendi itaque delectus reprehenderit tempora sequi illo molestias totam doloribus rem laborum quas maxime quos error cum, nostrum in similique omnis veniam laudantium odit? Animi non ratione blanditiis distinctio suscipit quibusdam fuga, ab ducimus reprehenderit nobis possimus cupiditate iste earum cum tempore sint minus sequi ipsum. Iusto vel enim soluta aliquid facere sed, sint optio eos repellendus mollitia aperiam iure assumenda illo veniam saepe deleniti dolore.
</div>
<div id="main">
<span>Main Area</span>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem asperiores doloremque similique nulla atque illum tempora aperiam placeat doloribus cupiditate provident fugit unde, vitae suscipit amet dolor sunt excepturi ullam incidunt tenetur. Saepe laudantium facere perspiciatis voluptatem earum fuga sequi. Veniam aliquid ipsam enim nobis natus maxime blanditiis, beatae iusto illo numquam. Repellat, impedit quia quas sequi velit ipsa exercitationem earum illo corrupti id veniam dolore magni recusandae similique numquam in minus autem perspiciatis natus voluptatibus libero laudantium animi voluptas ullam! Nobis deserunt, iusto hic doloribus alias quos nulla obcaecati! Reiciendis, debitis quibusdam deleniti reprehenderit dolore cum ipsam sint eum. Possimus quae sed enim, molestiae, vel ratione cum ipsam explicabo odit, id nihil aut nam! Qui tempora vitae temporibus dolore voluptatibus dolor laboriosam et reiciendis necessitatibus doloribus, voluptas error labore repellendus repellat minus. Amet quae qui incidunt ipsum unde, mollitia culpa accusantium repellat aspernatur pariatur aliquid ipsa consequatur at quam maxime nesciunt eius fugit beatae. Animi officia quos placeat fugit voluptatibus quibusdam earum! Amet illo, deleniti magni aspernatur facere dolorum eum, quaerat quos laborum aliquam nulla perspiciatis error pariatur harum necessitatibus! Ullam perferendis ex sequi amet quis neque? Ducimus porro quaerat et, dolorum mollitia officiis animi qui, est error quibusdam ut maxime dicta aperiam veniam sunt eaque deleniti praesentium facere natus ea expedita? Dolore aperiam quo, nesciunt commodi temporibus facilis veniam modi dolores vero consectetur, ratione officia sed inventore repellendus tempore? Natus ullam non voluptatem magni. Rerum alias veniam, distinctio numquam nihil minus laudantium accusamus? Tempore unde doloribus rerum ipsum excepturi nostrum non, aperiam at velit ipsa fuga maiores rem sint repellat dolorem. Iste animi illum, iure, ea qui voluptatum illo unde vero sequi error voluptatibus quibusdam corrupti quidem. Harum natus, ratione, fuga, voluptate iure nam eligendi quos sapiente magni a nulla ut! Suscipit dolorum aliquam tempora reprehenderit ratione placeat esse pariatur soluta iusto. Perferendis laborum eligendi numquam et blanditiis molestiae explicabo modi deleniti earum. Porro deserunt laborum deleniti excepturi accusantium similique. Animi, saepe consequatur? Eveniet eligendi adipisci similique error molestias animi repellendus porro iure reiciendis modi exercitationem ab, ratione perferendis quod ea quasi! Repellendus, ipsa veniam. Ducimus, possimus, sit quae explicabo blanditiis atque tenetur praesentium consequuntur labore ab architecto tempore distinctio nulla! Architecto excepturi molestiae sit nihil ipsa. Blanditiis cumque praesentium itaque quibusdam dolores ad accusantium quia, omnis eveniet ipsam maxime pariatur, quis debitis ea exercitationem quod libero perspiciatis nobis quam iste? Distinctio saepe nihil blanditiis optio maxime? Animi delectus laboriosam dignissimos architecto nesciunt, necessitatibus incidunt dolores, ex cumque voluptatum facere earum expedita iure dolor omnis voluptate consequatur repellendus nisi reiciendis. Aperiam, commodi dolorem. Cum eligendi at dolorem iste, dolores delectus. Laboriosam, amet eligendi itaque delectus reprehenderit tempora sequi illo molestias totam doloribus rem laborum quas maxime quos error cum, nostrum in similique omnis veniam laudantium odit? Animi non ratione blanditiis distinctio suscipit quibusdam fuga, ab ducimus reprehenderit nobis possimus cupiditate iste earum cum tempore sint minus sequi ipsum. Iusto vel enim soluta aliquid facere sed, sint optio eos repellendus mollitia aperiam iure assumenda illo veniam saepe deleniti dolore.
</div>
If you set your #sidenav and #main to be height:80vh(viewport height) and your #topnav to be height:20vh(you can change this to what ever you like), then it will span the rest of your page.
Also, i have amended your HTML/CSS slightly to include display:flex, so that you dont have to add margin-left to your #main.
Try this:
html,
body {
margin: 0;
padding: 0;
}
#topnav {
background-color: #00FF00;
width: 100%;
height: 100px;
border-bottom: 2px solid black;
}
.content {
display: flex;
height: calc(100vh - 102px);
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
width: 25%;
overflow-y: scroll;
}
#main {
background-color: #FF00FF;
width: 75%;
overflow-y: scroll;
}
<div id="topnav">
<span>Top Navigator</span>
</div>
<div class="content">
<div id="sidenav">
<span>Side Navigator</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum felis vitae venenatis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tincidunt egestas ipsum, eu suscipit arcu condimentum
quis. Donec vestibulum leo et turpis lobortis mattis nec quis velit. Etiam a libero cursus, placerat sem eget, pulvinar diam. Nullam commodo tortor nulla, vel eleifend est semper non. Morbi sit amet sapien lectus. Pellentesque mattis ultrices velit
sit amet eleifend. Sed dignissim euismod nulla ut tincidunt. Nulla placerat enim libero, non aliquet purus dignissim sed. Mauris pharetra, mi non tincidunt feugiat, lectus tellus consectetur sapien, eu pharetra elit tellus et tellus. Nulla facilisi.
Duis sapien metus, interdum in porttitor at, vehicula quis felis. Nullam aliquet eget eros quis rutrum. Nunc vitae nulla interdum, viverra ante id, elementum ex. Integer aliquet nisl eget eros mattis, vel porta lorem hendrerit. Fusce ante ligula,
tincidunt ac iaculis nec, interdum eu purus. Mauris id sagittis urna. Ut id erat dui. Sed sit amet venenatis dolor. Pellentesque faucibus ex a leo feugiat, eu faucibus sem dapibus. Nullam ornare ex nec nisi vestibulum, et pellentesque purus bibendum.
Curabitur eu feugiat urna, nec tempor tellus. Fusce tempus mi ut tristique aliquet. Ut vitae augue a magna lacinia suscipit. Phasellus pulvinar facilisis ultricies. Nullam ultrices, tortor in efficitur consequat, ipsum urna gravida nisi, at tincidunt
eros ante id urna. Phasellus euismod porttitor lectus, id tincidunt neque facilisis in. Praesent condimentum rutrum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
<div id="main">
<span>Main Area</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum felis vitae venenatis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tincidunt egestas ipsum, eu suscipit arcu condimentum
quis. Donec vestibulum leo et turpis lobortis mattis nec quis velit. Etiam a libero cursus, placerat sem eget, pulvinar diam. Nullam commodo tortor nulla, vel eleifend est semper non. Morbi sit amet sapien lectus. Pellentesque mattis ultrices velit
sit amet eleifend. Sed dignissim euismod nulla ut tincidunt. Nulla placerat enim libero, non aliquet purus dignissim sed. Mauris pharetra, mi non tincidunt feugiat, lectus tellus consectetur sapien, eu pharetra elit tellus et tellus. Nulla facilisi.
Duis sapien metus, interdum in porttitor at, vehicula quis felis. Nullam aliquet eget eros quis rutrum. Nunc vitae nulla interdum, viverra ante id, elementum ex. Integer aliquet nisl eget eros mattis, vel porta lorem hendrerit. Fusce ante ligula,
tincidunt ac iaculis nec, interdum eu purus. Mauris id sagittis urna. Ut id erat dui. Sed sit amet venenatis dolor. Pellentesque faucibus ex a leo feugiat, eu faucibus sem dapibus. Nullam ornare ex nec nisi vestibulum, et pellentesque purus bibendum.
Curabitur eu feugiat urna, nec tempor tellus. Fusce tempus mi ut tristique aliquet. Ut vitae augue a magna lacinia suscipit. Phasellus pulvinar facilisis ultricies. Nullam ultrices, tortor in efficitur consequat, ipsum urna gravida nisi, at tincidunt
eros ante id urna. Phasellus euismod porttitor lectus, id tincidunt neque facilisis in. Praesent condimentum rutrum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</div>
I tried another way.
const topnav_height = document.querySelector("#topnav").offsetHeight;
const parent = document.querySelector(".parent");
parent.style.height = "calc(100% - " + topnav_height + "px)";
html, body {
margin: 0;
padding: 0;
height:100%;
}
* {
box-sizing:border-box;
}
#topnav {
background-color: #00FF00;
border-bottom: 2px solid black;
width:100%;
}
.parent {
display:flex;
height:100%;
}
#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
height: 100%;
overflow: scroll;
padding: 8px;
flex:1;
}
#main {
background-color: #FF00FF;
height: 100%;
padding: 8px;
word-break: break-word;
flex:2;
}
<div id="topnav">
<span>Top Navigator</span>
</div>
<div class="parent">
<div id="sidenav">
<span>Side Navigator</span>
</div>
<div id="main">
<span>Main Area</span>
</div>
</div>
I need a 4px thick solid border around my web page. 30px in from the edge. It needs to be responsive so if the website scrolls the border should always be 30px in from the edge of the PAGE not the VIEWPORT.
I'm trying to use div's positioned absolutely 30px in around the page with a 4px border. But this doesn't work for the footer as it doesn't stay at the bottom of the content when the page scrolls. Sometime the content won't fill the viewport so I can just have a border around the main content.
#main {
width: 70%;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 50px;
}
#content2 {
background: #232C44;
color: white;
padding: 30px;
}
#b1 {
position: absolute;
left: 30px;
border-right: 4px solid #916E00;
top: 30px;
bottom: 30px;
}
#b2 {
position: absolute;
left: 30px;
border-bottom: 4px solid #916E00;
right: 30px;
top: 30px;
}
#b3 {
position: absolute;
top: 30px;
bottom: 30px;
border-left: 4px solid #916E00;
right: 30px;
}
#b4 {
position: absolute;
left: 30px;
border-top: 4px solid #916E00;
right: 30px;
bottom: 30px;
}
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non pretium ipsum. Morbi sagittis eu odio at laoreet. Nullam aliquam porttitor pretium. Mauris at nunc nec tortor hendrerit euismod pharetra at dolor. In placerat, lectus vitae semper ultrices,
mi dui gravida nisi, sit amet posuere metus dui quis leo. Mauris euismod, diam sed faucibus ullamcorper, urna magna tempus dolor, nec congue nulla dui nec tellus. Nullam dictum vestibulum est, id gravida nisi aliquet nec. Integer facilisis, nibh sed
viverra volutpat, mi enim convallis tortor, eu tincidunt metus magna eget elit. Ut at magna quam. Duis vel lorem nec lectus rutrum auctor. Vivamus vitae rutrum mi, id mattis eros. In hac habitasse platea dictumst. uis, blandit eros. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam feugiat augue purus, ut sollicitudin nibh egestas dapibus. Morbi vel nisl a magna aliquam mollis.
</div>
PART 2
Ok so we have some answers. I'd like to take this to a second stage which I need for my design.
I need two sections to the page TOP and BOTTOM. The colour of these bleeds past the border. How do I create this to the same spec as the first part of the question.
This is how it should look:
This is how it currently looks:
Don't worry about the width and height. How do I make all the top white and the bottom blue. Whilst still making it responsive. The bottom border always the same distance from the PAGE edge (no the viewport)? Even when the page needs to scroll.
I recommend adding the border to the body element. Please check the following
html, body {
min-height: calc(100vh - 68px);
}
body {
border: 4px solid #916E00;
margin: 30px;
}
#main {
padding: 0 10%;
}
<div id="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum accusamus possimus dolore iste aspernatur soluta quia ipsam perferendis magni, voluptatum libero ratione dignissimos cumque magnam rem quasi, at, explicabo eius?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt inventore libero illo laborum soluta modi nesciunt, iste minus, animi aliquid dolor, atque cumque vero fugiat hic amet ipsa exercitationem eum?</p>
<p>Cumque ab libero voluptatem iste. Adipisci omnis a est mollitia neque perspiciatis excepturi incidunt unde, eius tempora vel? Commodi voluptate minima numquam, aliquid veritatis laborum velit rerum cupiditate accusamus repudiandae!</p>
<p>Harum ab voluptate, id dolor autem minima nesciunt sunt aut in! Impedit in illum velit eligendi accusamus nostrum numquam maxime est, molestiae odit nam! Omnis illum ipsum reiciendis eligendi deserunt.</p>
<p>Tempora enim nisi cupiditate perferendis asperiores placeat incidunt iste neque hic aliquid quos aperiam, sint amet! Quaerat nisi mollitia, officiis quis voluptate dignissimos cumque illum, explicabo, velit consequuntur quos nobis.</p>
<p>Quas sed perferendis recusandae nesciunt asperiores nulla, eius dolores quisquam, blanditiis eaque ab illum perspiciatis ut. Reiciendis, at sunt explicabo esse dolores praesentium, unde maiores quibusdam porro perspiciatis repellendus fugit?</p>
<p>Et inventore a itaque recusandae nostrum sed, quod, quae ab, vero accusamus nihil esse explicabo fuga illum quas? Iure ducimus iusto totam consequuntur, accusamus illum optio nesciunt ipsam ipsa deleniti.</p>
</div>
This will keep the border aligned to the bottom of page if there isn't sufficient content to fill the viewport.
PART 2 solutions, using JS - comments included within snippet
var bottomMarginOffset = 90; //adjust as needed
function onResize() {
$('.row2').css('margin-top', $('.row1').height() + bottomMarginOffset + 'px');
}
$(function() {
// call resize on page load to set initial value
onResize();
});
$(window).resize(onResize)
* {
box-sizing: boder-box;
}
body {
background-color: #00b3ff;
padding: 0;
margin: 0;
}
#main {
min-height: calc(100vh - 68px);
border: 4px solid #916E00;
position: relative;
padding: 0;
margin: 30px;
}
/*
Set top row to absolute and offset it (margin + border width) so that it sits outside its container.
Recommend using some CSS vars to set and calculate the values.
*/
.row:nth-child(1) {
position: absolute;
top: 0;
left: 0;
right: -34px; /* stretch it outside on right side */
z-index: -1; /* stack under parent so the border stays on top */
margin-left: -34px; /* pull left */
margin-top: -34px; /* pull up */
padding: 64px 64px 34px; /* add padding so that content is aligned with the rest of the child elements */
}
.row:nth-child(2) {
padding: 30px;
}
.row:nth-child(odd) {
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div class="row row1"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae doloremque quaerat commodi consectetur quisquam similique, dignissimos tenetur, modi porro, cum voluptas expedita neque nisi dolorem sequi sed beatae? Repellendus, alias?</p>
<p>A ut nam quidem nobis obcaecati fuga sunt. Recusandae perspiciatis repellat vero? Nostrum, architecto commodi. Officiis quos cum dolore error enim adipisci deserunt, blanditiis autem fugiat laboriosam suscipit laborum hic!</p>
</div>
<div class="row row2"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, officia sequi facilis exercitationem vero error voluptatibus libero magnam ducimus explicabo commodi quos itaque quas consequatur dolores veniam nam excepturi autem.</p>
<p>Officiis ipsa quod dolores temporibus at porro corporis aut natus distinctio suscipit esse, nam soluta veniam earum quaerat laborum ab voluptatem voluptatibus laboriosam repellat quis. Labore aliquid illum cumque assumenda.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa odit non unde nesciunt illo qui dolorum autem ad minus quisquam nemo rem tenetur vero velit ab in, veritatis recusandae voluptatum?</p>
<p>Optio sunt inventore accusantium accusamus, eaque at voluptate libero fugit, ipsum impedit, modi labore autem molestiae. Porro tempora, corrupti, quo veritatis laudantium illum veniam nulla illo in quasi facere dolore?</p>
<p>Expedita exercitationem ipsam explicabo similique est omnis reiciendis. Natus non similique veritatis, reprehenderit, sed delectus quo at molestiae expedita placeat quis accusamus iure? Soluta natus vel asperiores dignissimos, laboriosam expedita!</p>
<p>Tempora doloribus neque dolores odio temporibus laboriosam nostrum, reiciendis suscipit provident cum officiis eaque culpa, quam est molestias minus enim harum adipisci autem expedita, laudantium quisquam ut nihil. Deserunt, voluptas.</p>
<p>Qui accusantium ut atque esse excepturi praesentium minima quos harum! Voluptas quibusdam alias incidunt similique facilis architecto, qui nulla, quas voluptates laudantium quis modi saepe suscipit. Inventore, aliquid. Minima, dolor.</p>
<p>Quidem, sunt facilis voluptates nihil neque doloremque deserunt? Magnam in adipisci ipsum voluptatem possimus quas mollitia, dicta soluta non magni praesentium ad ea. Dignissimos accusamus quaerat ab est. Magnam, asperiores!</p>
<p>Dolores, quo. Officiis hic adipisci nihil obcaecati voluptates incidunt sit eum dolorem quasi dignissimos vero ullam maxime harum laborum quis ab praesentium corporis quos, tenetur, omnis non ex error doloribus?</p>
<p>Officia, quisquam? Omnis unde reprehenderit, asperiores delectus quibusdam corrupti veniam dignissimos. Sunt natus ut illo aspernatur perspiciatis veritatis? Mollitia, eligendi aliquid. Natus, earum? Ipsam harum consequatur unde aliquid! Necessitatibus,
beatae!</p>
<p>Nostrum sunt quod consectetur debitis quam. Excepturi perspiciatis fugit voluptates corrupti fuga repellendus alias voluptatibus laudantium sed consectetur nam cum nihil in saepe repellat aspernatur accusantium sapiente, labore quae perferendis.</p>
<p>Dolor tenetur voluptate eum, illo qui aut unde vitae quos. Error placeat recusandae, consectetur dolore, facilis iusto distinctio fugit eligendi iure quia ab voluptatem dolor corporis, repellat aliquid laboriosam minus!</p>
<p>Rerum alias aspernatur, quae nostrum, cumque saepe voluptate dolore vitae distinctio veritatis fugiat, necessitatibus laborum! Quod vitae hic, totam consectetur labore ratione natus voluptatem, incidunt voluptatibus mollitia, expedita similique exercitationem!</p>
<p>Ipsum veritatis optio dolorem, sed nihil aliquam reprehenderit culpa provident quam expedita ratione consectetur ipsa beatae explicabo atque amet iure. Voluptatibus praesentium molestiae neque dolor nemo ipsam nesciunt ab sit!</p>
<p>Consequuntur ipsam assumenda quam laudantium ipsa fugit? Ad totam accusamus temporibus sunt eligendi cupiditate excepturi sequi voluptatem recusandae nesciunt laudantium deleniti id, est, nam nihil quidem veniam facilis tenetur adipisci.</p>
<p>Voluptates ipsa voluptatem delectus quis consequuntur expedita vel quod atque minus, temporibus sint inventore repudiandae quas in illum incidunt mollitia officia, fugit quos voluptas repellat suscipit officiis doloremque explicabo? Sequi!</p>
<p>Repellat possimus libero id in ut excepturi qui necessitatibus temporibus doloremque voluptatum autem facilis animi quisquam vel error incidunt eligendi esse, optio nemo consequatur quibusdam hic voluptas modi facere? Unde!</p>
<p>Ut deserunt error, vitae quam itaque dolorem ea quibusdam minima porro facilis id ex aliquid aliquam a distinctio nam, qui adipisci eius deleniti natus impedit atque? Eius labore cumque sequi.</p>
<p>Dolor dolorem ratione ullam repellendus ad vel praesentium obcaecati quisquam reiciendis, non, at natus deleniti velit aliquid magni. Debitis nulla quo minus quisquam nihil sequi aliquid reiciendis amet ratione cupiditate.</p>
<p>Ex et ullam esse, provident nisi fugiat autem unde sunt minima, ratione recusandae expedita possimus, fuga ut sit eius asperiores eveniet incidunt quae iure? Eaque cum fugit temporibus impedit exercitationem.</p>
<p>Nemo recusandae ratione reprehenderit labore cumque laborum placeat eius unde impedit modi maxime beatae vero eveniet repellat, quae non quisquam, sapiente ea laudantium eos iure blanditiis deserunt consequuntur. Modi, sed.</p>
<p>Sunt ab libero fugiat nisi dolor tenetur perferendis eaque sapiente aperiam sit iste corporis, voluptatem, saepe modi possimus quae necessitatibus velit quas at. Corrupti voluptates libero, repellendus magnam repudiandae illum?</p>
</div>
</div>
Note one caveat with this solution is that the text in top row won't be selectable (due to stacking order). Bad for usability and accessibility. You can work around this by placing the text in a separate container and positioning accordingly. I'll leave that up to you to explore.
I think you're making it too complicated! Try this?
<div style="margin: 30px; border: 4px solid red;">
<p style="max-width: 700px; margin: 0 auto; padding: 30px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div>
https://codepen.io/scottmledbetter/pen/MXVmbP
I believe this is what you want:
index.html
<div class="b one"></div>
<div class="b two"></div>
<div class="b three"></div>
<div class="b four"></div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non pretium ipsum. Morbi sagittis eu odio at laoreet. Nullam aliquam porttitor pretium. Mauris at nunc nec tortor hendrerit euismod pharetra at dolor. In placerat, lectus vitae semper ultrices,
mi dui gravida nisi, sit amet posuere metus dui quis leo. Mauris euismod, diam sed faucibus ullamcorper, urna magna tempus dolor, nec congue nulla dui nec tellus. Nullam dictum vestibulum est, id gravida nisi aliquet nec. Integer facilisis, nibh sed
viverra volutpat, mi enim convallis tortor, eu tincidunt metus magna eget elit. Ut at magna quam. Duis vel lorem nec lectus rutrum auctor. Vivamus vitae rutrum mi, id mattis eros. In hac habitasse platea dictumst. uis, blandit eros. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam feugiat augue purus, ut sollicitudin nibh egestas dapibus. Morbi vel nisl a magna aliquam mollis.
</div>
main.css
.main {
box-sizing: border-box;
padding: 2rem;
margin: 2rem;
}
.b {
position: fixed;
background: slateblue;
width: 30px;
height: 100%;
}
.two {
right: 0;
}
.three, .four {
width: 100%;
height: 30px;
}
.three {
top: 0;
}
.four {
bottom: 0;
}
Working pen: https://codepen.io/manAbl/pen/ZRxejr?editors=1100 ;
I believe you can also implement what you want using :before & :after pseudo-classes so you would use the body tag and just one more extra div to wrap your content. Using both pseudo-classes in the body and the extra div (Hopefully you can easily figure it out for yourself from here ...)
Hope helps :)
So I am pretty sure this is what you are looking for, but it was a little bit difficult to understand exactly what you meant.
Here is a JSFiddle of what I did.
Basically, you need another wrapper div for this to work. Putting the padding: 30px on the main keeps that border at least 30 pixels from the edge of the screen. Put the border on .content and then add some padding to it and a min-height of 100vh.
In case you haven't used the shorthand on margins, padding, etc., It goes in clockwise, starting from the top. So rather than setting:
.class {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
we can just do:
.class {
margin: 5px 10px 5px 10px;
}
You can shorten that further to just margin: 5px 10px; since top/bottom and right/left are the same.
I'm trying to replicate a navbar similar to this website. so there is a non-sticky navbar when user opens the website and after user scrolled down a little bit the non-sticky navbar gone and replaced by a sticky navbar. how can I achieve something like this with materialize css ? so far i've only made the non-sticky navbar part
<nav class="nav-extended">
<div class="nav-wrapper">
<img src="viva.png" alt="" id="logo">
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons"></i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
<li>Register</li>
<li>|</li>
<li>Login</li>
</ul>
</div>
<hr>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab">Test 2</li>
<li class="tab">Test 3</li>
</ul>
</div>
</nav>
Try this:
HTML
<div class="header">Header Example</div>
<div class="content">
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.
</p>
</div>
CSS
body {
margin:0;
padding:0;
font-family: Arial, sans-serif;
}
header {
position: relative;
width: 100%;
height: 80px;
line-height: 80px;
background: #CCCCCC;
color: #333333;
padding-left: 25px;
}
header.fixed {
position:fixed;
top:-80px;
left: 0;
right: 0;
z-index:8888;
transition:0.3s top cubic-bezier(.3,.73,.3,.74);
}
body.on-scroll header.fixed {
top:0;
}
.content {
padding: 25px;
background: #fff;
line-height: 1.4;
color: #333;
min-height: 2700px; /* You can remove this,is just for demo purpose */
}
jquery:
(function($){
$(document).ready(function() {
var $header = $(".header"),
$clone = $header.before($header.clone().addClass("fixed"));
$(window).on("scroll", function() {
var fromTop = $(window).scrollTop();
$("body").toggleClass("on-scroll", (fromTop > 200));
});
});
})(jQuery);
Here's a jsfiddle example.
I am trying to get bootstraps affixed side bar menu to work following the code used in this link. http://www.bootply.com/109952
I have the CSS and the JS in respective files, but when i load the web page, it looks a lot different, and none of the functionality works!!
Am i refernecing the files wrong in my HTML? Do i need to include some other ref, like the Jquery library? If so, how?
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'mainCSS/mainWEBcss.css' %}" type="text/css">
<script type="text/javascript" charset="utf-8" src="{% static 'mainJS/sideBarJS.js' %}"></script>
The rest of the code is the exact same from the web site i copied and pasted from, with the addition on the three lines pasted above. I know my load static files is fine though!
Posting my html below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'mainCSS/mainWEBcss.css' %}" type="text/css">
<script type="text/javascript" charset="utf-8" src="{% static 'mainJS/sideBarJS.js' %}"></script>
</head>
<header class="navbar navbar-bright navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootply
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
Get Started
</li>
<li>
Edit
</li>
<li>
Visualize
</li>
<li>
Prototype
</li>
</ul>
</nav>
</div>
</header>
<div id="masthead">
<div class="container">
<div class="row">
<div class="col-md-7">
<h1>Bootply
<p class="lead">The easiest way to apply Bootstrap</p>
</h1>
</div>
<div class="col-md-5">
<div class="well well-lg">
<div class="row">
<div class="col-sm-6">
<img src="//placehold.it/180x100" class="img-responsive">
</div>
<div class="col-sm-6">
<strong>Important</strong>
<p>Blah blah blah blah bla!</p>
</div>
</div>
</div>
</div>
</div>
</div><!-- /cont -->
</div>
<!-- Begin Body -->
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li>
Section
<ul class="nav">
<li class="">- Sub 1</li>
<li class="">- Sub 2</li>
</ul>
</li>
<li>
Section 1
<ul class="nav">
<li class="">- Sub 1</li>
<li class="">- Sub 2</li>
<li class="">- Sub 3</li>
</ul>
</li>
<li>Section 2</li>
<li>Section 3</li>
<li>
Section 4
<ul class="nav">
<li class="">- Sub 1</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-9">
<h2 id="sec0">Content</h2>
At Bootply we like to build simple Bootstrap templates that utilize the code Bootstap CSS without a lot of customization. Sure you can
find a lot of Bootstrap themes and inspiration, but these templates tend to be heavy on customization.
<hr>
<div id="sec0a">
This is some mroe content Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae..
</div>
<br><br>
<div id="sec0b">
This is some mroe content Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae..
</div>
<br><br>
<hr class="col-md-12">
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
<h2 id="sec1">Content</h2>
<p>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut.
</p>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><h3>Hello.</h3></div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><h3>Hello.</h3></div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
</div>
</div>
<div id="sec1a">
<h4>Section 1 a</h4>
This is some mroe content Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae..
</div>
<br><br>
<div id="sec1b">
<h4>Section 1 b</h4>
This is some mroe content Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae..
</div>
<br><br>
<div id="sec1c">
<h4>Section 1 c</h4>
This is some mroe content Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae..
</div>
<br><br>
<hr>
<h2 id="sec2">Section 2</h2>
<p>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
</p>
<div class="row">
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
</div>
<hr>
<h2 id="sec3">Section 3</h2>
Images are responsive sed #mdo but sum are more fun peratis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
<h2 id="sec4">Section 4</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
<hr>
<h4>Edit on Bootply</h4>
<hr>
</div>
</div>
</div>
<p>This is the header file with bootstraps</p>
<!-- This is start of jinja -->
{% include "loginpage/loginlogic.html" %}
{% block content %}
{% endblock %}
</html>