My Bootstrap Carousel is not advancing, nor running automatically - html

I have a Bootstrap Carousel that is not working and I have searched other Bootstrap carousel threads and can't seem to find an answer. Usually the answer to most of the questions on here is that the jQuery library either isn't linked correctly, or isn't linked at all and I think mine is.
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<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.5/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<header>
<nav class ="navbar navbar-default" role = "navigation">
<div class= "container">
<div class = "navbar-header">
<a class = "navbar-brand" href="#featured"> <span class="subhead">Wisdom Pet Medicine</span></a>
</div>
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Mission</li>
<li>Services</li>
<li>Staff</li>
<li>Testimonials</li>
</ul>
</div>
</nav> <!--main nav-->
<div class= "carousel slide" data-ride= "carousel" id = "featured">
<div class="carousel-inner">
<div class="item active"><img src= "img/carousel-lifestyle.jpg" alt="lifestyle"></img></div>
<div class="item"><img src= "img/carousel-exoticanimals.jpg" alt="animals"></img></div>
<div class="item"><img src= "img/carousel-fish.jpg" alt="fish"></img></div>
<div class="item"><img src= "img/carousel-mission.jpg" alt="mission"></img></div>
<div class="item"><img src= "img/carousel-stateoftheart.jpg" alt="motto"></img></div>
<div class="item"><img src= "img/carousel-vaccinations.jpg" alt="vaccine"></img></div>
</div> <!-- Wrapper for slides -->
<a class ="left carousel-control" href= "#featured" role = "button" data-slide ="prev"><span class= "glyphicon glyphicon-chevron-left"></span></a>
<a class ="right carousel-control" href= "#featured" role = "button" data-slide ="next"><span class= "glyphicon glyphicon-chevron-right"></span></a>
</div>
</div><!-- carousel-->
</div>
</header>
<script src ="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</body>
</html>
I have some CSS as well, it may not be related, but i'll include it anyways:
body {
font-size: 1.5em;
font-weight:200;
}
.navbar {
border-radius: none;
}
.navbar-nav {
padding-right: 20px;
}
.navbar-header>a {
font-size:1.2em;
font-weight:150;
color: black !important;
}
.navbar-nav>li>a:hover, .navbar-nav>li>a:focus {
transition: all 0.5s ease 0s;
color: green !important;
}
.carousel {
position:relative;
top:-20px;
}


You need to use a different version of jQuery (you're using v1.8.3) starting at a minimum of version v1.9.1.
I would suggest checking out one of these if using a CDN.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
or
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
or
CDNjs

Related

Add and Position Images in Navbar

I have to move my ESPN to most left on the Navbar and I need to add a scan icon in Navbar like this image. I am drawing the same picture but I won't be able to add the scan icon and add 3 bars right after the programming tab. I am designing the same picture in HTML but I can't get rid of these 2 to 3 things. Any help is really appreciated.
following this image
This is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/responsee.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<link rel="stylesheet" href="css/template-style.css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
</head>
<body class="size-1140">
<header role="banner" class="position-absolute">
<nav class="background-transparent background-transparent-hightlight full-width sticky">
<div class="s-20 l-2">
<a href="index.html" class="logo">
</a>
</div>
<div class="top-nav s-20 l-20">
<p class="nav-text"></p>
<ul class="right chevron">
<a style="text-align:right;">ESPN</a>
<li><a style="text-align:right;">HOME</a></li>
<li><a style="text-align:right;">SCHEDULE</a></li>
<li><a>PROGRAMMING</a>
<ul>
</ul>
</li>
<li><a >ABOUT</a></li>
<li><a >NEWS</a></li>
<li><a >CONTACT</a></li>
<li><a>SELECTLANGUAGE</a>
<ul>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN -->
<main role="main">
<!-- Main Header -->
<header>
<div class="carousel-default owl-carousel carousel-main carousel-nav-white background-dark text-center">
<div class="item">
<div class="s-12">
<img src="img/header.jpg" alt="">
<div class="carousel-content">
<div class="content-center-vertical line">
<div class="margin-top-bottom-80">
<!-- Title -->
<h1 class="text-white margin-bottom-30 text-size-60 text-m-size-30 text-line-height-1">ESPN SPORTS<br> PROGRAMMING</h1>
<div class="s-12 m-10 l-8 center"><p class="text-white text-size-14 margin-bottom-40">Welcome to ESPN's catalog of sports content available for broadcast worldwide.<br> Every year we distribute more than 6000 hours of live events, highlight series, <br> studio and scripted media to broadcasters across the globs.</p></div>
<div class="line">
<div class="s-10 m-10 l-3 center">
<a class="button button-white-stroke s-6" style="background-color:red;" href="/">+CONTACT US</a>
<a class="button button-white-stroke s-6" style="background-color:black;" href="/">WATCH DEMO</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<script type="text/javascript" src="js/responsee.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/template-scripts.js"></script>
</body>
</html>
my result

I think you are broken down into the wrong part. The logo and nav sections that need to be separated are easier to adjust.
nav {
display: flex;
align-items: center;
justify-content: space-around;
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
flex: 2;
}
p img {
width: 100px;
}
p {
flex: 1;
}
<nav>
<p><img src="https://cdn.iconscout.com/icon/free/png-256/espn-282356.png"></p>
<ul>
<li>HOME</li>
<li>SCHEDULE</li>
<li>PROGRAMMING</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>CONTACT</li>
<li>SELECTLANGUAGE</li>
</ul>
</nav>

You can do this:
put this in head
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
put this where you want your icon to appear
<a><i class="material-icons">menu</i></a>

Bootstrap 3 images alignment issues

Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? the first is in one row, then the second and third overlap each other. I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. Also, is there a bootstrap code where the image adjusts to the row? thank you for reading.
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/
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>Homepage</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}

Okay! I just solve your problem by doing just 3 steps:
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block.
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
Step 2: remove a redundant </div> tag of the <div class="container"> block
Step 3: change the css class, make width: 100%, this step will solve the image overlap:
.bhw_link {
width: 100%;
height: 300px;
}

You missed closing div <div class="box"> and change css of
.bhw_link {
width: 100%;
height: auto;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 100%;
height: auto;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>

It's just because you ommitted the closing tag
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap

How to horizontally line up two .rows with CSS / Bootstrap gridsystem?

I am trying to recreate this website using my own styles & Bootstrap.
I cannot figure out how to align these two elements horizontally.
I want a grid for the nav bar on the left to be size 3 and the rest of the page on the right to be 9, and I have that, but when I go to add the video, it just stacks vertically and not horizontally.
ul {
list-style: none;
}
.nav-left-bar {
text-transform: uppercase;
font-size: 9px;
font-family: Arial;
}
#search-but {
list-style: none;
border-bottom: 1px solid #000;
width: 18%;
padding-bottom: 1%;
margin: 5% 0 10% 0;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #000;
}
a:hover {
}
#search-but:hover {
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding-right: 50%;
}
video {
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
float: right;
}
.vid-marg {
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>YSL</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<div class="nav-left-bar">
<div class="row">
<div class="col col-md-3">
<img src="ysllogo.jpg">
<ul>
<li>winter 17 collection</li>
</ul>
<ul>
<li>la maison</li>
<li>saint laurent collections</li>
<li>saint laurent store locator</li>
</ul>
<ul>
<li>shop women</li>
<li>shop men</li>
<li>sunglasses collection</li>
</ul>
<ul>
<li id="search-but">search</li>
</ul>
<ul>
<li id="bag-items">bag</li>
</ul>
<div class="bottom-navi-bar">
<ul>
<li>log in / register</li>
<li>newsletter</li>
<li>customer care</li>
<li>shipping to: us</li>
<li>legal notices</li>
<li>follow us</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-md-9">
<video src="https://md.yoox.biz/618203721001/201707/263/618203721001_5506271544001_5506259873001.mp4" autoplay=""></video>
</div>
</div>
</div>
<script
src="http://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

You have them in two different row divs, so therefor they show up in two different rows. Try changing your HTML to something like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Purrfect Match</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<div class="nav-left-bar">
<div class="row">
<div class="col col-lg-3">
<img src="ysllogo.jpg">
<ul>
<li>winter 17 collection</li>
</ul>
<ul>
<li>la maison</li>
<li>saint laurent collections</li>
<li>saint laurent store locator</li>
</ul>
<ul>
<li>shop women</li>
<li>shop men</li>
<li>sunglasses collection</li>
</ul>
<ul>
<li id="search-but">search</li>
</ul>
<ul>
<li id="bag-items">bag</li>
</ul>
<div class="bottom-navi-bar">
<ul>
<li>log in / register</li>
<li>newsletter</li>
<li>customer care</li>
<li>shipping to: us</li>
<li>legal notices</li>
<li>follow us</li>
</ul>
</div>
</div>
<div class="col col-lg-9">
<video src="https://md.yoox.biz/618203721001/201707/263/618203721001_5506271544001_5506259873001.mp4" autoplay=""></video>
</div>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script
src="http://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- SCRIPTS -->
</body>
</html>

You have to use the Bootstrap cols inside a row. For example if you want to divide in 3 columns you have to use:
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Now, in your site you want to divide a row with 2 columns, 3 and 9, so you have to do it like this:
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
I recommend to you to avoid "col-lg" if is not for a very good reason, col-md just work really well in large screens and also in medium screens!
I give you the codepen with your question solved:
https://codepen.io/Kristain/pen/GEVYyb
Good luck with the site!

Keep content inside div when zooming in and out on a browser

When i zoom in and out on my website, the navigation bar and my "Open Touch" text seems to go out of the div and float down and for my navigation bar, it seems to disappear word by word when i zoom in. I've been trying to fix this for the past 2days and researching on this website and nothing seems to work.
My code and codepen will be available as well
How can I keep the "Open Touch" Text from overlapping the navigation bar?
Demo: http://codepen.io/anon/pen/xqLLeJ
html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
<body>
<!-- Section for Jobs Popup -->
<div id="job-popup">
<div class="x-div"><img class="x-icon1" id="fadeX" src="web%20x%20icon%20white.png"></div>
<div id="job-content">
<h1 id="jobWords">Test</h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords">Test</h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords">Test</h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords">Test</h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords">Test</h1>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
</head>
</html>
Any help is appreciated,
Thank You

Take out overflow: hidden from
#nav-menu {
width: 50%;
height: 70%;
position: absolute;
z-index: 101;
word-wrap: break-word;
/* overflow: hidden; */
left: 15%;
top: 20%;
}

Bootstrap 3 Navbar with Icons & Carousel

I am working on creating a site with bootstrap3. Unfortunately, even after watching many videos I am still having problems.
I would like the logo on my navbar to remain on the left side (which I have) and other additional icons that will be links to other area of the page to be toward the left - unfortunately I have not figured this out via html/css. Please check out www.frobot.net to see what I am attempting to emulate. Essentially, there are multiple icons next to the text.
I would like a white background for the navbar and for it to have a definitive bottom rather than meshing into the rest of the website, if that makes sense. As of right now, there is not a consistent horizontal white area with the navigation tools.
I set up a carousel for three images and only the first image appears.
Can someone please point out issues in my code?
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title>THE BEST YOGURT</title>
<meta name="description" content="Frozen Yogurt">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container" id="main">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="#Logo">
</a>
</div>
<div class="navbar navbar-custom">
<div class="navbar-header">
<a class="icons" href="icons">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
<img src="img/froyo.png" alt="Froyo"<li>FROYO</li>
<img src="img/story.png" alt="Bots"<li>BOTS</li>
<img src="img/team.png" alt="Press"<li>PRESS</li>
<img src="img/talk.png" alt="Team"<li>TEAM</li>
<img src="img/contact.png" alt="Contact"<li>CONTACT</li>
</div>
</nav><!--End Nav Bar -->
</div>
<!-- Carousel Begins -->
<div class="carousel-slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="slide1">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
<div class="item" id="slide2">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
<div class="item" id="slide3">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
</div><!-- carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
</div><!-- end myCarousel -->
<div class="row" id="FroYo">
<img src="img/contact-para-bg.png" alt="Bots"
</body>
</html>
CSS:
/* --------------------------------------
Layout
-------------------------------------- */
.nav-bar {
position:fixed;
top:0;
background-color:white;
padding-top:30px;
padding-left:100px;
}
.navbar-brand {
padding: 13px 15px;
background-color:white;
}
.icons {
margin:0;
padding-top: 25px;
padding-right: 200px;
padding-left:100px;
background-color:white;
}
.icons a{
font-family: 'Titillium Web', sans-serif;
text-decoration: none;
float: left;
display: block;
padding: 20px 15px;
color:gray;
background-color:white;
}
.icons a:hover{
color:purple;
}
* --------------------------------------
Carousel
-------------------------------------- */
#myCarousel {
margin-top: 300px;
background-color:gray;
}
.carousel-caption {
font-size: 24px;
}
.carousel-caption h4 {
font-size: 32px;
}
#myCarousel .item { height: 700px; }
#slide1 {
background: url('../img/best-slide.png') top center no-repeat;
}
#slide2 {
background: url('../img/good.png') top center no-repeat;
}
#slide3 {
background: url('../img/slide3.png') top center no-repeat;
}

you can throw a bottom border on the navbar and modify the css of the border to make the space between the navbar and the rest of your page. You also forgot the data-ride="carousel" in the div tag for the carousel.