I made a fixed sidebar after the navbar in bootstrap. There is an issue in it when i used top:0 it works fine when i add new blocks in the sidebar but when I remove top:0 from the .sidenav class the scroll starts working when i adding a least two blocks after the screen reached its 100% height. Moreover, the last block after them will not remain visible in screen even after scrolling. Everything works fine with the use of top:0 but the navbar overlaps it when i used it.
when i used top:0:
when i don't used top:0 :
However, if i remove top:0 and half block remain after screen it doesn't make scroll for that.
Scroll for last block visibility not showing:
Here is the code:
HTML:
<html>
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/register.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<div class="cotainer-fluid navbar-fixed-top">
<div class="row panel-head">
<div class="col-sm-4">
<span>For Business Queries: </span>
<span class="glyphicon glyphicon-earphone phone-icon"></span>+923214868587
</div>
<div class="col-sm-4">
<span>Email :</span>
ourwebsite#gmail.com
</div>
<div class="col-sm-4">
<span>Join Us: </span>
<a title="Facebook" href=""><img src="./assets/images/if_facebook_circle_color_107175.png" alt="fb" height="25" width="25"></a>
<a title="Twitter" href=""><img src="./assets/images/if_twitter_circle_color_107170.png" alt="twitter" height="25" width="25"></a>
<a title="Instagram" href=""><img src="./assets/images/if_instagram_circle_color_107172.png" alt="instagram" height="25" width="25"></a>
<a title="Google+" href=""><img src="./assets/images/if_google_circle_color_107180.png" alt="google+" height="25" width="25"></a>
</div>
</div>
<nav class="navbar navbar-default" id="nav_bar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
FoodieHighway
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" id="nav">
<li id="Home" class="active2">
HOME
</li>
<li>
LOGOUT
</li>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="container-fluid after-navbar-body">
<div class="row">
<div class="col-lg-2">
<div class="sidenav">
<div class="row">
<div class="col-sm-12 order-detail-1">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan</p>
<p>ETA : 5 Mins</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<p class="order-p">Order ID #5624</p>
<p>Name : Ibrahim Amar Khan2222</p>
<p>ETA : 5 Mins</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 250px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
left: 0;
border:1px solid black;
overflow-y:scroll;
overflow-x:hidden;
}
.after-navbar-body
{
padding-top: 110px;
}
#media (max-width:767px)
{
.after-navbar-body
{
padding-top: 151px;
}
}
.sidenav .row:nth-child(1) div
{
background-color: rgb(236,212,212);
}
.sidenav .row:nth-child(2) div
{
background-color:rgb(241,233,233);
}
.sidenav .row:nth-child(3) div
{
background-color:rgb(241,233,233);
}
.sidenav .row:nth-child(4) div
{
background-color: rgb(230, 238, 231);
}
.sidenav .row:nth-child(5) div
{
background-color: rgb(219, 240, 222);
}
.sidenav .row
{
border-bottom:1px solid black;
}
.sidenav p
{
color:black;
font-weight:700;
}
.order-p
{
padding-top:20px;
}
Related
I made 3 columns with the bootstrap framework. In the second column there is a div with some text. I would like to move that div to the top left corner of the document (not on the top left corner of the parent).
I cannot just add a div above the columns or add jquery or javascript because I am using other software. It is very stricted and I can only add custom CSS to it.
An example. The purple div should be on the space of the left arrow:
I tried position absolute but with no success.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./example.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4"><h3>Title 1 - col-sm-4</h3></div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="section-topleft">
<h3>This div should be on the top left corner of the document</h3>
</div>
<h3>Title 2 - col-sm-4</h3></div>
<div class="col-sm-4" style="background-color:lavender;"><h3>Title 3 - col-sm-4</h3></div>
</div>
</div>
</body>
</html>
.section-topleft{
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
I also do not want position: fixed. I am really curious if this is even possible. If it's not possible it's also fine.
In the real example it does not work yet
Here you can see the css of the div with class "test". The div that should be placed on the top left corner
So here is the code of the HTML from the 3rd row (relevant html):
<div class="row">
<div class="col-md-3 hidden-xs hidden-sm">
<!-- Nav (Logged in) -->
<div class="main-logo">
<a href="https://google.com">
<img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/df60389c3caec18e6d856beca7c8_logo_black.png">
</a>
</div>
<div class="navi-left">
<ul>
<li class="active">
<a href="/affiliate">
<span id="affiliate-nav-homepage"><span class="default">Home Page</span></span>
</a>
</li>
<li>
<a href="/affiliate/content">
<span id="affiliate-nav-marketing-materials"><span class="default">Marketing Materials</span></span>
</a>
</li>
<li>
<a href="/affiliate/analytics">
<span id="affiliate-nav-analytics"><span class="default">Analytics</span></span>
</a>
</li>
<li>
<a href="/affiliate/invite">
<span id="affiliate-nav-invite-others"><span class="default">Invite Others</span></span>
</a>
</li>
<li>
<a href="/affiliate/children">
<span id="affiliate-nav-your-network"><span class="default">Your Network</span></span>
</a>
</li>
<li>
<a href="/affiliate/subids">
<span id="affiliate-nav-sub-ids"><span class="default">SubIDs/Channels</span></span>
</a>
</li>
<li>
<a href="/affiliate/landing_pages">
<span id="affiliate-nav-landing-pages"><span class="default">Landing Pages</span></span>
</a>
</li>
<li>
<a href="/affiliate/commission_details">
<span id="affiliate-nav-commission-details"><span class="default">Commissions</span></span>
</a>
</li>
</ul>
<ul class="navi-mobile-lower">
<li>
<i>
<hr>
</i>
</li>
<li>
Create Password
</li>
<li>
Update Account Email
</li>
<li>
Update Paypal Email
</li>
<li>
Log Out
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="main-content">
<!-- header -->
<div class="custom-header">
<div class="default-title" id="default-title">
<figure><img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/374c2ace96edb5866ba9e7aa079bbc202232c4e8_Brand%20advocates%20banner%20%283%29.png" data-image="foo"></figure>
</div>
</div>
<div>
<div class="v2-alerts">
</div>
<div class="row">
<div class="col-md-3" style="
position: static;
">
<div class="left-panel">
<div>
<div class="test">
<h1>test</h1>
</div>
<p>We are excited to have you as part of the studio team!</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="right-panel">
<div id="sharing-div">
<div class="sharing-section top-to-bottom">
<div class="row">
<div class="col-md-12">
<div class="title">
<span id="affiliate-link-title"><span class="default">Your Referral Link</span></span>
</div>
<div class="aff-link">
<span><i>
http://studio.com?afmc=1b
</i></span>
</div>
<div class="row">
<div class="col-md-12">
<div>
<div class="pull-right">
<a class="copy-link" data-clipboard-text="http://studio.com?afc=1b">copy link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sharing-section top-to-bottom">
<div class="row">
<div class="col-md-12">
<div class="title">
<span id="primary-social-links-title"><span class="default">your primary social links</span></span>
<div class="pull-right">
view all links
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="links">
<div class="share-btn">
<a data-share-type="email" data-link-id="9937727" href="/share/email">
<div>
<img src="/assets/primary-email-c415b75ea87907f28155ecb8b66b5fc42686c773f6315e8a9151d8b61dbe385c.png">
</div>
Email
</a>
</div>
<div class="share-btn">
<a href="/share/facebook" target="_blank" data-share-type="facebook" data-link-id="9937727">
<div>
<img src="/assets/primary-facebook-70e1f3176145c920e2423ffe0c06a15eece6e56cd51172582ea4d5571e0b0ab3.png">
</div>
Facebook
</a>
</div>
<div class="share-btn">
<a data-share-type="twitter" data-link-id="9937727" target="_blank" href="/share/tweet">
<div>
<img src="/assets/primary-twitter-2130572d07fd2cd1604a59dd16498c4e267ddf5c8ed1a82fcc826f7c6511dee0.png">
</div>
Twitter
</a>
</div>
<div id="whatsapp_share" class="share-btn">
<a data-share-type="whatsapp" data-link-id="9937727" target="_blank" href="/share/whatsapp">
<div>
<img src="/assets/primary-whatsapp-283a25d6a61b76686118d7f2f5866a0ba21c520ff4404a3b248523b7b7d396bd.png">
</div>
Whatsapp
</a>
</div>
<div id="text_share" class="share-btn">
<a data-share-type="text" data-link-id="9937727" target="_blank" href="/share/text">
<div>
<img src="/assets/primary-sms-2ee17bddcfbb89a98c68fdcf8282df2e5920c135ebe62595e77dc0cfc6a0622c.png">
</div>
Text
</a>
</div>
<div id="linked_in_share" class="share-btn">
<a data-share-type="linkedin" data-link-id="9937727" target="_blank" href="/share/linkedin">
<div>
<img src="/assets/primary-linkedin-5bc3ba7bbfda5051d5d0d82ebc9b397ac17778b21fa7936ba7b0db3bbbc22d92.png">
</div>
LinkedIn
</a>
</div>
<div class="share-btn">
<a ic-action="slideToggle" ic-target="#instagram-sharing-instructions" data-share-type="instagram" data-link-id="9937727" ic-trigger-on="default">
<div>
<img src="/assets/primary-instagram-826dae8b5dbccbce3a5a2e4ed0936c96fb6a24e3eb32006f3e5ebf4c51e9dc32.png">
</div>
Instagram
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="instagram-sharing-instructions" style="display: none;">
<div class="col-md-12">
<div class="fs18">
<span id="affiliate-instagram-sharing-instructions"><span class="default">Instagram Sharing Instructions</span></span>
</div>
</div>
<div class="col-md-12">
<ol>
<li>
<span class="instagram-badge">1</span>
<a class="copy-link" data-clipboard-text="http://studio.com?afmc=1b">copy link</a>
</li>
<li>
<span class="instagram-badge">2</span>
<a id="instagram-launch" class="" href="https://instagram.com/_n/mainfeed/" target="_blank"><span></span><b>Click here to launch Instagram</b></a>
<script>
$(function(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$("#instagram-launch").attr('href', "instagram://");
} else if(navigator.userAgent.match(/android/i)) {
$("#instagram-launch").attr('href', "intent://instagram.com/_n/mainfeed/#Intent;package=com.instagram.android;scheme=https;end")
} else {
$("#instagram-launch").attr('href', "https://instagram.com/_n/mainfeed/");
$("#instagram-launch").attr('target', "_blank")
}
})
</script>
</li>
<li><span class="instagram-badge">3</span>Paste the link into your Profile, Story or Reels</li>
</ol>
</div>
</div>
</div>
<!--<div class="divider"></div>-->
<div>
<div class="title">
<span id="your-progress-title"><span class="default">Your Progress</span></span>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>2</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-visitors-title"><span class="default">Friends have visited us</span></span>
</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>0</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-sign-up-title"><span class="default">Friends have signed up with us</span></span>
</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>0</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-purchase-title"><span class="default">Purchases made by friends</span></span>
</span>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="title">
<span id="affiliate-payments-title"><span class="default">Your Payments</span></span>
</div>
<div class="dash-instructions">
<p>You will receive a 30% commission for each referral. For monthly and annual subscriptions, you will receive recurring commissions as long as the member is subscribed. </p>
</div>
<div class="table-scrollable-wrapper">
<table class="table">
<thead>
<tr>
<th>
<span id="affiliate-payments-compensation"><span class="default">Compensation</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-due"><span class="default">Due</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-upcoming"><span class="default">Upcoming</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-paid"><span class="default">Paid</span></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="text-muted text-center">
<span style="opacity: 0.5;"> nothing to show yet </span>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the css(most of the important css is from bootstrap itself):
body {
background: #ffffff url(https://forge.swap-studio.com/assets/bg-polygon-dd7097463c1102fbf7fe55f6e00595256861740bba73750be91902f955f41f1e.png) no-repeat bottom center; /* fallback for old browsers */
background-size: cover;
background-attachment: fixed;
}
.grad-text {
background: -webkit-linear-gradient(0deg, #555555 0, #555555 70%);
}
a{
color: #002929;
}
/*.aff-link {*/
/*border: 1px solid #002929;*/
/*}*/
/*.aff-link-2 {*/
/*border: 1px solid #cdcdcd;*/
/*}*/
.aff-link-2 .copy-link {
background-color: #cdcdcd;
border: 1px solid #cdcdcd;
}
.aff-link-2 .btn-alt {
color: #cdcdcd !important;
}
.copy-link {
background-color: #002929;
border: 1px solid #002929;
}
.copy-link-wide {
background-color: #002929;
border: 1px solid #002929;
}
.aff-progress b {
color: #002929;
}
.change-url {
color: #002929;
}
.change-url-field .btn {
background-color: #002929;
}
.change-url-field .btn-alt {
/*background-color: #002929;*/
}
.aff-invite input {
border: 1px solid #002929;
}
.dot {
border: (10 / 5) solid #002929;
}
#affiliate-invite-who {
color: #002929;
font-size: 1.2em;
}
.dash-primary-color {
color: #002929 !important;
}
.button-primary {
background-color: #002929;
border: 1px solid #002929;
}
.email-input {
border: 1px solid #002929;
}
.button-primary-fullwidth {
background-color: #002929;
border: 1px solid #002929;
/*border-bottom: 3px solid #cdcdcd >;*/
}
.button-primary-flat-fullwidth {
color: #002929;
border: 1px solid #002929;
}
.comp-stats-figure {
color: #002929;
}
.top-to-bottom {
/*border-width: 6px;*/
/*border-style: solid;*/
/*border-color: #002929;*/
/*-webkit-border-image:*/
/*-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff)) 1 100%;*/
/*-webkit-border-image:*/
/*-webkit-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*-moz-border-image:*/
/*-moz-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*-o-border-image:*/
/*-o-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*border-image:*/
/*linear-gradient(to bottom, #ffffff, #ffffff) 1 100%;*/
/*border-right: 0px;*/
/*border-top: 0px;*/
/*border-bottom: 0px;*/
}
/* Logged in page */
.test{
position: absolute;
background-color:purple;
top: 0;
left: 0;
width:100%;
}
It depends a bit on exactly what you want for other items, but concentrating on the purple-background element it is currently placed relative to the second child of the row element as that is given position: relative by the bootstrap CSS.
This snippet sets that second child to have position: static so the purple element is not positioned relative to it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./example.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.section-topleft {
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
.container-fluid .row :nth-child(2) {
position: static;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4">
<h3>Title 1 - col-sm-4</h3>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="section-topleft">
<h3>This div should be on the top left corner of the document</h3>
</div>
<h3>Title 2 - col-sm-4</h3>
</div>
<div class="col-sm-4" style="background-color:lavender;">
<h3>Title 3 - col-sm-4</h3>
</div>
</div>
</div>
</body>
</html>
I've just started to teach myself some basic web design and have been trying to use Bootstrap 3.
I've been having issues with my navbar and accordion that seem to be based on the order of my CDN imports. I'm trying to include all imports I need in my navbar/header section so I don't need a >head< section on my other pages.
When I put them in the order I see in every thread I've come across they are in this order.
<script src = ...jquery/3.3.1/jquery.min.js"></script>
<script src = ...maxcdn../3.3.7/js/bootstrap.min.js"</script>
With this order my responsive navbar breaks and my hamburger menu no longer works but the accordion collapsible works fine. I understand that bootstrap needs to have jquery loaded first to use some of its features however in order to get my navbar to work I have to switch the two lines above. I believe that this is an issue stemming from the code of my navbar but have not been able to pinpoint the problem.
You can see the broken navbar here:
Broken Navbar/Hamburger menu
Here is my Navbar code:
<!DOCTYPE html>
<html>
<head> <!--Import needed CDN stuff-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: yellow;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: black;
}
.active {
background-color: yellow;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="topnav" data-spy="affix" data-offset-top="0"
id="myTopnav">
<a href="http://cabins.cannondam.net/" data-toggle="tooltip"
title="Click here for information on Cannon Dam Cabins"
class="active">Cabins</a>
Store
FAQ <!--FAQ section with Accordian:
Cabins FAQ, Store FAQ,-->
Contact
<a href="javascript:void(0);" class="icon"
onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
Any help or tips to improve would be great!
If you are using bootstrap, you don't need media query and JS, the class="navbar-toggle" do it by itself.
Take a look at this code, maybe it will help you:
<!DOCTYPE html>
<html>
<head>
<!--Meta-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----Style---->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!----Script---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
a{
width: 100%;
color: black;
}
.icon-bar{
background-color:black;
}
.topnav {
overflow: hidden;
background-color: yellow;
width: 100%;
}
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: red;
color: black;
}
.active {
background-color: yellow;
}
.topnav .icon {
display: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-fixed-top" id="navbar_home">
<div class="topnav navbar-header">
<button type="button" id="nav-icon2" class="navbar-toggle" data-toggle="collapse" data-target="#myTopnav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="topnav collapse navbar-collapse" id="myTopnav">
<ul class="nav navbar-nav navbar-center">
<li>Cabins</li>
<li> Store</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</div>
</nav>
</body>
</html>
I do not think the issue has anything to do with the order in which you are calling external resources. It is more likely related to invalid source code or script conflicts.
Looking at the source code on your site I see several problems with your markup. You have two opening <html> tags and three opening <body> tags. It appears as if you are copying and pasting code snippets without fully understanding how the markup works. Also, you are including the Bootstrap framework, but not fully utilizing it on your page.
First, let's look at how your markup should be structured:
<!DOCTYPE html>
<html>
<head>
<!-- Metadata, external resource links, CSS, Javascript, etc. -->
</head>
<body>
<!-- Site Content -->
</body>
</html>
We begin with a DOCTYPE declaration. Everything else contained in an HTML page should begin with an opening <html> tag and end with a closing </html> tag. You should never have more than one set of HTML tags on any page.
I am not going to take the time to try and debug your code; it needs to be rewritten. I would start by utilizing Bootstraps built in navigation and eliminating your inline navigation script:
body, .container-fluid {
background: yellow;
}
<!DOCTYPE html>
<html>
<head>
<!--Import needed CDN stuff-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Cabins</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</div>
<!-- Now We'll Add Your Accordians -->
<div class="container-fluid">
<div id="Accordian_Container" class="container">
<br><br>
<!-- This is the title of the page, Appears before accordian collapsible panel-->
<h2 id="PageTitle"><strong>Cabins</strong></h2>
<!--General Description of Cabins (or subtitle)-->
<p>Get away from it all at our spacious cedar cabins. All of our cabins can sleep up to six people all on one level. We have special suites available for large groups. Our cabins come fully furnished for your comfort and convenience. Our cabins are
well suited for weekend getaways, family vacations, family reunions, fishing trips, or company outings.</p>
<!--Specifing the type of collapsible/panel-->
<div class="panel-group" id="accordion">
<!--Beginning code for Collapsible Section 1 (Lakeside Cabin)-->
<div class="panel panel-default">
<!-- Adding stylization here affects the panel contents-->
<div class="panel-heading">
<h4 class="panel-title">
<!--Assigns relevent information to section header, including the collapse action and header name-->
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><span class="glyphicon glyphicon-chevron-right"></span>Lakeside Family Cabin</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<!--Body of collapsible panel 1-->
<!-- Description of Lakeside Family Cabin -->
Lakeside Family Cabins are designed to sleep a maximum of 6 people comfortably all on one level. They are situated along our 7 acre private fishing lake. You can fish, play and cook out just feet from the water.
<br>
<br>
<br>
<!--Video Tour Header-->
Tour a typical Lakeside Family Cabin:
<br>
<!-- Google Drive Embedded Video-->
<div class="embed-responsive embed-responsive-16by9"><iframe src="https://drive.google.com/file/d/1G8LY_ZfvVgFtW0UlvP-bnAaAXGPYTxsQ/preview" width="640" height="480"></iframe>
</div>
<br>
<br>
<br>
<!--Reservations Header-->
Book your Lakeside Family Cabin now using our online reservastion system or give us a call at (573)-565-4342!
<br>
<br>
<!--Webreserve Calendar-->
<div class="embed-responsive embed-responsive-16by9"><iframe id="bookingcalendar" src="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css" style="width: 100%; max-width: 800px; height: 1200px; border: 0; padding: 0; margin: 0;"
frameborder="0">Make Reservation</iframe>
</div>
<!--End of Collapisble Section 1-->
</div>
</div>
</div>
<!--Beginning code for Collapsible Section 2(3 Room Cabin)-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><span class="glyphicon glyphicon-chevron-right"></span>Three Room Lakeside Cabin</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<!--Description of Three Room Lakeside Cabin-->
3 Room Family Cabins have 2 private bedrooms and can sleep up to 6 comfortably.They are situated along our 7 acre private fishing lake. You can fish, play and cook out just feet from the water.
<br>
<br>
<br>
<!--Video Tour Header-->
Tour a typical Three Room Lakeside Family Cabin:
<br>
<!-- Google Drive Embedded Video-->
<div class="embed-responsive embed-responsive-16by9"><iframe src="https://drive.google.com/file/d/1YzFGqScrcmS88pj_DVBOjNAIOpVFszY1/preview" width="640" height="480"></iframe>
</div>
<br>
<br>
<br>
<!--Reservations Header-->
Book your Three Room Lakeside Family Cabin now using our online reservastion system or give us a call at (573)-565-4342!
<br>
<br>
<!--Webreserve Calendar-->
<div class="embed-responsive embed-responsive-16by9"><iframe id="bookingcalendar" src="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css" style="width: 100%; max-width: 800px; height: 1200px; border: 0; padding: 0; margin: 0;"
frameborder="0">Make Reservation</iframe>
</div>
<!--End of Collapsible Section 2-->
</div>
</div>
</div>
<!--Beginning code for Collapsible Section 3 (Poolside Cabins)-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><span class="glyphicon glyphicon-chevron-right"></span>Poolside Family Cabin</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<!--Description of Poolside Family Cabin-->
Poolside Family Cabins sleep up to 6 guests, feature full spacious kitchens and are next to our indoor pool.
<!--Video Tour Header-->
Tour a typical Poolside Family Cabin:
<br>
<!-- Google Drive Embedded Video-->
<div class="embed-responsive embed-responsive-16by9"><iframe src="https://drive.google.com/file/d/1-ImuBKm38NH528tVdYRr2JaYbxqIKylo/preview" width="640" height="480"></iframe>
</div>
<br>
<br>
<br>
<!--Reservations Header-->
Book your Poolside Family Cabin today using our online reservastion system or give us a call at (573)-565-4342!
<br>
<br>
<!--Webreserve Calendar-->
<div class="embed-responsive embed-responsive-16by9"><iframe id="bookingcalendar" src="https://secure.webreserv.com/services/bookingcalendar.do?businessid=cannondamoperationsincmo&embedded=y&search=0&avgrid=y&css=/assets/css/bookingcalendar-2.0/theme-grey-red.css" style="width: 100%; max-width: 800px; height: 1200px; border: 0; padding: 0; margin: 0;"
frameborder="0">Make Reservation</iframe>
</div>
<!--End of Collapsible Section 3-->
</div>
</div>
</div>
<!--Beginning code for Collapsible Section 4 (Motel Rooms)-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4"><span class="glyphicon glyphicon-chevron-right"></span>Motel Room</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<!--Description of Motel Room-->
Motel Rooms contain 2 queen beds and can accommodate up to 4 guests. Motel rooms do contain a small refrigerator, microwave and coffee maker. Rooms have access to all amenities, including BBQ facilities, indoor pool and private lake.
<!--Motel Room Slideshow in place of video-->
<div class="container">
<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">
<!--Picture 1-->
<div class="item active">
<img src="https://drive.google.com/uc?export=view&id=1tc8T5RQiDgXYcwF15q1Chb69gU-69fUN" alt="Motel 1" style="width:100%;">
</div>
<!--Picture 2-->
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=105lHyZjyFc9pxQ_Mztjj0BFJ9ezTH2KK" alt="Playground and Poolside Cabins" style="width:100%;">
</div>
<!--Picture 3-->
<div class="item">
<img src="https://drive.google.com/uc?export=view&id=1u9XT6N5tuowChdtl7kxCG095Q4sqA7Jy" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<!--Left Control-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<!--Right control-->
<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>
</div>
</div>
</div>
<!--End of Collapsible Section 4-->
</div>
<!--End of Accordian-->
<script>
//When opening panel remove chevron-right, add chevron down
$('#accordion .panel-collapse').on('shown.bs.collapse', function() {
$(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
});
//When closing panel remove chevron-down, add chevron right
$('#accordion .panel-collapse').on('hidden.bs.collapse', function() {
$(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
});
</script>
</div>
<!--End of of accordians container-->
</div>
</body>
</html>
NOTE: I also enclosed your iframes in responsive divs to keep them from overflowing your content area.
I am fairly new to bootstrap and I am trying to figure out some code for a test website. I have ran into an issue with bootstrap, I setup a element and put 2 elements into it. On the left is a paragraph (which I plan on changing to a larger element later), and on the right is an image (I don't think the dimensions matter). I noticed that the row element was not taking up full width of the screen and figured this was because of the elements it was inside of. I went into my CSS file to troubleshoot, set the row class' width to 100%, and went back to my site and opened up Chrome's dev tools. I noticed that the container div had a right and left margin on both sides which caused the row div to take up less space and center itself within the element of the container. I set both the left and right values for margin to 0px and went back to the site. The left margin had disappeared and although Chrome's inspect was showing there was no right margin either, it still appeared when I hovered over the container element. I don't think it is a specificity error as the left margin disappeared but not the right. I'm truly stumped. As I mentioned, I'm fairly new to Bootstrap so the issue may be in plain sight. I checked to make sure I typed all of my syntax correctly for margin right and it looked normal to me. The code I'm showing you, however, is without the modifications I made to the container and the row. The code I'm showing you is normal (apart from the container being centered).
If there are some odd spacing issues, I apologize. I manually spaced 4 times for each line of code so if there are 4 spaces where there shouldn't be, my apologies.
.header .jumbotron {
color: #fff;
background-color: #a1ff7c;
font-family: Roboto Condensed;
margin-bottom: 0px;
}
.navbar-default {
background-color: #78c45a;
border: 0px;
font-family: Roboto Condensed;
}
.gallery .container {
font-family: Roboto Condensed;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar- nav > .active > a:focus {
color: white;
/*BACKGROUND color for active*/
background-color: #78c45a;
}
.navbar-default .navbar-nav > .active > a:hover {
background-color: #5a9344;
color: #fff;
}
.navbar-default .navbar-nav > li > a {
color: #fff;
}
.navbar-default .navbar-nav > li > a:hover {
color: #fff;
background-color: #5a9344;
}
.navbar-default .navbar-brand {
color: #fff;
}
.navbar-default .navbar-brand:hover {
background-color: #5a9344;
color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-toggle {
border: 0px;
}
.navbar-default .navbar-toggle:hover {
background-color: #5a9344;
;
}
p {
font-family: Roboto Condensed;
}
<html lang="en">
<head>
<title>Hope's Seed</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" h ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css? family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="hopesseed.html">Hope's Seed</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Sponsors
</li>
<li>Donate
</li>
<li>Services
</li>
<li>More
</li>
</ul>
</div>
</div>
</nav>
<div class="Intro">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>Enriching the lives of children who are medically fragile and terminally ill.</p>
</div>
<div class="col-sm-3">
<img src="Images/image1.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="gallery">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Family Support</h3>
<p>Hope's Seed is here to support you.</p>
</div>
<div class="col-sm-4">
<h3>Volunteer Opportunities</h3>
<p>Hope's Seed has many ways to volunteer.</p>
</div>
<div class="col-sm-4">
<h3>Giving Opportunities</h3>
<p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Try use 'container-fluid'
<title>Hope's Seed</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<body>
<div class = "header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="hopesseed.html">Hope's Seed</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>About</li>
<li>Sponsors</li>
<li>Donate</li>
<li>Services</li>
<li>More</li>
</ul>
</div>
</div>
</nav>
<div class="Intro">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Enriching the lives of children who are medically fragile and terminally ill.</p>
</div>
<div class="col-sm-3">
<img src="Images/image1.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class = "gallery">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h3>Family Support</h3>
<p>Hope's Seed is here to support you.</p>
</div>
<div class="col-sm-4">
<h3>Volunteer Opportunities</h3>
<p>Hope's Seed has many ways to volunteer.</p>
</div>
<div class="col-sm-4">
<h3>Giving Opportunities</h3>
<p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Live demo - https://jsfiddle.net/f39wurmn/1/
Hope this helps
set margin:0 for body in css. Some browsers has a default margin
body
{
margin:0;
}
Layout - Line up 3 images in bootstrap grid. .col-sm-3 doesn't help. What am I doing wrong? How to achieve that? I was thinking bootstrap grid makes it perfectly one next to each other with column width. Please help!
.navbar {
min-height: 80px;
margin-bottom: 0;
}
#btnnavbar {
margin-top: 20px;
}
#btnhome {
margin-top: 16px;
}
#imgbrand {
margin-top: -70px;
margin-left: px;
height: 220px;
width: 280px;
}
#firstpage {
margin-top: 90px;
}
#parallax {
/* The image used */
padding-top: 200px;
margin-top: 80px;
background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478121019/Death_to_stock_photography_Vibrant_7_of_10_s50rcs.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.about {
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.lead {
font-family: 'Lato', sans-serif;
}
#portfolio {
height: 500px;
padding-top: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container-fluid">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand " href="http://codepen.io/ekilja01"><img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</nav>
<section id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1 class="about">WEB DEVELOPER</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section id="portfolio">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1>My skillset</h1>
<p class="lead"></p>
<div class="row">
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html">
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css" />
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript" />
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
.navbar {
min-height: 80px;
margin-bottom: 0;
}
#btnnavbar {
margin-top: 20px;
}
#btnhome {
margin-top: 16px;
}
#imgbrand {
margin-top: -70px;
margin-left: px;
height: 220px;
width: 280px;
}
#firstpage {
margin-top: 90px;
}
#parallax {
/* The image used */
padding-top: 200px;
margin-top: 80px;
background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478121019/Death_to_stock_photography_Vibrant_7_of_10_s50rcs.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.about {
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.lead {
font-family: 'Lato', sans-serif;
}
#portfolio {
height: 500px;
padding-top: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container-fluid">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand " href="http://codepen.io/ekilja01"><img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</nav>
<section id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1 class="about">WEB DEVELOPER</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section id="portfolio">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1>My skillset</h1>
<p class="lead"></p>
<div class="row">
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html">
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css" />
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript" />
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery" />
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
this should work
I am trying to apply background image to cover whole page. Could someone tell me what I did wrong? My background image does not cover the entire page. Here is the page:
http://codepen.io/aitruong/pen/mVmKYR
.my-photo{
margin-top: 20px;
}
p{
padding-top: 40px;
}
hr{
width: 200px;
}
.navbar{
margin-left:128px;
margin-right: 128px;
}
.social-icon{
margin-left:350px;
margin-top:40px;
}
.text{
margin-left: 365px;
margin-top: 50px;
font-size: 40px;
font-family:Tangerine;
}
#language-text{
font-family:Tangerine;
font-size: 35px;
margin-left: 300px;
padding-top: 0px;
}
i{
color: #e67200;
}
#android-app {
margin-left : 90px;
}
footer p,a{
margin-left: 0px;
color:#666600
}
#background{
}
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container--fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-user"> </i> About</li>
<li><i class="fa fa-pencil-square-o"> </i> Portfolio</li>
<li><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
<div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10"><p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p></div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3><br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div><br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/>
</div>
</div>
</div>
</div>
</body>
you probably need this in addition to your existing CSS:
body { background-size: cover; }
There are two mistakes in your code:
body { background-size: cover; }
Is missing. But in addition you will need to put your section3 element inside of the background div. Otherwise the background will stop right before section 3
</div><!-- This is your end of <div id="background"> -->
<div id="section3"> <!-- this is a new section outside of the background element -->
Try applying this:
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: intial;
}
Set your background like this
background: #ffffff url(bg.jpg) repeat;
for example for the body, set your css
body { background: #ffffff url(your_bg.jpg) repeat; }
The structure of the HTML document is also invalid. Use the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Ai Truong Personal's Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#css").load(function(evt){
$(this).fadeIn();
});
$("#html").load(function(evt){
$(this).fadeIn("slow");
});
$("#js").load(function(evt){
$(this).fadeIn(5000);
});
$("#python").load(function(evt){
$(this).fadeIn(4000);
});
$("#java").load(function(evt){
$(this).fadeIn(2000);
});
});
</script>
<style>
body {
position: relative;
font-family: Open Sans;
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #6a5750;}
#section2 {padding-top:0px;height:500px;color: #fff; background-color: #f6f1ed;}
#section3 {padding-top:0px;height:300px;color: #fff; background-color: #b5a397;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container--fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-user"> </i> About</li>
<li><i class="fa fa-pencil-square-o"> </i> Portfolio</li>
<li><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10">
<p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p>
</div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3>
<br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div>
<br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p > Theme Made By Ai Truong © 2016</p>
</footer>
</body>
</html>
Replace your following CSS:
#background{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
}
With:
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
Tryed with:
#ImageBackground {
background-size: cover;
Width: 100%;
Height: auto;
}
Else you can try with:
#ImageBackground {
Width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}