I am making a navigation menu (following a tutorial), and to make the nav-icon I apparently have to use pseudo elements. Normally that would be fine, but this time, they wont show at all...
Is there something wrong with my code/is there a better way to make the icon?
*,
*::before,
*::after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body {
padding: 0;
margin: 0;
background-color: #FFF
-webkit-font-smoothing: antialiased;
}
a {
color: hsla(37, 39%, 72%, 1.00);
text-decoration: none;
}
li{
list-style: none;
}
.header {
width: 100vw;
height: 100vh;
display: block;
background:url(img/background.jpg) no-repeat center center;
background-size: cover;
position: relative;
}
.logo {
font-size: 4em;
color: #FFF;
line-height: 1.1;
border: 1px solid #fff;
border-radius: 100%;
width: 80px;
height: 80px;
display: inline-block;
padding: 5px;
background-color: hsla(152, 40%, 20%, 1.00);
margin: 50px 0 0 50px;
cursor: pointer;
}
.nav-icon {
width: 50px;
height: 40px;
display: block;
background-color: transparent;
position: absolute;
top: 70px;
right: 50px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.nav-icon .icon {
width: 50px;
height: 2px;
display: block;
background-color: #333;
position: absolute;
top: 20px;
}
.nav-icon .icon::before
.nav-icon .icon::after {
content: "";
width: 50px;
height: 2px;
display: block;
background-color: #FFF
position: absolute;
height: 100%;
}
.nav-icon .icon::before {
top: -10px;
}
.nav-icon .icon::after {
top: 10px;
}
You have missed semicolon ; in some lines and comma , in
.nav-icon .icon::before ,
.nav-icon .icon::after {
content: "";
width: 50px;
height: 2px;
display: block;
background-color: #FFF
position: absolute;
height: 100%;
}
that fixes what u were looking for
Related
So, I got a navigation bar with dropdown menus. Whenever I move my cursor where the drop-down menu is hidden, it opens, and I need to disable that without disabling the drop-down menu as a whole. Any tips on how to do that?
If you want to go ahead and look at the latest version of my website can be found below.
Here's the link: https://p1ayerone.github.io/
And here's the CSS code:
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap');
:root {
--background: rgba(54, 57, 63, .85);
}
*,
*::before,
*::after {
margin: 0px;
padding: 0px;
box-sizing: inherit;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: url(../../img/bg/bg.png) fixed center;
background-attachment: fixed;
background-position: center;
font-family: 'Roboto', sans-serif;
font-weight: 400;
box-sizing: border-box;
color: silver;
}
.content {
height: 200vh;
background-size: cover;
display: grid;
place-items: center;
}
/* navigation styles start here */
header {
z-index: 999;
width: 100%;
right: 0%;
top: 0%;
position: fixed;
}
.logo {
margin: 0;
color: silver;
list-style: none;
}
.img-logo {
margin-right: 15px;
padding-top: 8px;
margin-bottom: -10px;
}
.nav-toggle {
display: none;
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: left;
margin-top: 3.5%;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
.nav {
text-transform: uppercase;
font-size: 1.2rem;
background: var(--background);
padding-bottom: 1.7%;
}
.nav::after {
content: "";
display: table;
clear: both;
}
.nav-main {
float: right;
list-style: none;
margin-bottom: -21px;
padding-bottom: -15px;
}
.nav-main-item {
display: inline-block;
width: 12rem;
position: relative;
}
li {
list-style: none;
}
.nav-main a {
text-align: center;
padding: 1rem;
color: #eee;
text-decoration: none;
display: block;
}
.nav-main-item a:hover {
background-color: gray;
}
.nav-main-item:hover > * {
opacity: 1;
margin: 0;
}
.navi-main-item {
opacity: 0;
position: absolute;
width: 100%;
top: 100%;
z-index: -1;
background: var(--background);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
}
.more-main-item {
opacity: 0;
position: absolute;
width: 100%;
top: 100%;
z-index: -1;
background: var(--background);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.destiny-intro-p {
padding-left: 100px;
font-size: 1.3rem;
}
.destiny-intro-h1 {
font-size: 3rem;
}
.body-block {
background-color: black;
color: white;
padding-bottom: 6%;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
z-index: 999;
width: 100%;
right: 0%;
top: 0%;
position: fixed;
}
.logo {
margin: 0;
color: silver;
list-style: none;
padding-top: 15;
}
.nav {
text-transform: uppercase;
font-size: 1.2rem;
background: var(--background);
}
.nav::after {
content: "";
display: table;
clear: both;
}
.nav-main {
float: right;
list-style: none;
}
.nav-main-item {
display: inline-block;
width: 10rem;
position: relative;
}
.nav-main a {
text-align: center;
padding: 1rem;
color: white;
text-decoration: none;
display: block;
}
.nav-main-item a:hover {
background-color: silver;
}
.nav-main-item:hover > * {
opacity: 1;
margin: 0;
}
.navi-main-item {
opacity: 0;
position: absolute;
width: 100%;
top: 100%;
z-index: -1;
background: var(--background);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
}
.Discord {
float: right;
}
.gif-Destiny {
width: 200px;
float: right;
color: silver;
}
.Zachary {
color: black;
text-decoration: none;
}
.introduction {
color: black;
}
.footer {
background-color: #1F2E4B;
color: white;
text-align: center;
font-size: 20px;
float: center;
margin-top: 100%;
}
.CbZD{
color: #00FFFF;
font-size: 30px;
}
}
.Discord {
float: right;
}
.img-Destiny {
padding-top: 0px;
width: 300px;
float: right;
color: black;
}
.Zachary {
color: black;
text-decoration: none;
}
.introduction {
color: black;
}
.footer {
background-color: #1F2E4B;
color: white;
text-align: center;
font-size: 20px;
float: center;
}
.CbZD{
color: #00FFFF;
font-size: 30px;
}
/* Videos */
.tse {
color: #07FC1B;
text-align: center;
}
/* Characters */
.img-TBG {
background-color: white;
color: black;
float: left;
width: 300px;
height: 500px;
}
/* Applications */
.silver-box {
background-color: silver;
color: black;
height: 1400px;
width: 640px;
}
/* About Me */
.abtme {
width: 50%;
margin: 0 auto;
}
/* Links */
.contact-me {
color: silver;
}
.gmail-footer {
color: silver;
}
.twitter-footer {
color: silver;
}
/* Contact */
.contact-title {
margin-top: 100px;
color: white;
text-transform: uppercase;
transition: all 4s ease-in-out;
}
.contact-title h1 {
font-size: 32px;
line-height: -10px;
}
.contact-title h2 {
font-size: 16px;
}
form {
margin-top: 50px;
transition: all 4s ease-in-out;
}
.form-control {
width: 600px;
background: var(--background);
border: none;
outline: none;
border-bottom: 1px solid gray;
color: white;
font-size: 18px;
margin-bottom: 16px;
}
input {
height: 45px;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
height: 50px;
margin-top: 20px;
}
form .submit:hover {
background-color: #f44336;
cursor: pointer;
}
Instead of using opacity:0 and opacity:1 to display the dropdown, you can use display:none and display:inline-block. When using opacity, it doesn't remove the element from the page, which is why the dropdown would appear when hovering in that area.
Can read more about this here https://magnusbenoni.com/difference-between-display-visibility-opacity/
.nav-main-item:hover > .navi-main-item {
display: inline-block;
margin: 0;
}
.navi-main-item {
display: none;
position: absolute;
width: 100%;
top: 100%;
z-index: -1;
background: var(--background);
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.8);
}
I'm not very experienced on web development and have run across some issue,i am aligning the menu but it not starting from its parent. I am searched and experimented every possible way but i cant figure out where is the problem.
Following is the css
.drop {
z-index: 9;
max-width: 361px;
padding-top: 1px;
position: absolute;
display: none;
float: left;
min-width: 200px;
margin: 22px;
padding: 1.2em 0;
font-size: 12px;
list-style: none;
background: #02709be6;
}
.com:hover .drop {
display: block;
}
li.com .drop>li ul {
align-items: center;
top: 22px;
}
.drop li {
width: 100%;
padding-left: 41px;
padding-right: 51px;
display: block;
clear: both;
padding: 1px 1.6em;
line-height: 1.8;
white-space: nowrap;
color: #333;
-webkit-transition: none;
transition: none;
}
nav {
border: 1px solid #000;
border-width: 0 0 1px;
list-style: none;
text-align: center;
font-size: 21px;
}
nav li {
display: inline-block;
padding: 21px;
padding-right: 35px;
padding-left: 35px;
border-left: 1px solid rgba(255, 255, 255, 0.1);
text-align-last: left;
}
.nav {
margin-top: 25px;
color: #000000;
text-align: left;
left: 0;
width: 960px;
height: 24px;
color: #ffffff;
}
expected result be should like this
Try this code:
nav li{
display: inline-block;
padding: 21px;
padding-right: 35px;
padding-left: 35px;
border-left: 1px solid rgba(255,255,255,0.1);
text-align-last: left;
position: relative;
}
.drop{
z-index: 9;
max-width: 415px;
padding-top: 1px;
display: none;
float: left;
min-width: 200px;
padding: 1.2em 0;
font-size: 12px;
list-style: none;
background: #02709be6;
position: absolute;
left: 0;
margin: 0;
top: 100%;
}
Remove this code:
li #drop-about {
left: 56vw;
max-width: 304px;
min-width: 242px; }
li #drop-dt {
left: 22.7vw;
}
Pretty simple but odd bug, I have a pseudo-element which is appearing fine on desktop browsers but disappears on mobile Chrome (not sure about iOS, no iPhone to test with)
Here's the basic CSS:
a {
text-decoration: none;
display: inline-block;
color: #000;
overflow: visible;
}
a::after {
content: '';
display: block;
height: 8px;
width: 98%;
background: #8BC8F690;
margin-top: -9px;
margin-left: 2px;
}
<a>hello</a>
jsfiddle:
https://jsfiddle.net/w4d1jteb/
Check your background. This is not a valid value. It's 8 chars long, but only can have 6.
a {
text-decoration: none;
display: inline-block;
color: #000;
overflow: visible;
}
a::after {
content: '';
display: block;
height: 8px;
width: 98%;
background: #8BC8F690; <-- This is not valid. *1*2
margin-top: -9px;
margin-left: 2px;
}
*1: You could try background-color: rgba(139, 200, 246, 0.565) instead.
*2: Or just use #8BC8F6.
See these examples below:
a {
text-decoration: none;
display: inline-block;
color: #000;
overflow: visible;
}
a::after {
content: '';
display: block;
height: 8px;
width: 98%;
background-color: rgba(139, 200, 246, 0.565);
margin-top: -9px;
margin-left: 2px;
}
#test {
text-decoration: none;
display: inline-block;
color: #000;
overflow: visible;
}
#test::after {
content: '';
display: block;
height: 8px;
width: 98%;
background: #8BC8F6;
margin-top: -9px;
margin-left: 2px;
}
<a>hello</a>
<a id="test">hello2</a>
Update:
I'm sure this will be easy fix for advanced members. I have created drop down menu with the 'nav' element. For some reason as hard as I try, I cannot get the menu to overlap the slider images below it when you expand it on mobile. I've tried lowering the Z-index on the slider and raising it on the menu. What am I doing wrong? Thanks in advance:
UPDATE: Here is a fiddle link as requested by a comment which includes the HTML. https://jsfiddle.net/wknow6cv/#&togetherjs=ADxkd31O6q
#import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
* {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden;
}
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
background: #F5F5F5;
color: #67727A;
font-family: 'Alegreya', Sans-serrif;
margin: 0;
}
h3 {
font-size: 150%;
line-height: 155%;
padding: 5% 0;
font-weight: 400;
}
p{
font-size: 120%;
line-height: 150%;
padding: 3%;
text-indent: 2%;
text-align: center;
}
img{
max-width: 100%;
height: auto;
width: auto;
margin-bottom: -4px;
}
header{
background-color: #6991AC;
width: 100%;
height: 120px;
}
h1{
position:absolute;
right: 600px;
top:30px;
}
#top-left-menu {
right: 0px;
}
#logo{
margin: 20px;
float: left;
width: 380px;
height: 60px;
background: url(img/RD.png) no-repeat center;
left: 0px;
top: 0px;
}
p {
font-size: 1.4vw;
}
h3{
font-size: 1.5vw;
}
/*--- Start Navigation --*/
nav{
float: right;
padding: 25px 20px 0 0; /*--top right bottom left--*/
}
#menu-icon{
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul{
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', Sans-serrif;
font-size: 150%;
display: inline-block;
/*makes the links go left from right instead of up and down*/
float: left;
padding: 10px;
}
nav ul li a {
text-decoration: none;
color: #F5F5F5;
}
nav ul li a:hover {
color: #C3D7DF;
}
/*.current{
color: #C3D7DF;
}
/*--End Navigation--*/
.one-fourth {
width: 25%;
float: left;
text-align: center;
font-family: Arial;
color: #F0F0F0;
}
#cloud {
background-color: #C3D7DF;
}
#lock {
background-color: #6991AC;
}
#headset {
background-color: #C3D7DF;
}
#truck {
background-color: #6991AC;
}
.one-fourth i { /*--Icons at one fourth blocks--*/
color: #F0F0F0;
font-size: 410%;
padding: 13% 0 4% 0;
}
article {
float: left;
margin: 0 auto;
width: 50%;
height: auto;
}
#sec-1 {
background-color: #FFFFFF;
}
aside {
float: right;
margin: 0 auto;
width: 50%;
height: auto;
}
.one-third {
width: 33.3333333%;
float: left;
text-align: center;
color: #FFFFFF
}
#google{
background-color: #A2B1C1;
}
#marketing {
background-color: #BEB9AD;
}
#customers {
background-color: #AADCD2;
}
/*--Start Footer--*/
footer {
background-color: #4682B4;
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i { /*--icons--*/
font-size: 220%;
padding: 3% 3% 3% 2%;
color: #C3D7DF;
}
.social i:hover {
color: F5F5F5;
}
footer.second { /*--Socket--*/
border-top: 1px solid #AADCD2;
background-color: #544B59;
max-height: 55px;
text-align: center;
margin: 0;
}
footer.second p {
padding: 5px 0 9px 0;
text-align: center;
}
.carouselbox {
font-family: helvetica,sans-serif;
font-size: 14px;
width: 100px;
position: relative;
margin: 1em;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px #ccc;
overflow: hidden;
}
.content {
margin: 0;
padding: 0;
}
.content li {
font-size: 100px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
}
.new-inner {
height: 800px;
width: 100%;
float: left;
background-color: #FFFAFA;
font-family: Arial;
}
.nip1 {
width: 40%;
}
/*---------Insert Slideshow stuff below------*/
.cycle-slideshow{
width: 100%;
display: block;
position: relative;
margin: 0 auto;
overflow: hidden;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
top: 50%;
display: block;
position: absolute;
z-index: 9999;
cursor: pointer;
}
.cycle-prev {left: 10%;}
.cycle-next {right: 10%}
.cycle-pager{
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 9999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: normal;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
}
.cycle-pager .cycle-pager-active {background: #FFF;}
/*------------MEDIA QUERIES ARE NOW STARTING-------------*/
#media screen and (max-width: 768px){
p {
font-size: 250%;
}
h3{
font-size: 260%;
}
header{
width: 100%;
}
#logo {
margin: 15px 0 20 -25px;
background: url(img/RD_mobile.png) no-repeat center;
float: left;
width: 170px;
height: 60px;
}
#menu-icon {
display: inline-block;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
background: #6991AC;
right: 20px;
top: 60px;
border: 1px solid #FFF;
border-radius: 2px 0 2px 2px;
width: 50%;
}
nav:hover ul {
display: block;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
.one-fourth {
float: left;
width: 100%;
font-size: 30%;
}
.one-fourth i {
font-size: 500%;
padding: 4% 0 1% 0;
}
article {
width: 100%;
}
aside {
width: 100%;
}
.hand-mobile {
display: none;
}
.social i {
font-size: 100%;
}
}
Maybe try to change the media queries nav to position: relative;
EDIT:
Try this instead, change the display: none to inline:
nav ul, nav:active ul {
display: inline;
z-index: 1000;
position: relative;
padding: 20px;
background: #6991AC;
right: 20px;
top: 60px;
border: 1px solid #FFF;
border-radius: 2px 0 2px 2px;
width: 50%;
}
I'm trying to position a text on a contentslider. Sadly it seems like nothing could change the text margin to what I want it to be.
Actually it does look like: https://gyazo.com/dd9ef0f78b5caaf7a582d9825955284b
Live Preview: http://projects.helpful.ninja/BlackzDesignz/Template_1/index.php
This is how I want it to look: https://gyazo.com/631efa979e78732c2c817fb2abf08716
Css code:
#fc_slider_wrap,
#fc_slider_wrap * {
padding: 0;
margin: 0;
outline: 0;
}
#fc_slider_wrap {
width: 755px;
height: 239px;
margin: auto;
font-family: Verdana, Arial;
color: #fff;
font-size: 11px;
overflow: hidden;
position: relative;
}
#fc_slider_img {
width: 550px;
height: 239px;
z-index: 50;
clip: rect(0 0 550px 287px);
float: left;
overflow: hidden;
}
#fc_slider_slide > div > span {
display: none;
}
#fc_slider_slide {
}
#fc_slider_slide > div {
border-radius: 2px;
overflow: hidden;
}
#fc_slider_slide > div > img {
display: block;
border-radius: 2px;
}
#fc_slider_nav {
width: 203px;
height: 287px;
float: right;
}
#fc_slider_nav > div {
height: 47px;
width: 198px;
background: url(../fc_slider/img/nav_opt_bg.png) repeat-x left top transparent;
padding-right: 5px;
margin-bottom: 1px;
cursor: pointer;
}
#fc_slider_nav > div.active {
background-image: url(../fc_slider/img/nav_opt_bg_h.png);
color: #212121;
}
#fc_slider_nav > div > img {
float: left;
margin: 2px;
margin-top: 11px;
}
#fc_slider_nav > div > span {
line-height: 15px;
padding: 2px 12px 2px 0;
text-align: left;
}
#fc_slider_caption {
position: absolute;
padding: 10px;
bottom: 0;
width: 530px;
background: url(../fc_slider/img/black_semi.png) repeat left top transparent;
float: left;
border-radius: 2px;
z-index: 50;
}
#fc_slider_pause {
display: none;
position: absolute;
width: 18px;
height: 18px;
left: 4px;
top: 4px;
z-index: 50;
}
Does anyone have a idea, what I'm doing wrong? Apreciate any kind of help.
Adding Top:5px; position:relative; in #fc_slider_nav > div > span should make it work