I am trying to use this progress step wizard and it works fine but when i try to add the bootstrap css everything messes up and i dont know what is what is wrong.
Here is a js fiddle
https://jsfiddle.net/gy2gqns1/
.step-wizard {
display: inline-block;
position: relative;
width: 100%;
}
.step-wizard .swprogress {
position: absolute;
top: 43px;
left: 12.5%;
width: 75%;
}
.step-wizard .swprogressbar {
position: absolute;
background-color: #0aa89e;
opacity: 0.4;
height: 12px;
border: 1px solid e5e6e6;
width: 0%;
-webkit-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.step-wizard .swprogressbar.swempty {
opacity: 1;
width: 100%;
background-color: #e5e6e6;
}
.step-wizard ul {
position: absolute;
width: 100%;
list-style-type: none;
padding: 0;
left: -2%;
}
.step-wizard li {
display: inline-block;
text-align: center;
width: 24.7%;
}
.step-wizard li .swstep {
position: absolute;
display: inline-block;
line-height: 30px;
width: 30px;
height: 30px;
border-radius: 50%;
border: 4px solid;
border-color: #e5e6e6;
background: #ffffff;
-webkit-transition: background-color 0.6s ease, border-color 0.6s ease;
-o-transition: background-color 0.6s ease, border-color 0.6s ease;
transition: background-color 0.6s ease, border-color 0.6s ease;
}
.step-wizard li .swtitle {
position: absolute;
width: 100%;
left: 20px;
padding-top: 42px;
color: #969c9c;
-webkit-transition: color 0.6s ease;
-o-transition: color 0.6s ease;
transition: color 0.6s ease;
}
.step-wizard li.swactive .swstep {
border-color: #0aa89e;
}
.step-wizard li.swactive .swtitle {
color: black;
}
.step-wizard li.swdone .swstep {
color: white;
background-color: #0aa89e;
border-color: #0aa89e;
}
.step-wizard li > a {
display: block;
width: 100%;
color: black;
position: relative;
text-align: center;
}
.step-wizard li > a:hover .swstep {
border-color: #0aa89eg;
}
.step-wizard li > a:hover .swtitle {
color: black;
}
#media only screen and (max-width: 1200px) {
.step-wizard li {
width: 24%;
}
}
#media only screen and (max-width: 375px) {
.step-wizard li {
width: 22%;
}
}
<body>
<div id="container">
<div class="step-wizard">
<div class="swprogress">
<div class="swprogressbar swempty"></div>
<div id="prog" class="swprogressbar" style="width:33.3%"></div>
</div>
<ul>
<li class="swactive">
<a href="#" id="step1">
<span class="swstep">1</span>
<span class="swtitle">Client Details</span>
</a>
</li>
<li class="swactive">
<a href="#" id="step2">
<span class="swstep">2</span>
<span class="swtitle">Brand Details</span>
</a>
</li>
<li class="">
<a href="#" id="step3">
<span class="swstep">3</span>
<span class="swtitle">Shift Details</span>
</a>
</li>
<li class="">
<a href="#" id="step4">
<span class="swstep">4</span>
<span class="swtitle">Confirmation</span>
</a>
</li>
</ul>
</div>
</div>
Bootstrap adding son styling to ul ad other that override your style.
With little correction to your style you can correct the modify by bs:
.step-wizard {
display: inline-block;
position: relative;
width: 100%;
}
.step-wizard .swprogress {
position: absolute;
top: 43px;
left: 12.5%;
width: 75%;
}
.step-wizard .swprogressbar {
position: absolute;
background-color: #0aa89e;
opacity: 0.4;
height: 12px;
border: 1px solid e5e6e6;
width: 0%;
-webkit-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}
.step-wizard .swprogressbar.swempty {
opacity: 1;
width: 100%;
background-color: #e5e6e6;
}
.step-wizard ul {
position: absolute;
width: 100%;
list-style-type: none;
padding: 0;
left: -2%;
margin-top:16px; /* Style correction */
}
.step-wizard li {
display: inline-block;
text-align: center;
width: 24.7%;
}
.step-wizard li .swstep {
position: absolute;
display: inline-block;
line-height: 30px;
width: 38px; /* Style correction */
height: 38px; /* Style correction */
border-radius: 50%;
border: 4px solid;
border-color: #e5e6e6;
background: #ffffff;
-webkit-transition: background-color 0.6s ease, border-color 0.6s ease;
-o-transition: background-color 0.6s ease, border-color 0.6s ease;
transition: background-color 0.6s ease, border-color 0.6s ease;
}
.step-wizard li .swtitle {
position: absolute;
width: 100%;
left: 20px;
padding-top: 42px;
color: #969c9c;
-webkit-transition: color 0.6s ease;
-o-transition: color 0.6s ease;
transition: color 0.6s ease;
}
.step-wizard li.swactive .swstep {
border-color: #0aa89e;
}
.step-wizard li.swactive .swtitle {
color: black;
}
.step-wizard li.swdone .swstep {
color: white;
background-color: #0aa89e;
border-color: #0aa89e;
}
.step-wizard li > a {
display: block;
width: 100%;
color: black;
position: relative;
text-align: center;
}
.step-wizard li > a:hover .swstep {
border-color: #0aa89eg;
}
.step-wizard li > a:hover .swtitle {
color: black;
}
#media only screen and (max-width: 1200px) {
.step-wizard li {
width: 24%;
}
}
#media only screen and (max-width: 375px) {
.step-wizard li {
width: 22%;
}
}
Related
I have a dropdown navigation system on my website, and it works fine, but I noticed that when I hovered below the dropdown text it would display the dropdown anyway. (jsfiddle of before) I wanted to change that, so I tried changing #dropdown:hover #dropdown-content to #dropdown p:hover #dropdown-content. But I am not getting any results.
#nav-container {
display: table;
margin: 0 auto;
}
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #D3D3D3;
position: sticky;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
#group1 {
display: inline-block;
}
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
left: 0;
right: 0;
opacity: 0;
height: auto;
background-color: #575757;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px #D3D3D3;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropdown-content img {
margin-bottom: 5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nav-dropdown-container {width: 400px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown p:hover #dropdown-content { /* CHANGES HERE */
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
<nav id="navigation">
<div id="nav-container">
<center>
<ul id="nav-items">
<li>
<div id="group1">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>Test</p>
<div id="dropdown-content">
<p>Test</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
</div>
</nav>
I have tried everything, from putting the p element in it's own div to putting the p element in the ul element. Any help would be appreciated.
You should use this CSS selector #dropdown>p:hover ~ #dropdown-content :
#nav-container {
display: table;
margin: 0 auto;
}
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #D3D3D3;
position: sticky;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
#group1 {
display: inline-block;
}
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
left: 0;
right: 0;
opacity: 0;
height: auto;
background-color: #575757;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px #D3D3D3;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropdown-content img {
margin-bottom: 5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nav-dropdown-container {width: 400px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown>p:hover ~ #dropdown-content {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#dropdown:hover #dropdown-content {
display: block;
}
<nav id="navigation">
<div id="nav-container">
<center>
<ul id="nav-items">
<li>
<div id="group1">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>Test</p>
<div id="dropdown-content">
<p>Test</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
</div>
</nav>
Add this in your css selector : ~
it's going to be like that now:
#dropdown p:hover ~ #dropdown-content { /* CHANGES HERE */
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
I'm trying to upgrade my entire project from bootstrap 3.3.0 to bootstrap 4.0.0, but an important element isn't shown as it should, a side menu.
This is the basic code of the menu:
$(document).ready(function() {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function() {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function() {
$('#wrapper').toggleClass('toggled');
});
});
body {
position: relative;
overflow-x: hidden;
}
body,
html {
height: 100%;
}
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
background-color: transparent;
}
/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 220px;
}
#sidebar-wrapper {
z-index: 1000;
left: 220px;
width: 0;
height: 100%;
margin-left: -220px;
overflow-y: auto;
overflow-x: hidden;
background: #1a1a1a;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar {
display: none;
}
#wrapper.toggled #sidebar-wrapper {
width: 220px;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -220px;
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav {
position: absolute;
top: 0;
width: 220px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
position: relative;
line-height: 20px;
display: inline-block;
width: 100%;
}
.sidebar-nav li:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
width: 3px;
background-color: #1c1c1c;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li:first-child a {
color: #fff;
background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
background-color: #ec1b5a;
}
.sidebar-nav li:nth-child(3):before {
background-color: #79aefe;
}
.sidebar-nav li:nth-child(4):before {
background-color: #314190;
}
.sidebar-nav li:nth-child(5):before {
background-color: #279636;
}
.sidebar-nav li:nth-child(6):before {
background-color: #7d5d81;
}
.sidebar-nav li:nth-child(7):before {
background-color: #ead24c;
}
.sidebar-nav li:nth-child(8):before {
background-color: #2d2366;
}
.sidebar-nav li:nth-child(9):before {
background-color: #35acdf;
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
width: 100%;
-webkit-transition: width .2s ease-in;
-moz-transition: width .2s ease-in;
-ms-transition: width .2s ease-in;
transition: width .2s ease-in;
}
.sidebar-nav li a {
display: block;
color: #ddd;
text-decoration: none;
padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
color: #fff;
text-decoration: none;
background-color: transparent;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 20px;
line-height: 44px;
}
.sidebar-nav .dropdown-menu {
position: relative;
width: 100%;
padding: 0;
margin: 0;
border-radius: 0;
border: none;
background-color: #222;
box-shadow: none;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.hamburger {
position: fixed;
top: 20px;
z-index: 999;
display: block;
width: 32px;
height: 32px;
margin-left: 15px;
background: transparent;
border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active {
outline: none;
}
.hamburger.is-closed:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
position: absolute;
left: 0;
height: 4px;
width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
top: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
top: 50%;
margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
bottom: 5px;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
top: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
bottom: 0;
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom {
background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom {
top: 50%;
margin-top: -2px;
}
.hamburger.is-open .hamb-top {
-webkit-transform: rotate(45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open .hamb-middle {
display: none;
}
.hamburger.is-open .hamb-bottom {
-webkit-transform: rotate(-45deg);
-webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open:before {
content: '';
display: block;
width: 100px;
font-size: 14px;
color: #fff;
line-height: 32px;
text-align: center;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
opacity: 1;
display: block;
-webkit-transform: translate3d(-100px, 0, 0);
-webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/* Overlay */
/*-------------------------------*/
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(250, 250, 250, .8);
z-index: 1;
}
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>loleo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!--NO TOCAR-->
<script src="sidebar.js"></script>
<link rel="stylesheet" type="text/css" href="signup.css">
<link href="sidebar.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div id="wrapper">
<div class="overlay"></div>
<!-- SIDEBAR -->
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-md" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand nav-item"> <a href="#" class="nav-link">
LOGO
</a>
</li>
<li class="nav-item"> READ
</li>
<li class="nav-item"> HISTORY
</li>
<li class="nav-item"> NOTIFICATIONS
</li>
<li class="dropdown nav-item"> CONFIG<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-item">PROFILE
</li>
<li class="dropdown-item">PREMIUM
</li>
<li class="dropdown-item">LOG OUT
</li>
</ul>
</li>
</ul>
</nav>
<!-- FIN DEL SIDEBAR -->
<!-- INICIO DEL BODY -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas"> <span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<!--modificable desde aquí-->
<!--hasta aquí-->
</div>
<!-- z -->
</div>
</body>
</html>
So, as you might have guessed, the menu should disappear totally when it's closed. I think a class is wrong, I have tried to change some of them, but don't know which one. Any idea?
I've finally found the problem.
in
<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand-md" id="sidebar-wrapper" role="navigation">
It's useless writting the "navbar" class of the css, it is superimposing, so "there are two sidebars". Just deleted this class from the label and finished.
I've been working on this for ages and am trying everything under the sun to try to figure out how to make this navbar horizontal I've previously done it because I copied and pasted this from an old website I've done but it doesn't seem to be working. what am I doing wrong? Ive done floating to the left display inline all that stuff. is it possible that I have something that could be overriding it?
PS. I'm working in Dreamweaver and using some of the bootstrap codings if that helps.
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
/Nav Formatting/
.navbar-nav {
width: 20%;
text-align: center;
}
.navbar-nav > li {
float: right;
display: inline-block;
}
.navbar-nav .nav > lu {
float: right;
display: inline;
}
/Nav Formatting: Hover animation/
.navbar-nav li {
position: relative;
float: left;
margin: 0 20px;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before, li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before, li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight:normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
You have set
.navbar-nav{
width: 20%;
}
How can it expand? Try
.navbar-nav {
width: 100%;
}
/*Nav Formatting*/
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav>li {
float: right;
display: inline-block;
}
.navbar-nav .nav>lu {
float: right;
display: inline;
}
/*Nav Formatting: Hover animation*/
.navbar-nav li {
position: relative;
float: left;
margin: 0 20px;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before,
li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before,
li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight: normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
<!--- Navbar --->
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
The outer container .navbar-nav was styled with 20% width. This forced the inner elements to wrap because there was not enough space. A width of 100% is not need here because <nav> is an block element.
If you only have 4 four inner elements, you can give them a width of 25% combined with floating left to stack them next to each other.
Add a clearfix class or overflow:hidden (quick and dirty!) to the outer container to make sure it visally wraps the inner elements.
Please see my updated code snippet for reference:
/*Nav Formatting*/
.navbar-nav {
}
.navbar-nav li {
width: 25%;
float: left;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.navbar-nav .nav > ul {
float: right;
display: inline;
margin: 0;
}
/*Nav Formatting: Hover animation*/
.navbar-nav li {
position: relative;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before,
li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before,
li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight: normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
<!--- Navbar --->
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
Your ul is to small. That's why it will press it together. Try
ul.nav.navbar-nav {
width:100%;
}
/*Nav Formatting*/
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav >li {
float: right;
}
.navbar-nav .nav > ul {
float: right;
}
/*Nav Formatting: Hover animation*/
.navbar-nav li {
position: relative;
margin: 0 20px;
}
.navbar-nav li:before {
content: '';
display: inline;
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:after {
content: '';
display: inline;
position: absolute;
top: 0;
right: 0;
width: 2px;
height: 0;
background-color: #ABE1DB;
-webkit-transition: height 0.4s ease 0.4s;
transition: height 0.4s ease 0.4s;
}
.navbar-nav li:hover:before,
li:hover:after {
height: 100%;
}
.navbar-nav li:hover a {
background-color: transparent;
-webkit-transition: background-color 0.4s ease 0.4s;
transition: background-color 0.4s ease 0.4s;
}
.navbar-nav li:hover a:before,
li:hover a:after {
width: 100%;
}
.navbar-nav a {
display: inline;
padding: 0 40px;
height: 100%;
font-weight: normal;
font-size: 18px;
line-height: 60px;
color: #ABE1DB;
text-decoration: none;
-webkit-transition: background-color 0.4s ease;
transition: background-color 0.4s ease;
}
.navbar-nav a:before {
content: '';
display: inline;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
.navbar-nav a:after {
content: '';
display: inline;
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #ABE1DB;
-webkit-transition: width 0.4s ease;
transition: width 0.4s ease;
}
<!--- Navbar --->
<nav class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>home</li>
<li>menu</li>
<li>about</li>
<li>webshop</li>
</ul>
</nav>
I don't know how to solve this problem: on hover of 'a' elements the div enlarges and the other 'a' move.
Thanks for help
https://jsfiddle.net/0r2v2qyp/
Here html:
<a id="btn_agency" class="btn_presentation">Agenzia</a>
<a id="btn_student" class="btn_presentation">Studente</a>
<a id="btn_prof" class="btn_presentation">Docente</a>
<a id="btn_admin" class="btn_presentation">Segreteria</a>
And css:
.btn_presentation {
float: left;
margin: 10px;
color: royalblue;
font-size: 20px;
position: relative;
letter-spacing: 0;
text-transform: uppercase;
transition: all .2s ease-out;
}
.btn_presentation:after {
content: '';
position: relative;
display: block;
margin: 0 auto;
width: 0;
height: 0;
background: red;
transition: all .2s ease-out;
}
.btn_presentation:hover {
letter-spacing: 5px;
transition: all .3s ease-in;
}
.btn_presentation:hover:after {
width: 100%;
height: 2px;
transition: all .2s ease-in-out;
}
To be able to animate the letter-spacing, you have to give the div a fixed width wide enough to make up for the text when expanded.
div {
display: inline-block;
margin: 10px;
width: 120px;
}
.btn_presentation {
display: inline-block;
color: royalblue;
font-size: 20px;
position: relative;
letter-spacing: 0;
text-transform: uppercase;
transition: all .2s ease-out;
}
.btn_presentation:after {
content: '';
position: relative;
display: block;
margin: 0 auto;
width: 0;
height: 0;
background: red;
transition: all .2s ease-out;
}
.btn_presentation:hover {
letter-spacing: 5px;
transition: all .3s ease-in;
}
.btn_presentation:hover:after {
width: 100%;
height: 2px;
transition: all .2s ease-in-out;
}
<div>
<a id="btn_agency" class="btn_presentation">Agenzia</a>
</div>
<div>
<a id="btn_student" class="btn_presentation">Studente</a>
</div>
<div>
<a id="btn_prof" class="btn_presentation">Docente</a>
</div>
<div>
<a id="btn_admin" class="btn_presentation">Segreteria</a>
</div>
An option could instead be to scale it using transform
div {
display: inline-block;
margin: 10px;
}
.btn_presentation {
display: inline-block;
color: royalblue;
font-size: 20px;
position: relative;
letter-spacing: 0;
text-transform: uppercase;
transition: transform .2s ease-out;
}
.btn_presentation:after {
content: '';
position: relative;
display: block;
margin: 0 auto;
width: 0;
height: 2px;
background: red;
transition: width .2s ease-out;
}
.btn_presentation:hover {
transform: scale(1.2);
transition: transform .3s ease-in;
}
.btn_presentation:hover:after {
width: 100%;
transition: width .2s ease-in-out;
}
<div>
<a id="btn_agency" class="btn_presentation">Agenzia</a>
</div>
<div>
<a id="btn_student" class="btn_presentation">Studente</a>
</div>
<div>
<a id="btn_prof" class="btn_presentation">Docente</a>
</div>
<div>
<a id="btn_admin" class="btn_presentation">Segreteria</a>
</div>
Updated based on comment
This stretch the word only side ways
div {
display: inline-block;
margin: 10px;
}
.btn_presentation {
display: inline-block;
color: royalblue;
font-size: 20px;
position: relative;
letter-spacing: 0;
text-transform: uppercase;
transition: transform .2s ease-out;
}
.btn_presentation:after {
content: '';
position: relative;
display: block;
margin: 0 auto;
width: 0;
height: 2px;
background: red;
transition: width .2s ease-out;
}
.btn_presentation:hover {
transform: scaleX(1.2);
transition: transform .3s ease-in;
}
.btn_presentation:hover:after {
width: 100%;
transition: width .2s ease-in-out;
}
<div>
<a id="btn_agency" class="btn_presentation">Agenzia</a>
</div>
<div>
<a id="btn_student" class="btn_presentation">Studente</a>
</div>
<div>
<a id="btn_prof" class="btn_presentation">Docente</a>
</div>
<div>
<a id="btn_admin" class="btn_presentation">Segreteria</a>
</div>
I want a Button, with 2 elements in it, to slide the Background.
But I want both elements to center vertical and get height 100% even when the other element is bigger.
Here is the HTML
<button class="btn-cstm-slide">
<div class="btn-cstm-slide-logo"><span>Test Test 14343</span></div>
<div class="btn-cstm-slide-text">
<span>Just a Testtest</span>
<br/>
<span>Let's see</span>
</div>
</button>
And here the CSS
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
height:100%;
min-height:100%;
margin: 0;
padding: 10px;
position: relative;
text-decoration: none;
background: #474f54;
color: #fff;
}
.btn-cstm-slide-text {
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text * {
position:relative;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}
Demo
FIDDLE
Can you help me? :(
Is this what you had in mind?
https://jsfiddle.net/e07uc4kj/9/
.btn-cstm-slide {
height: 100%;
padding: 0px;
display: flex;
position: relative;
text-decoration: none;
overflow: hidden;
background: #333C42;
border: none;
box-shadow: 0px 1px 1px rgba(0,0,0,.1);
}
.btn-cstm-slide-logo {
padding: 10px;
min-width: 80px;
position: absolute;
top: 0px;
bottom: 0px;
text-decoration: none;
background: #474f54;
color: #fff;
vertical-align: middle;
}
.btn-cstm-slide-text {
margin-left: 100px;
padding: 10px;
position: relative;
text-decoration: none;
background: #333C42;
color: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-cstm-slide-text:before {
content: "";
position: absolute;
height: 100%;
width: 0;
bottom: 0;
left:0;
background-color: #474f54;
-webkit-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.btn-cstm-slide-text:hover:before {
width: 100%;
}