I'm creating a mobile nav and I have drop down menu on the charactors tab, with a back button on top made of simply a list item with text. With the back button though width 100% doesn't seem to be working I have check the dev tools and its seems like its should be working, I need it to be acting like the rest of the list items and its seem be be acting like its an inline element why?
the back a button only appears on widths 400px or less
https://jsfiddle.net/6e62ge46/11/
header nav{
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
// background-color: rgba(255,165,0,.8);
}
nav ul {
list-style: none;
padding: 0;
}
.main-nav{
margin: 0;
width: 100%;
color: white;
font-family: arial;
font-weight: 600;
}
nav ul li{
text-align: center;
border: 1px solid white;
border-radius: 15px;
font-size: 1.2rem;
background-color:rgba(255,165,0,.8);
width: 100%;
}
.drop-menu-back{
display: none;
width: 100%;
}
a{
text-decoration: none;
}
nav a:visited, nav a,h1{
color: white;
}
.main-nav .current-page {
background-color: rgba(0,0,0,.5);
}
/****drop down menu****/
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.drop-menu{
position: absolute;
visibility: hidden;
display: block;
top: 38px;
white-space: nowrap;
left: -2px;
background-color: rgba(255,165,0,.8);
border: 1px solid rgba(0,0,0,.02);
box-shadow: 5px 5px 5px 2px rgba(0,0,0,.3);
opacity: 0;
transition: opacity 300ms ease-in-out 0s;
z-index: 1;
}
.characters:hover .drop-menu{
visibility: visible;
opacity:1;
}
#media screen and (max-width: 400px) {
.drop-menu{
top:-50px;
width: 100%;
}
.drop-menu-back{
display: initial;
width: 100%;
}
}
Related
I'm working on the animation and cannot figure out how I can stop the animation from repeating an infinite amount of times, but also still show after it has completed the animation once. An extra thing as well if you could tell me is that i have 4 different sentences to animate and it would be great if I could make the animations animate one by one then finish and still show.
p.s This is all in css and a lot of changes have been done with copy and paste of used code so i know the animation stuff is repeated
type he
#import url('https://fonts.googleapis.com/css2?family=Quicksand:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Quicksand';
background-image: url('images/websitesbackground.jpg');
}
.header {
margin-top: -15px;
}
.logo {
font-family: 'Quicksand';
font-weight:lighter;
margin-top: -10px;
border: black 3px none;
padding: 3px 3px;
height: 100px;
width: 350px;
position: absolute;
margin-left: -20px;
margin-top: -180px;
}
.wrapper1 {
display: inline-flex;
display: flex;
align-items: left;
justify-content: left;
margin-top: 200px;
margin-left: 10%;
}
.wrapper1 .static-txt {
color: black;
font-size: 193%;
font-weight: 400;
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
}
.wrapper1 .dynamic-txts {
margin-left: 10px;
line-height: -10px;
overflow: hidden;
}
.dynamic-txts li {
color: black;
list-style: none;
font-size: 30px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(1);
}
#keyframes slide {
100% {
top: -160px;
}
}
.dynamic-txts li span {
position: relative;
}
.dynamic-txts li span::after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: url('images/websitesbackground.jpg');
border-left: 2px solid black;
animation: typing 3.2s steps(15) infinite;
}
#keyframes typing {
100% {
left: 100%;
margin: 0 -35px 0 35px;
}
}
.wrapper2 {
display: inline-flex;
display: flex;
align-items: left;
justify-content: left;
margin-top: 7%;
margin-left: 10%;
}
.wrapper2 .static-txt {
color: black;
font-size: 193%;
font-weight: 400;
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
}
.wrapper2 .dynamic-txts {
margin-left: 10px;
line-height: -10px;
overflow: hidden;
}
.dynamic-txts li {
color: black;
list-style: none;
font-size: 30px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(1);
}
#keyframes slide {
100% {
top: -160px;
}
}
.dynamic-txts li span {
position: relative;
}
.dynamic-txts li span::after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: url('images/websitesbackground.jpg');
border-left: 2px solid black;
animation: typing 3.2s steps(15) infinite;
}
#keyframes typing {
100% {
left: 100%;
margin: 0 -35px 0 35px;
}
}
.wrapper3 {
display: inline-flex;
display: flex;
align-items: left;
justify-content: left;
margin-top: 7%;
margin-left: 10%;
}
.wrapper3 .static-txt {
color: black;
font-size: 193%;
font-weight: 400;
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
}
.wrapper3 .dynamic-txts {
margin-left: 10px;
line-height: -10px;
overflow: hidden;
}
.dynamic-txts li {
color: black;
list-style: none;
font-size: 30px;
font-weight: 500;
position: relative;
top: 0;
animation: slide 12s steps(1);
box-shadow: 2px -2px 2px;
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
}
#keyframes slide {
100% {
top: -160px;
}
}
.dynamic-txts li span {
position: relative;
}
.dynamic-txts li span::after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: url('images/websitesbackground.jpg');
border-left: 2px solid black;
animation: typing 3.2s steps(15);
}
#keyframes typing {
100% {
left: 100%;
margin: 0 -35px 0 35px;
}
}
.wrapper4 {
display: inline-flex;
display: flex;
align-items: left;
justify-content: left;
margin-top: 7%;
margin-left: 10%;
}
.wrapper4 .static-txt {
color: black;
font-size: 193%;
font-weight: 400;
color: #121212;
text-shadow: 2px 7px 5px rgba(0,0,0,0.3),
0px -4px 10px rgba(255,255,255,0.3);
}
.wrapper4 .dynamic-txts {
margin-left: 10px;
line-height: -50px;
overflow: hidden;
}
.dynamic-txts li {
color: black;
list-style: none;
font-size: 30px;
font-weight: 500;
position: relative;
top: 0;
}
#keyframes slide {
100% {
top: -160px;
}
}
.dynamic-txts li span {
position: relative;
}
.dynamic-txts li span::after {
content: "";
position: absolute;
left: 0;
height: 100%;
width: 100%;
background: url('images/websitesbackground.jpg');
border-left: 2px solid black;
}
#keyframes typing {
100% {
left: 100%;
margin: 0 -35px 0 35px;
}
}
#keyframes bubble {
0% { transform:scale(0.5); opacity:0.0; left:0}
50% { transform:scale(1.2); opacity:0.5; left:100px}
100% { transform:scale(1.0); opacity:1.0; left:200px}
}
.img {
border-radius: 1000px;
margin-left: 59%;
margin-top: -44.3%;
height: 600px;
}
.dynamic-txts {
visibility: visible;
}
re
I have tried all the things i could think of (but its still probably going to be obvious) and i just cant think of anything else, hope someone could help.
i am just a beginning in HTML5 and CSS. Im trying to make a dropdown menu but something is going wrong. Looking a while into it but cannot find my mistake. I hope somebody is willing to help me! Here below my CSS coding.. If theres some questions or details needed comments i would love to hear them ofcourse.
*{
margin: 0;
padding: 0;
front-family: century gothic;
}
header{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(image.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration:none;
color:#fff;
padding:5px 20px;
border:2px solid transparent;
transition: 0.8s ease;
}
ul li a:hover{
background-color:#fff;
color: #000;
}
ul li.active a{
background-color:#fff;
color: #000;
}
/* Dropdown Button */
.dropbtn {
background-color: #fff;
color: black;
padding: 16px;
font-size: 16px;
border: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding:10px 50px;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.logo img{
float:left;
width: 150px;
height: auto;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}
There is nothing in your CSS, telling the .dropdown-content to appear, when you hover. You could try something like this. I have copied your CSS and added to it, also adding in some HTML:
*{
margin: 0;
padding: 0;
font-family: century gothic;
}
header{
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(image.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
}
ul li{
display: inline-block;
}
ul li a{
text-decoration:none;
color:#fff;
padding:5px 20px;
border:2px solid transparent;
transition: 0.8s ease;
}
ul li a:hover{
background-color:#fff;
color: #000;
}
ul li.active a{
background-color:#fff;
color: #000;
}
/* Dropdown Button */
.dropbtn {
background-color: #fff;
color: black;
padding: 16px;
font-size: 16px;
border: black;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
padding:10px 50px;
display: inline-block;
}
.dropbtn:hover ~ .dropdown .dropdown-content {
display: block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.logo img{
float:left;
width: 150px;
height: auto;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.title h1{
color: #fff;
font-size: 70px;
}
.button{
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn{
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
text-decoration: none;
transition: 0.6s ease;
}
.btn:hover{
background-color: #fff;
color: #000;
}
<header>
<div class="dropbtn">show dropdown</div>
<div class="dropdown">
<div class="dropdown-content">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
</header>
I am using the general sibling selector ~, to make my :hover CSS work. I can improve this answer after seeing your actual HTML.
I am trying to get the the menu on the right side of the search bar to breakout of the parent.
Code: http://jsbin.com/xecolubodi/edit?html,css,js,output
I believe a modified to the following css styles is required:
.mapsearch-menu ul {
display: none;
position: relative;
top: -55px;
padding: 55px 0 0 0;
margin: 0;
user-select: none;
}
.mapsearch-menu ul:hover {
display: block;
}
.mapsearch-menu li {
background: white;
padding: 4px;
list-style: none;
border: 1px solid rgba(0, 0, 0, 0.298039);
margin-top: -1px;
}
.mapsearch-menu input[type=checkbox],
input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
.mapsearch-menu li:hover {
background: #eee;
cursor: pointer;
}
.mapsearch-menu .button {
display: inline-block;
user-select: none;
cursor: pointer;
height: 16px;
width: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAJ0lEQVQ4y2NgGDbgJBD/JxGfQDbgOBkGHB1mYXBi6IfBmdEwIB8AAEQSURX+8q0jAAAAAElFTkSuQmCC");
}
.mapsearch-menu {
display: inline-block;
position: absolute;
top: 0;
right: 0;
margin-top: 12px;
padding-right: 5px;
}
Before click:
After click:
I want the hamburger menu icon to stay stationary and have the dropdown menu either breakout of the parent divs bounds or have the list items right justified.
I have been working on this for an hour and I am not getting anywhere. I tried various things (floating, etc).
ps: I prefer to have the search icon, the search text, and the hamburger all left-floated instead of the hack I am currently doing with padding with the search. If that is easier to fix that first then please attempt (I also been trying to fix that)
I updated your css below, It will probably work for you.
.mapsearch-menu ul {
display: none;
position: absolute; /* Add this you can change it as per you need */
top: -34px; /* Add this */
right:0px; /* Add this you can change it as per you need */
min-width:170px; /* Add this */
padding: 55px 0 0 0;
margin: 0;
user-select: none;
}
.mapsearch-menu .button {
display: inline-block;
user-select: none;
cursor: pointer;
position:relative; /* Add this */
height: 16px;
width: 16px;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAJ0lEQVQ4y2NgGDbgJBD/JxGfQDbgOBkGHB1mYXBi6IfBmdEwIB8AAEQSURX+8q0jAAAAAElFTkSuQmCC");
}
.mapsearch-menu li {
background: white;
padding: 4px;
list-style: none;
border: 1px solid rgba(0, 0, 0, 0.298039);
margin-top: -1px;
display:inline-block; /* Add this */
}
I'm trying to have navigation menu items have underline effect when hovering. This is my current style.css code for the navigation menu.
What should I add to make it look something like this? Example: http://www.templatemonster.com/demo/54038.html .
This is my current nav bar code.
.navbar-nav .open .dropdown-menu{
display:block !important;
}
.navbar-default .navbar-nav > li > a {
color: #333;
border-bottom: 1px solid transparent;
padding: 0;
margin: 14px;
Try this..
HTML:
<ul>
<li>About</li>
</ul>
CSS:
body,html {
margin: 0;
}
ul {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
li {
display: table-cell;
position: relative;
padding: 15px 0;
}
a {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #000;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
a:hover:after {
width: 100%;
left: 0;
}
https://jsfiddle.net/y4hc9Lbv/
So I have a div that is supposed to have 100% height. It's only parent element is <body>, so 100% should be the height of the window. But instead of spanning the height of the screen, it only is as high as the container element inside it. The funny thing is, if I use fixed positioning, it does what I want it to. Alas, I can't use fixed in the site layout. Here is my css. If you would like to see what the site looks like right now, here is the link: http://ion.comli.com/projects/
body, ul {
margin: 0;
padding: 0;
}
body {
background: url('/images/background.png') no-repeat fixed;
}
/* CONTENT */
.content{
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50px;
left: 15%;
height: 100%;
width: 70%;
background-color: #ffffff;
}
/* END CONTAINER*/
/* CONTAINER */
.container{
background: #ffffff;
margin: 5% 10%;
text-align: center;
}
.container .title a {
font-family: Franchise, "sans-serif";
font-size: 48px;
color: black;
line-height: 48px;
text-align: center;
text-decoration: none;
}
.container .date {
font-family: Ubuntu, "sans-serif";
font-size: 12px;
color: #666666;
line-height: 12px;
text-align: center;
text-decoration: none;
}
.container .body {
font-family: Ubuntu, "sans-serif";
font-size: 16px;
text-align: left;
}
/* END CONTAINER */
/* PROJECT */
.project {
display: block;
margin: 5% auto;
height: 100px;
width: 500px;
border-radius: 10px;
background: url("/images/background.png");
opacity: 0.5;
}
.project h2 {
font-family: Franchise;
font-size: 48px;
color: white;
text-align: center;
}
/* END PROJECT */
/* NAVIGATION */
nav ul {
background-color: #1b1b1b;
display: table;
list-style: none;
position: fixed;
top: 0;
height: 50px;
width: 100%;
box-shadow: 0 0 6px #888888;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: table-cell;
height: 50px;
line-height: 50px;
padding: 0 65px;
font-family: Ubuntu;
font-size: 16px;
color: #ffffff;
text-decoration: none;
background-color: #292929;
}
nav #title {
font-family: Lobster;
font-size: 36px;
line-height: 50px;
border-right: 1px solid #ffffff;
background-color: #1b1b1b;
}
nav #menu {
padding: 0 25px;
background-color: #1b1b1b;
}
nav #menu:hover {
box-shadow: none;
background-color: #292929;
}
nav li:hover #menu {
box-shadow: none;
background-color: #292929;
}
nav ul ul {
background: #292929;
display: none;
position: absolute;
top: 100%;
right: 0px;
width: 15%;
}
nav ul ul li {
background: #292929;
float: left;
position: relative;
clear: both;
}
nav ul li:hover > ul {
box-shadow: none;
display: block;
}
/* END NAVIGATION */
/* SCROLLBAR */
/* END SCROLLBAR */
Any way I can get this div to span the whole 100%? I'm pretty sure there is a simple answer to this question, but I can't find it. Thanks in advance!
You have to make sure all parents of .content have a height defined.
So in your case what is missing is:
html, body {
height: 100%;
}
Alternative
Or you could position .content as fixed and you'd have the same effect but with a different approach
.content {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
Make body 100% high
html, body {
height: 100%;
}