I want set my carousel in the middle of the page with a white border attached to it. But I'm unable to do it. I used padding but the border is not adjusting with the carousel. If I reduce a little more the padding then the carousel arrows is not shifting with carousel.
Here is my html file code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/prefixfree.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#featured"><h1>Carousel <span class="subhead">Practice</span></h1></a>
</div><!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Mission</li>
<li>Services</li>
<li>Staff</li>
<li>Testimonials</li>
</ul>
</div><!-- collapse navbar-collapse -->
</div><!-- container -->
</nav>
<div class="container wrapping">
<div class="carousel slide" data-ride="carousel" id="featured">
<div class="carousel-inner">
<div class="item active"><img src="images/carousel-lifestyle.jpg" alt="Lifestyle Photo"></div>
<div class="item"><img src="images/carousel-mission.jpg" alt="Mission"></div>
<div class="item"><img src="images/carousel-vaccinations.jpg" alt="Vaccinations"></div>
<div class="item"><img src="images/carousel-fish.jpg" alt="Fish"></div>
<div class="item"><img src="images/carousel-exoticanimals.jpg" alt="Exotic Animals"></div>
</div><!-- carousel-inner -->
<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><!-- featured carousel -->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/myscript.js"></script>
</body>
</html>
This is my css:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800|Roboto+Slab:400,100,300,700);
/** Basic Page CSS **/
body{
font-family: "Roboto Slab", sans-serif;
font-weight: 300;
font-size: 2em;
position: relative;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", sans-serif;
font-weight: 100;
margin: 0;
}
header{
background-color: #00173f;
}
.carousel-inner{
padding: 150px 30px 100px 30px;
border: 15px solid #fff; border-radius: 5px;
}
/** Header Navigation **/
header .navbar {
padding: 30px 0;
transition: all .5s ease-out;
}
header .navbar-default {
background-color: transparent;
border: none;
}
header .navbar-default .navbar-nav a {
color: white;
padding: 5px 8px;
}
header .navbar-default .navbar-nav a:hover {
color: #EEC856;
}
header .navbar-default .navbar-nav .active a {
font-weight: 700;
color: #EEC856;
background: transparent;
border-bottom: 4px solid #EEC856;
text-shadow: none;
}
header .navbar-default .navbar-nav .active a:hover {
color: #E15D5F;
background: transparent;
text-shadow: none;
}
/** Navbar Brand **/
header .navbar-brand {
background: url(../images/wisdompetlogo.svg);
background-repeat: no-repeat;
background-position: 15px 0;
height: auto;
}
header .navbar-brand h1 {
color: white;
margin: 0;
font-size: 1.8em;
font-weight: 400;
padding-left: 105px;
}
header .navbar-brand span.subhead {
display: block;
font-family: "Roboto Slab", serif;
font-size: .6em;
font-weight: 100;
}
/** Navbar Toggle **/
header .navbar-toggle {
background-color: #279182;
}
header .navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
#media only screen
and (max-width: 768px) {
header .navbar-collapse.in {
background-color: rgba(0,0,0, .5);
}
}
This is one of my images link: https://www.google.co.in/search?q=wisdom+pet+medicine&espv=2&biw=1280&bih=614&source=lnms&tbm=isch&sa=X&sqi=2&ved=0ahUKEwiejtTiqs7PAhWBPo8KHXsbDlwQ_AUIBigB&dpr=1.5#imgrc=uU4osiOZHZGu9M%3A
I'm not entirely sure if your problem is the border, the positioning, or both.
You have your carousel wrapped in your header. This might prevent it from being positioned in the middle of your page. If you want it to be in its own section I would put it in a container-fluid div class and add styling as desired.
Related
I am trying to find a way to have a logo above my navbar. For the desktop version of my site, it is not a problem, but opening the page on a mobile device, makes some problems. As soon as the navbar is collapsed, toggling does not move the main content down. So the uncollapsed navbar overlaps some parts of the content.
This is my code:
header[role="banner"] #logo-main {
}
#logo-main {
margin: auto;
position: absolute;
top: 8%;
left: 37.5%;
width: 340px;
height:130px;
}
.headercontainer {
background-image: url('https://images.pexels.com/photos/418147/pexels-photo-418147.jpeg');
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 0;
padding-top: 47.2%; /* (img-height / img-width * container-width) */
/* (827 / 1752 * 100) */
}
#navbar-primary.navbar-default {
position: absolute;
top: 20%;
left: 15%;
padding-top: 100px;
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: inline-block;
float: none;
text-transform: uppercase;
font-family: 'Open Sans';
font-size: 16pt;
font-weight: 400;
letter-spacing: 1.5px;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color:black;
padding-left: 85px;
padding-right: 85px;
}
#navbar-primary.navbar-default .navbar-nav > li > a:hover {
color:black;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a > span {
padding-bottom: 5px;
border-bottom: 2px solid black;
}
.navbar-nav a:hover span {
padding-bottom: 5px;
border-bottom: 2px solid black;
/*background-image: url("../images/blackdot.png");
background-repeat: repeat-x;
background-position: center 100%;*/
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="headercontainer">
<header role="banner">
<img id="logo-main" src="https://cdn3.iconfinder.com/data/icons/black-white-social-media/32/logo_social_media_phone-2-512.png" alt="Spurwandel">
<nav id="navbar-primary" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
<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 class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="noleftpadding">Home</span></li>
<li><span class="noleftpadding">About</span></li>
<li><span class="noleftpadding">Coachings</span></li>
<li class=""><span class="noleftpadding">Kontakt</span></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<span>Main Content</span>
</div>
</div>
</div>
You can find an example here: https://www.bootply.com/jQG65nqmRE
Thanks in advance.
Regards
Lars
I have something in the following css that is causing my fixed navbar to push up when scrolling down untill its almost not visible. This navbar works on all my other pages so I know its something to do with the following css to this page. Attached is the nav bar css and the css that seems to be causing it to not work properly for (1) page... it seems to work fine in browser and Dreamweaver live view but not on any cell phone... The footer seems jacked now too.. its something in between the header and footer ; Also attached is the pages HTML.
live version as you can see the pages I have finished scroll properly except services > roofing page
<!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>Roofing Contractor Springfield IL Surrounding Areas</title>
<meta name="description" content="Licensed Roofing Contractor serving Springfield IL and surrounding areas. Hire a professional and let us exceed your residential roofing needs today!">
<meta name="keywords" content="Roofing Contractor New Roof Repair Licensed Bonded Insured Free Estimates">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container" id="custom-nav">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li class="dropdown">
Services<b class="caret"></b>
<ul class="dropdown-menu">
<li>Roofing</li>
<li>Siding</li>
</ul>
</li>
<li>
Contact
</li>
<li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Gallery</li>
<li>Reviews</li>
<li>Careers</li>
</ul>
</li>
</ul>
<div class="social">
<ul>
<li><i class="fa fa-lg fa-facebook"></i></li>
<li><i class="fa fa-lg fa-twitter"></i></li>
<li><i class="fa fa-lg fa-google-plus"></i></li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container-fluid margin-top">
<div class="row padding-left padding-right">
<h3><span class="glyphicon glyphicon-bullhorn glyphicon-color"></span> Roofing Contractor <br><small>"Get The Free Estimate You Deserve!"</small></h3><hr>
<h4>Need a New Roof or Roof Repairs?<br><small>We are completely Licensed Bonded and Insured for all of your roofing needs!</small></h4>
</div>
<hr>
<div class="row ">
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Shingle Roofing" src="images/shingle-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Shingle Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Shingle Roofing Info Here!
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Rubber Roofing" src="images/flat-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Rubber Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Rubber Roofing Info Here
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 no-padding lib-item" data-category="view">
<div class="lib-panel">
<div class="row box-shadow">
<div class="col-lg-7 col-md-6">
<img class="lib-img-show" alt="New Roof - Metal Roofing" src="images/metal-roofing.jpg">
</div>
<div class="col-md-5">
<div class="lib-row lib-header">
Metal Roofing
<div class="lib-header-seperator"></div>
</div>
<div class="lib-row lib-desc">
Metal Roofing Info Here!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12 call-now">
<h4>“We pride ourselves on being able to provide Safe, Clean, Quality work with competitive rates!”</h4>
Call Now (217) 820-7597
</div>
<footer>
<div class="container-fluid">
<small>Copyright © ZNC Roofing Contractor 2017</small>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-91438053-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Google Maps -->
</body>
</html>
Custom Navbar
.navbar-collapse {border-color: #FFFFFF !important; margin-top: 5px;}
.dropdown-menu > li > a {color : #FFFFFF !important;}
.dropdown-menu > li > a:hover{color : #EF7800 !important;}
.navbar-toggle {background: #192F42; padding-top: 12px;}
.navbar-inverse .navbar-toggle {border-color: #192F42;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background: none;}
#custom-nav { margin-left: 0px; width: 100%;}
.navbar-inverse {background-color: #192F42;}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #192F42}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #192F42}
.dropdown-menu { background-color: #192F42}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #192F42}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none;}
.navbar-inverse { border-color: #192F42}
.navbar-inverse .navbar-brand {height: 50px;width: 142px;background: url(../images/brand.jpg) no-repeat;background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #EF7800}
.dropdown-menu>li>a { color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #EF7800}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #EF7800}
/* Roofing Page */
.lib-panel {
margin-bottom: 20Px;
}
.lib-panel img {
width: 100%;
background-color: transparent;
}
.lib-panel .row,
.lib-panel .col-md-6 {
padding: 0;
background-color: #FFFFFF;
}
.lib-panel .lib-row {
padding: 0 20px 0 20px;
}
.lib-panel .lib-row.lib-header {
background-color: #FFFFFF;
font-size: 20px;
padding: 10px 20px 0 20px;
}
.lib-panel .lib-row.lib-header .lib-header-seperator {
height: 2px;
width: 26px;
background-color: #FFFFFF;
margin: 7px 0 7px 0;
}
.lib-panel .lib-row.lib-desc {
position: relative;
height: 100%;
display: block;
font-size: 13px;
}
.lib-panel .lib-row.lib-desc a{
position: absolute;
width: 100%;
bottom: 10px;
left: 20px;
}
.row-margin-bottom {
margin-bottom: 20px;
}
.box-shadow {
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
box-shadow: 0 0 10px 0 rgba(0,0,0,.10);
}
.no-padding {
padding: 0;
}
Hi Friends i am using bootstrap 3 carousal. I am facing once problem in mobile when the mobile screen is <=4 inch. My slider's caption is hiding half on left side on the smaller screen. please help.
Code:
<div id="kc1" class="carousel " data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators hidden-xs">
<li data-target="#kc1" data-slide-to="0" class="active"></li>
<li data-target="#kc1" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active" id="websites">
<img class="img-responsive" src="img/full-responsive-websites-system-solutions1.jpg";text="Slide+0" alt="Slide 0">
<div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-1 opa1 onee1" style="background-color:#004080;">
<h1 style="font-size:25px;">This is test example and half caption is hiding in left side on mobile device below <=4 inch screen </h1>
<h6>
More
</h6>
</div>
</div>
<div class="item" id="SEO-SEM">
<img class="img-responsive" src="img/seo-sem.jpg";text="Slide+1" alt="Slide 1">
<div class="carousel-caption img-rounded featurette-heading text-center col-md-offset-2" style="background-color:#000;">
<h2> This is test example and half caption is hiding in left side on mobile device below <=4 inch screen</h2>
<h6> More </h6>
</div>
</div>
</div>
<a class="left carousel-control" href="#kc1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#kc1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<style>
<!-- carousel css-->
.btn-clear {
color: #FFF;
border-color: #FFF;
border-width: 2px;
margin-right: 15px;
}
btn-clear:hover {
color: #000;
background-color: #6699CC;
}
#kc1
{
border-radius: 0px 0px 0px 0px; /* slider.css ln-17*/
/* added by kk */
overflow: hidden;
/* added by kk */
margin-top: 1px;
min-height: 300px;
min-width: 100%;
}
#kc1 img {
min-height: 300px;
min-width: 100%;
}
#kc1 > .carousel-indicators > li {
border-radius: 2px;
min-width: 2px;
background-color:#D4FF00;
border: 1px solid black;
margin-right: 1px;;
margin-left: 1px;;
}
#kc1 > .carousel-indicators > .active {
background-color:#2AFF00;
}
#kc1 .carousel-caption {
color: blue;
right: 50%;
text-align: center;
background:#fff;
left: auto;
top:12%;
bottom: initial;
transform: translateY(-50%);
transform:translateX(50%);
color:#FFF;
max-width: 1200px;
}
.item {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-
}
</style>
Here's a jsfiddle for clarification
The caption in a carousel is actually being controlled in the site.css file under this part:
/* Hide/rearrange for smaller screens */
#media screen and (max-width: 767px) {
/* Hide captions */
.carousel-caption {
display: none
}
}
I'm trying to create this navigation menu and something seems to keep screwing up when I add my logo. the header-right keeps moving down. I have tried different things but none seem to work. Maybe you can see my mistake.
Here is my JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
background-color: #ccc;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
.header {
background: -webkit-linear-gradient(#25292C, #1E2224);
background: -o-linear-gradient(#25292C, #1E2224);
background: -moz-linear-gradient(#25292C, #1E2224);
background: linear-gradient(#25292C, #1E2224);
height: 100px;
width: 100%;
position: relative;
z-index: 1;
overflow: hidden;
}
.header-cover {
width: 780px;
height: 100px;
margin: auto;
}
.header-left {
width: 240px;
float: left;
height: 100px;
}
.header-right {
width: 240px;
float: right;
height: 100px;
}
.bar {
width: 120px;
height: 100px;
float: left;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.logo {
height: 50px;
width: 50px;
margin: auto;
}
.logo img {
padding-top: 15px;
display: block;
margin: auto;
position: relative;
z-index: -1;
}
.top {
height: 0px;
width: 120px;
background-color: #535557;
position: relative;
z-index: 1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.text {
font-family: roboto;
font-size: 21px;
color: #fff;
text-align: center;
margin-top: 35px;
letter-spacing: 1px;
position: relative;
z-index: 10;
}
.bar:hover .top {
padding-bottom: 20px;
}
.bar:hover .text {
color: #fff;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Website NabBar Template</title>
<link rel="stylesheet" type="text/css" href="css/navbar.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="header">
<div class="header-cover">
<div class="header-left">
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">HOME</div>
</div>
</a>
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">SHOP</div>
</div>
</a>
</div>
<div class="logo">
<img src="http://i.imgur.com/Gghu413.png"/>
</div>
<div class="header-right">
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">STAFF</div>
</div>
</a>
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">FORUMS</div>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
It is because you are using the CSS property display: block, while the header-cover div is using display: relative. Combined with the float: left and float-right of each of your header elements, in the order you displayed, the logo height is pushing down the div containing the .header-right
Try organizing your header like this:
<div class="header-cover">
<div class="header-left">
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">HOME</div>
</div>
</a>
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">SHOP</div>
</div>
</a>
</div>
<div class="header-right">
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">STAFF</div>
</div>
</a>
<a href="#">
<div class="bar">
<div class="top"></div>
<div class="text">FORUMS</div>
</div>
</a>
</div>
<div class="logo">
<img src="http://i.imgur.com/Gghu413.png"/>
</div>
</div>
That way your logo with margins: auto gets rendered after your left and right header sections.
New Fiddle
I followed this http://codepen.io/redfrost/pen/dbrgk codepen working gallery snippet to the tee . Everything works as far as functionality but there is a background coming from a bootstrap class that makes the gallery wider than expected. The arrows according to the snippet should be contained within the image div itself.
I have deleted both style sheets just to see if the background would go away and it did not. It is a bootstrap class issue.
Here is the image of the issue http://postimg.org/image/mmdbsl6sp/full/
I think the class causing the issue is class="carousel-inner"
Here is the markup I have for the gallery:
#extends('layouts.main')
#section('content')
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 1</h3>
</div>
<div class="span8"><p>Picture 1 details</p>
</div>
</div>
</div><!-- /Slide1 -->
<div class="item">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 2</h3>
</div>
<div class="span8"><p>Picture 2 details</p>
</div>
</div>
</div><!-- /Slide2 -->
<div class="item">
<div class="bannerImage">
<img src="http://placehold.it/960x405" alt="">
</div>
<div class="caption row-fluid">
<div class="span4"><h3>Picture 3</h3>
</div>
<div class="span8"><p>Picture 3 details</p>
</div>
</div>
</div><!-- /Slide2 -->
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
<a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</div><!-- /.span12 -->
</div><!-- /.row -->
</div><!-- /.container -->
#stop
Here is the css:
div { word-break: break-all; }
img {
max-width:100%;
display: block;
margin-left: auto;
margin-right: auto;
}
a {
-webkit-transition: all 150ms ease;
-moz-transition: all 150ms ease;
-ms-transition: all 150ms ease;
-o-transition: all 150ms ease;
transition: all 150ms ease;
}
a:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE7 */
text-decoration: none;
}
/* Container */
/* Page Header */
.page-header {
background: #fbf4e0;
margin: -30px 0px 0px;
padding: 20px 40px;
border-top: 4px solid #ccc;
color: #a83b3b;
text-transform: uppercase;
}
.page-header h3 {
line-height: 0.88rem;
color: #a83b3b;
}
/* Thumbnail Box */
.caption {
height: 140px;
width: 100%;
margin: 20px 0px;
padding: 20px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.caption .span4, .caption .span8 {
padding: 0px 20px;
}
.caption .span4 {
border-right: 1px dotted #CCCCCC;
}
.caption h3 {
color: #a83b3b;
line-height: 2rem;
margin: 0 0 20px;
text-transform: uppercase;
}
.caption p {
font-size: 1rem;
line-height: 1.6rem;
color: #a83b3b;
}
.btn.btn-mini {
background: #a83b3b;
border-radius: 0 0 0 0;
color: #fbf4e0;
font-size: 0.63rem;
text-shadow: none !important;
}
.carousel-control {
top: 33%;
zoom: 7;
color: #ff3333;
}
/* Footer */
.footer {
margin: auto;
width: 100%;
max-width: 960px;
display: block;
font-size: 0.69rem;
}
.footer, .footer a {
color: #fff;
}
p.right {
float: right;
}
body:after{content:"less than 320px";font-size:1rem;font-weight:bold;position:fixed;bottom:0;width:100%;text-align:center;background-color:hsla(1,60%,40%,0.7);color:#fff;height:20px;padding-top:0;margin-left:0;left:0}#media only screen and (min-width:320px){body:after{content:"320 to 480px";background-color:hsla(90,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:480px){body:after{content:"480 to 768px";background-color:hsla(180,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:768px){body:after{content:"768 to 980px";background-color:hsla(270,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:980px){body:after{content:"980 to 1024px";background-color:hsla(300,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}#media only screen and (min-width:1024px){body:after{content:"1024 and up";background-color:hsla(360,60%,40%,0.7);height:20px;padding-top:0;margin-left:0}}
::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
::-moz-selection { background: #ff5e99; color: #FFFFFF; }
a, a:focus, a:active, a:hover, object, embed { outline: none; }
:-moz-any-link:focus { outline: none; }
input::-moz-focus-inner { border: 0; }