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
Related
Does anyone know how I can do this on my own site? (vuejs)
https://cdn.larkx.xyz/kv2bos6i.gif or https://sparkedhost.com
I am going to put Vuejs aside because this effect can be achieved with CSS only.
You can give a look at the source code of sparkedhost.com for a better understanding of how they implemented this effect, and here is an example of such effect without any embellishment:
.container {
width: 200px;
height: 200px;
background: lightgrey;
overflow: hidden;
}
.content {
width: 150px;
height: 80px;
background: red;
margin: 20px auto;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.scrolling {
position: relative;
animation-duration: 8s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes slidein {
from {
top: 0;
}
to {
top: -500px;
}
}
<div class="container">
<div class="scrolling">
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
<!-- The same block of divs is repeated -->
<div class="content" style="background-color: yellow;">#1</div>
<div class="content" style="background-color: gray;">#2</div>
<div class="content" style="background-color: blue;">#3</div>
<div class="content" style="background-color: orange;">#4</div>
<div class="content" style="background-color: green;">#5</div>
</div>
</div>
I'm developing a website where I have to put a bootstrap carousel and different texts over this carousel (absolute element).
Once I put the carousel on the website, all the texts become blurry and difficult to read.
I've read the could a problem between z-index of the text and z-index of the carousel but I'm not getting how I can solve it because I have to keep this text over the carousel.
Here the image of what I'm developing:
Here my code:
HTML
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 top-header-container">
<ul>
<li>UK 33333</li>
<li>IRELAND 333333</li>
<li>CANADA 333333</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 background-img-slide" style="z-index: -10px;">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
<div class="carousel-item">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
<div class="carousel-item">
<img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/image-home-main.jpg" alt="" width="100%" height="800">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<div class="logo-wrap">
<div class="logo-container">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>"><img class="logo-img" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/deane-logo.png"></a>
</div>
</div>
<nav class="main_menu_container">
<ul class="main_menu_class">
<li>About us</li>
<li>Services</li>
<li>Projects</li>
<li>Policies</li>
<li>Contact us</li>
</ul>
</nav>
<div class="slide-title-blue-wrap">
<div class="slide-title-blue-container">
<span class="slide-title-blue">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
<div class="slide-title-red-wrap">
<div class="slide-title-red-container">
<span class="slide-title-red">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
<div class="slide-title-green-wrap">
<div class="slide-title-green-container">
<span class="slide-title">tefdjsafkljdasfkljkjfdlskalòs</span>
</div>
</div>
</div>
CSS
.top-header-container {
text-align: right;
position: relative;
z-index: 2;
}
.top-header-container > ul {
margin: 0;
padding: 0;
}
.top-header-container > ul > li {
display: inline-block;
list-style: none;
padding: 15px;
font-size: 13px;
}
.main_menu_container {
text-align: right;
position: absolute;
width: 58%;
right: -110px;
top: 55px;
}
.main_menu_container > ul {
margin: 0;
padding: 0;
padding-right: 150px;
background: #76bd21;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.main_menu_container > ul > li {
display: inline-block;
list-style: none;
padding: 15px;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.main_menu_container > ul > li > a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
.main_menu_container > ul > li > a:hover {
text-decoration: none;
}
.logo-wrap {
position: relative;
margin-top: -835px;
margin-left: -35px;
}
.logo-container {
position: absolute;
left: -450px;
background: rgba(255, 255, 255, 0.82);
height: 800px;
width: 50%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
}
.navbar-brand {
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
}
.logo-img {
position: absolute;
left: 110px;
top: 40px;
}
.background-img-slide {
position: relative;
margin-top: -100px;
background-image: url(assets/img/image-home-main.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 850px;
}
.slide-title-blue-wrap {
position: relative;
}
.slide-title-blue-container {
position: absolute;
left: -689px;
top: -7px;
background: rgba(5, 34, 162, 0.85);
height: 700px;
width: 60%;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
z-index: 15;
}
.slide-title-blue {
position: absolute;
top: 70%;
left: 65%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
color: #fff;
}
.slide-title-green-wrap {
position: relative;
}
.slide-title-green-container {
position: absolute;
left: -881px;
top: 835px;
background: rgba(118, 189, 33, 0.85);
height: 800px;
width: 60%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
z-index: 10;
}
.slide-title-red-wrap {
position: relative;
}
.slide-title-red-container {
position: absolute;
left: -410px;
top: 693px;
background: rgba(5, 34, 162, 0.85);
height: 142px;
width: 60%;
transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
z-index: 15;
}
.slide-title-red {
position: absolute;
top: 40%;
left: 50%;
transform: skewX(45deg);
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
color: #fff;
}
Blurry text (with carousel)
Clear text (without carousel)
Here link of my test website:
http://www.matrix-test.com/roofing/
Any Idea to solve this problem?
I've been able to resolve this issue in Bootstrap 4 by setting the backface-visibility attribute of the carousel-item to unset.
Here's the code.
.carousel-item {
-webkit-backface-visibility: unset!important;
backface-visibility: unset!important;
}
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
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 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; }