Include animation on nav's drop downdown menu - html
I would like to implement an animation when the dropdown menu is triggered once clicked on the hamburger icon (only appears on mobile and tablet). By now it only appears and disappears when clicked, but I would like it to have a drop animation. Which would be the best way to do this avoiding js and just using css, if possible?
body {
background-color: #111111 !important;
font-family: 'Fredoka', sans-serif;
}
a {
color: #dad7d7;
text-decoration: none;
transition: 0.3s;
}
.botoncopyright,
.botoncopyright:hover {
color: #ccd1d1;
}
footer {
background-color: #232323;
}
.cookie-container {
background-color: #232323;
color: #dad7d7;
}
.cookie-container a {
color: #dad7d7;
}
.cookie-container a:hover {
color: #ffffff;
}
html {
scroll-behavior: smooth;
}
main {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2vw;
}
a {
color: #dad7d7;
text-decoration: none;
transition: 0.3s;
}
nav {
z-index: 1;
background-color: rgba(35, 35, 35, 0.9);
backdrop-filter: saturate(180%) blur(20px);
padding: 0 15px;
position: sticky;
top: 0;
}
.botoncopyright,
.botoncopyright:hover {
color: #ccd1d1;
text-decoration: none;
cursor: default;
}
footer {
background-color: #232323;
}
.cookie-container {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background-color: #363636;
color: #dad7d7;
text-align: center;
padding: 10px 32px;
transform: translateY(100%);
transition: transform 400ms ease-in-out;
}
.cookie-container.active {
transform: translateY(0);
}
.cookie-container p {
padding-top: 10px;
}
.cookie-container a {
text-decoration: none !important;
color: #dad7d7;
display: flex;
justify-content: center;
align-items: center;
}
.cookie-container a:hover {
color: #ffffff;
}
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 28%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}
.cookie-btn:hover {
background-color: #a6daeb;
width: 30%;
transition: 0.3s;
}
footer .btn svg {
transition: 0.3s;
}
.rsyoutube {
fill: #8b8d90;
}
.rsyoutube:hover {
fill: #ff0000;
}
.rstwitter {
fill: #8b8d90;
}
.rstwitter:hover {
fill: #00acee;
}
.rsinstagram {
fill: #8b8d90;
}
.rsinstagram:hover {
fill: #de1b85;
}
.rstelegram {
fill: #8b8d90;
}
.rstelegram:hover {
fill: #229ed9;
}
.rsdiscord {
fill: #8b8d90;
}
.rsdiscord:hover {
fill: #5865f2;
}
df-messenger {
--df-messenger-bot-message: #e1f2f7;
--df-messenger-button-titlebar-color: #add8e6;
--df-messenger-button-titlebar-font-color: #757575;
--df-messenger-chat-background-color: #232323;
--df-messenger-font-color: #232323;
--df-messenger-send-icon: #add8e6;
--df-messenger-user-message: #add8e6;
}
df-messenger:hover {
--df-messenger-button-titlebar-color: #a6daeb;
}
.content {
margin: auto;
max-width: 2200px;
width: 96vw;
}
.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
}
.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}
.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}
.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
}
.contact-wrapper > * {
padding: 1em;
}
.contact-form {
background: linear-gradient(225deg, transparent 30px, #212121 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
}
.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}
.contact-form form button {
padding: none;
width: 53%;
background: #add8e6;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 57%;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-info {
background: linear-gradient(-315deg, transparent 30px, #a7d1de 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}
.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 2em;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}
#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}
#clients img {
transition: all 0.4s ease-in-out;
}
.contact-info p {
text-align: center;
margin: 1.5rem 0 1rem 0;
color: #696969;
}
.btn:focus {
outline: none !important;
box-shadow: none !important;
}
.toggle a {
color: #dad7d7;
}
.toggle a:hover {
color: #ffffff;
}
.menu,
.submenu {
list-style-type: none;
}
.logo {
padding: 7.5px 0 7.5px 0;
}
.botonlogo {
max-width: 56px;
}
.item {
padding: 10px;
}
.item.button {
padding: 9px 5px;
}
.item:not(.button) a:hover,
.item a:hover::after {
color: #ffffff;
transition: 0.3s;
}
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
}
.menu li a {
display: block;
padding: 15px 5px;
}
.menu li.subitem a {
padding-right: -15px;
padding-left: 15px;
padding-top: 35px;
width: 100%;
}
.toggle {
order: 1;
font-size: 20px;
}
.item.button {
order: 2;
}
.item {
order: 3;
width: 100%;
text-align: center;
display: none;
}
.active .item {
display: block;
}
.button.secondary {
border-bottom: 1px solid #dad7d7;
}
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.has-submenu>a::after {
font-family: 'Font Awesome 5 Free';
font-size: 16px;
line-height: 16px;
content: '\f024';
color: #dad7d7;
padding-left: 11px;
}
.subitem a {
padding: 10px 15px;
}
.submenu-active {
border-radius: 0;
background-color: #363636;
width: 100%;
border-radius: 5px 5px 0px 0px;
}
li.has-submenu a {
color: #dad7d7 !important;
transition: 0.3s;
padding-bottom: 12px;
cursor: pointer;
}
li.has-submenu a:hover {
color: #ffffff !important;
transition: 0.3s;
cursor: pointer;
}
li.subitem a {
padding-left: 0%;
padding-right: 53px !important;
width: 100%;
}
/* Mediaqueries tablet */
#media all and (min-width: 700px) {
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 13%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}
.cookie-btn:hover {
background-color: #a6daeb;
width: 18%;
transition: 0.3s;
}
.content {
margin-left: auto;
margin-right: auto;
max-width: 2200px;
width: 96vw;
}
.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
}
.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}
.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}
.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
}
.contact-wrapper > * {
padding: 1em;
}
.contact-form {
background: linear-gradient(225deg, transparent 30px, #212121 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
padding-top: 7.1%;
}
.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}
.contact-form form button {
padding: none;
width: 34%;
background: #add8e6;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 38%;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-info {
background: linear-gradient(-315deg, transparent 30px, #a7d1de 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}
.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 5em;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}
#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}
#clients img {
transition: all 0.4s ease-in-out;
}
.contact-info p {
text-align: center;
margin: 5rem 0 1rem 0;
width: 90%;
margin-right: auto;
margin-left: auto;
color: #696969;
}
.btn:focus {
outline: none !important;
box-shadow: none !important;
}
.menu {
justify-content: center;
width: 100%;
}
.logo {
flex: 1;
}
.item.button {
width: auto;
order: 1;
display: block;
}
.toggle {
flex: 1;
text-align: right;
order: 2;
}
.menu li.button a {
padding: 10px 15px;
margin: 5px 0;
}
.button a {
background-color: #add8e6;
color: #232323;
border: 1.5px solid #add8e6;
border-radius: 4px 4px 4px 4px;
transition: 0.8s;
}
.button.secondary {
border: 0;
}
.button.secondary a {
background-color: #add8e6;
border: 1.5px solid #add8e6;
transition: 0.8s;
}
.button a:hover {
background-color: #a6daeb;
text-decoration: none;
color: #474747;
transition: 0.8s;
}
.button:not(.secondary) a:hover {
border: 1.5px solid #a6daeb;
transition: 0.8s;
}
}
/* Mediaqueries desktop */
#media all and (min-width: 960px) {
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 10%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}
.cookie-btn:hover {
background-color: #a6daeb;
width: 11%;
transition: 0.3s;
}
.content {
margin: auto;
margin-left: auto;
margin-right: auto;
max-width: 2200px;
width: 96vw;
}
.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
display: grid;
grid-template-columns: 2fr 1fr;
}
.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}
.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}
.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
padding-top: 10%;
}
.contact-wrapper > * {
padding: 1em;
}
.contact-form {
background: linear-gradient(-315deg, transparent 45px, #212121 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}
.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}
.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
padding-top: 7%;
}
.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}
.contact-form form button {
padding: none;
width: 40%;
background: #add8e6;
border: 0;
transition: 0.2s;
border-radius: 8px;
color: #3b3b3b;
margin-bottom: 6%;
}
.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 44%;
border: 0;
transition: 0.2s;
border-radius: 8px;
color: #3b3b3b;
}
.contact-info {
background: linear-gradient(225deg, transparent 45px, #a7d1de 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}
.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 25%;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}
#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}
#clients img {
transition: all 0.4s ease-in-out;
}
.contact-info p {
text-align: center;
margin: 2rem 0 1rem 0;
width: 86%;
margin-right: auto;
margin-left: auto;
color: #696969;
}
.item {
order: 1;
position: relative;
display: block;
width: auto;
}
.button {
order: 2;
}
.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background-color: #363636;
border-radius: 0px 0px 5px 5px;
}
.toggle {
display: none;
}
.boton {
background-color: #add8e6;
border: none;
color: #585858 !important;
}
.boton:hover {
background-color: #a6daeb;
border: none;
color: #585858 !important;
}
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="img/favicon.ico" /><title>Mixi</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger chat-title="Mixi" agent-id="41fe496c-6e3a-4316-aa5a-05dae8cd911d" language-code="es"></df-messenger>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-229317979-1"></script>
<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-229317979-1');</script>
<script src="https://kit.fontawesome.com/d48f664aec.js" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<link rel="preload" href="css/index.css" as="style">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul class="menu">
<li class="logo"><a class="botonlogo" href="https://www.mixi.es"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="50px" height="50px" viewBox="0 0 99 99" enable-background="new 0 0 99 99" xml:space="preserve"><path fill="#ACD7E4" d="M85.95,98.88H12.37c-6.78,0-12.28-5.5-12.28-12.28V13.02c0-6.78,5.5-12.28,12.28-12.28h73.58c6.78,0,12.28,5.5,12.28,12.28V86.6C98.23,93.38,92.73,98.88,85.95,98.88z"/><g><g><g><path fill="#1D1D1B" d="M7.96,66.3c-0.68,0-1.17-0.11-1.49-0.32s-0.53-0.5-0.64-0.85c-0.11-0.35-0.16-0.78-0.16-1.28v-21.1c0-0.46,0.05-0.86,0.16-1.2c0.11-0.34,0.33-0.59,0.67-0.77s0.84-0.27,1.52-0.27c0.78,0,1.34,0.15,1.68,0.45c0.34,0.3,0.51,0.83,0.51,1.57l-0.21,2.29c0.25-0.53,0.62-1.07,1.12-1.6c0.5-0.53,1.09-1.01,1.79-1.44c0.69-0.43,1.43-0.76,2.21-1.01c0.78-0.25,1.58-0.37,2.4-0.37c1.24,0,2.35,0.22,3.33,0.67c0.98,0.44,1.86,1.07,2.64,1.89c0.78,0.82,1.44,1.83,1.97,3.04c0.71-1.17,1.46-2.17,2.26-3.01c0.8-0.83,1.71-1.47,2.72-1.92c1.01-0.44,2.16-0.67,3.44-0.67c2.06,0,3.77,0.51,5.14,1.52c1.37,1.01,2.4,2.43,3.09,4.26c0.69,1.83,1.04,4.02,1.04,6.58v11.13c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.32,0.63-0.64,0.83s-0.83,0.29-1.54,0.29c-0.67,0-1.19-0.11-1.54-0.32c-0.36-0.21-0.58-0.5-0.67-0.85c-0.09-0.35-0.13-0.78-0.13-1.28V52.72c0-1.56-0.2-2.93-0.59-4.1c-0.39-1.17-0.96-2.08-1.71-2.72c-0.75-0.64-1.72-0.96-2.93-0.96c-1.28,0-2.41,0.32-3.38,0.96c-0.98,0.64-1.73,1.54-2.26,2.69s-0.8,2.53-0.8,4.13v11.24c0,0.53-0.11,1-0.32,1.39c-0.21,0.39-0.53,0.67-0.96,0.83c-0.43,0.16-0.96,0.19-1.6,0.08c-0.53-0.04-0.94-0.17-1.23-0.4s-0.46-0.51-0.53-0.85c-0.07-0.34-0.11-0.72-0.11-1.15V52.72c0-1.56-0.19-2.93-0.56-4.1s-0.94-2.08-1.71-2.72c-0.76-0.64-1.75-0.96-2.96-0.96c-1.28,0-2.41,0.33-3.38,0.99c-0.98,0.66-1.73,1.57-2.26,2.74c-0.53,1.17-0.8,2.52-0.8,4.05v11.19c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.63-0.67,0.83C9.2,66.2,8.67,66.3,7.96,66.3z"/><path fill="#1D1D1B" d="M52.23,34.12c-0.78,0-1.37-0.12-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.46c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.2,1-0.29,1.78-0.29c0.75,0,1.31,0.11,1.71,0.32s0.65,0.53,0.77,0.96c0.12,0.43,0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C53.6,34.02,53.01,34.12,52.23,34.12z M52.23,66.3c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V42.86c0-0.46,0.05-0.88,0.16-1.25s0.33-0.65,0.67-0.83c0.34-0.18,0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85c0.11,0.37,0.16,0.81,0.16,1.3v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C53.42,66.21,52.91,66.3,52.23,66.3z"/></g></g><g><path fill="#1D1D1B" d="M65.03,57.61l-4.59,5c-0.52,0.57-0.88,1.05-1.08,1.43c-0.2,0.39-0.2,0.75,0,1.09c0.2,0.34,0.56,0.7,1.08,1.09c0.52,0.35,0.97,0.59,1.35,0.72c0.38,0.12,0.77,0.08,1.17-0.13c0.4-0.21,0.86-0.58,1.38-1.12l7.42-8.08H65.03z"/><path fill="#1D1D1B" d="M84.36,64.04c-0.18-0.39-0.55-0.87-1.11-1.43l-8.04-8.76l8.1-8.83c0.56-0.57,0.92-1.05,1.08-1.43c0.16-0.39,0.14-0.75-0.06-1.09c-0.2-0.34-0.58-0.72-1.14-1.14c-0.76-0.57-1.38-0.81-1.86-0.72c-0.48,0.09-1.12,0.52-1.92,1.3l-7.56,8.24l-7.56-8.24c-0.48-0.53-0.9-0.9-1.26-1.12c-0.36-0.21-0.73-0.27-1.11-0.16c-0.38,0.11-0.83,0.34-1.35,0.69c-0.6,0.39-1,0.75-1.2,1.09c-0.2,0.34-0.21,0.71-0.03,1.12c0.18,0.41,0.53,0.89,1.05,1.46l8.1,8.83l-0.01,0.01l3.37,3.67l0.01-0.01l7.5,8.18c0.56,0.53,1.04,0.9,1.44,1.12c0.4,0.21,0.79,0.26,1.17,0.13c0.38-0.12,0.81-0.36,1.29-0.72c0.56-0.39,0.93-0.75,1.11-1.09C84.54,64.79,84.54,64.43,84.36,64.04z"/></g><g><g><path fill="#1D1D1B" d="M90.03,34.55c-0.78,0-1.37-0.11-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.47c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.19,1-0.29,1.79-0.29c0.75,0,1.31,0.11,1.7,0.32c0.39,0.21,0.65,0.53,0.77,0.96s0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C91.4,34.44,90.81,34.55,90.03,34.55z M90.03,66.72c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V43.28c0-0.46,0.05-0.88,0.16-1.25c0.11-0.37,0.33-0.65,0.67-0.83s0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85s0.16,0.81,0.16,1.31v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C91.21,66.63,90.71,66.72,90.03,66.72z"/></g></g></g></svg></a></li>
<li class="item">Tienda</li>
<li class="item">Calculadora</li>
<li class="item">Noticias</li>
<li class="item">Contacto</li>
<li class="item has-submenu">
<a tabindex="0">Idioma: ES</a>
<ul class="submenu">
<li class="subitem">English</li>
</ul>
</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
<script src="js/toggle.js"></script>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="js/utilidades.js"></script>
<footer class="text-center text-white">
<div class="text-center text-dark p-3" style="background-color: rgba(0, 0, 0, 0.2);">
<a class="botoncopyright">Mixi © | 2022</a>
</div>
</footer>
<script src="js/toggle.js"></script>
</body>
</html>
Have you tried to add transition to the nav?
If not try
Nav{transition:easy-in-out all 0.5s}
Related
Footer is floating in middle of page despite CSS
I am fairly new to HTMl and CSS. I had my footer stuck to the bottom of the page no problem and then something changed and I cannot figure it out. When I go to a page without a lot of content the footer sits in the middle of the page. On pages with content, it works as it should. I have read countless other posts with the same issue and nothing seems to work. Using "position:fixed" makes the footer stuck to the bottom of the "viewport" not the page itself. Thus when I switch to another page with scrollable content, the footer shows itself behind the page content. I've tried adding "overflow:hidden", "bottom:0;", "left:0" and "right:0" to .main-footer and that doesn't fix it. I don't know what I'm missing. I have already spent a few hours looking up answers and trying to solve this issue.
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Abel', sans-serif;
color: #777;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
/* Styles for navigation menus */
nav ul {
margin: 0;
}
nav li{
display: inline-block;
}
nav a {
display: inline-flex;
padding: .5em;
margin-top: 5px;
margin-bottom: 5px;
color: white;
text-decoration: none;
transition: 350ms;
}
nav a:hover {
background-color: rgba(215, 200, 200, .3);
border-radius: 2px;
}
/*Style for MAIN navigation menu*/
.main-nav {
text-align: center;
font-size: 1.1em;
font-weight: lighter;
border-bottom: 1px solid rgba(215, 200, 200, .3);
}
.main-nav li {
padding: 0 5%;
}
.main-header {
background-image: url('headerfooterimages/headerpicture.jpg');
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
background-blend-mode: multiply;
padding-bottom: 25px;
border-bottom: 1px solid black;
}
/* Style for Page Title/Logo */
.titleLogo {
text-align: center;
margin: auto;
font-size: 4em;
font-family: 'Bebas Neue';
color: white;
}
.titleLogo-large {
font-size: 6em;
}
/*Styles for sections of content on page*/
.content-section {
margin: 1em;
padding: 2em;
}
.content-container {
max-width: 900px;
margin: 0 auto;
padding: 0 1.5em;
}
.section-header {
font-family: Impact;
font-weight: normal;
color: rgb(34, 34, 34);
}
/*Styling the footer for each page*/
.main-footer {
background-color: rgb(45, 45, 45);
padding: 5px;
position: relative;
bottom: 0;
width: 100vw;
height: 75px;
border-top: 1px solid black;
margin: auto;
}
.footer-text {
font-size: 25px;
color: rgba(128, 128, 128);
display: inline-flex;
}
.footer-text:hover {
text-shadow: 0px 0px 40px rgba(255, 255, 255, 0.75);
cursor: crosshair;
color:rgb(188, 188, 188);
}
.main-footer-container {
display: flex;
align-items: center;
}
.main-footer-container ul {
flex-grow: 1;
text-align: end;
}
/*Styling the social media links in the footer*/
.footer-nav li {
list-style: none;
display: inline-flex;
transition: 350ms;
}
.footer-nav img {
border-radius: 5px;
width: 30px;
height: 30px;
}
.footer-nav li:hover {
background-color: rgba(215, 200, 200, .3);
border-radius: 5px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
}
/*Styling buttons across the whole site*/
.btn {
background-color: #349aff;
border: none;
border-radius: 1em;
color: white;
padding: 8px 16px;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 8px;
font-weight: bold;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.btn:hover {
background-color: #2090ff;
cursor: pointer;
box-shadow: none;
}
/*Styling the cart menu option in the main navigation*/
.cart-container{
display: inline-flex;
margin: auto;
}
.cart-icon {
float: left;
clear: left;
height: 25px;
}
.cart-text {
display:inline-block;
color: white;
padding: 2px;
margin-top: 1px;
}
.cart-text:hover {
text-decoration: underline;
}
/*Styling shop items*/
.shop-item {
display: block;
margin: 50px;
}
.shop-item-image {
display: block;
margin: 10px;
height: 200px;
}
.shop-item-title {
display: block;
text-align: center;
width: 100%;
font-weight: bold;
font-size: 1.1em;
color: #333;
margin-bottom: 5px;
}
.shop-item-details {
display: flex;
align-items: center;
}
.shop-item-price {
display: block;
text-align: center;
color: #333;
width: 50%;
}
.shop-item-button {
display: block;
}
.shop-items {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
/*Styling the image carousel*/
.carousel {
width: 600px;
height: 400px;
position: relative;
display: flex;
}
.carousel > ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.carousel-container {
margin: auto;
align-items: center;
}
/*Styling the buttons on the carousel*/
.carousel-button {
position: absolute;
padding: 0 .25rem;
z-index: 2;
background: none;
background-color: rgba(0, 0, 0, .1);
border: none;
border-radius: .25rem;
font-size: 2.5rem;
top: 50%;
transform: translateY(-120%);
color: rgba(255, 255, 255, .5);
cursor: pointer;
}
.carousel-button:hover, .carousel-button:focus {
color: white;
background-color: rgba(0, 0, 0, .2);
}
.carousel-button:focus {
outline: 1px solid black;
}
.carousel-button.prev {
left: 1rem;
}
.carousel-button.next {
right: 12rem;
}
/*Styling and formatting the next image effect for the image carousel*/
.slide {
position: absolute;
inset: 0;
opacity: 0;
object-fit: fill;
transition: 400ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide > img {
display: inline-block;
width: 70%;
height: 80%;
border-radius: 10px;
object-fit: cover;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
.slide[data-active] {
opacity: 1;
z-index: 1;
transition-delay: 0ms;
}
<!DOCTYPE html>
<html lang = "enUS">
<head>
<title>Modern Style</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abel&family=Bebas+Neue" rel="stylesheet">
<link rel="favicon" href="favicon.ico">
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js" defer></script>
</head>
<body>
<header class="main-header">
<nav class="nav main-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>STORE</li>
<li class="cart-container"><a href="cart.html"><img class="cart-icon" src="headerfooterimages/cart.png" alt="A shopping cart icon">
<div class="cart-text">Shopping Cart</div></a></li>
</ul>
</nav>
<h1 class="titleLogo titleLogo-large">Modern Style Website</h1>
</header>
<section class="content-section content-container">
<h2 class="section-header">ABOUT</h2>
<p>
This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.
This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.
This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.
This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.
This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.
This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.
</p>
</section>
</body>
<footer class="main-footer">
<div class="main-footer-container">
<h2 class="footer-text">Modern Style Website</h2>
<ul class="nav footer-nav">
<li><img src="headerfooterimages/Facebook-Logo.png"></li>
<li><img src="headerfooterimages/Instagram-Logo.png"></li>
<li><img src="headerfooterimages/Twitter-Logo.png"></li>
</ul>
</div>
</footer>
</html>
Seeing as you have declared the body to be 100vh, you can utilize this empty space with margin-top: auto.
On main-footer, remove margin: auto and replace it with margin-top: auto. This way, it will convert the remaining space on the body element into a margin-top-value for the main-footer element.
On another note,
make sure to include the <footer>-element BEFORE your closing </body>-tag, the footer is supposed to be inside the <body>-element.
Also, in your CSS reset, I would consider adding margin: 0; to avoid white bars on your site.
Codepen (because the code snippet is so long): https://codepen.io/sigurdmazanti/pen/ZErJzEK
.main-footer {
background-color: rgb(45, 45, 45);
padding: 5px;
position: relative;
bottom: 0;
width: 100vw;
height: 75px;
border-top: 1px solid black;
/*margin: auto;*/
margin-top: auto;
}
just use this css code:
i have added multiple values to body and remove margin from footer
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Abel', sans-serif;
color: #777;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
flex-wrap: nowrap;
align-content: space-between;
justify-content: space-between;
align-items: stretch;
}
/* Styles for navigation menus */
nav ul {
margin: 0;
}
nav li{
display: inline-block;
}
nav a {
display: inline-flex;
padding: .5em;
margin-top: 5px;
margin-bottom: 5px;
color: white;
text-decoration: none;
transition: 350ms;
}
nav a:hover {
background-color: rgba(215, 200, 200, .3);
border-radius: 2px;
}
/*Style for MAIN navigation menu*/
.main-nav {
text-align: center;
font-size: 1.1em;
font-weight: lighter;
border-bottom: 1px solid rgba(215, 200, 200, .3);
}
.main-nav li {
padding: 0 5%;
}
.main-header {
background-image: url('headerfooterimages/headerpicture.jpg');
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
background-blend-mode: multiply;
padding-bottom: 25px;
border-bottom: 1px solid black;
}
/* Style for Page Title/Logo */
.titleLogo {
text-align: center;
margin: auto;
font-size: 4em;
font-family: 'Bebas Neue';
color: white;
}
.titleLogo-large {
font-size: 6em;
}
/*Styles for sections of content on page*/
.content-section {
margin: 1em;
padding: 2em;
}
.content-container {
max-width: 900px;
margin: 0 auto;
padding: 0 1.5em;
}
.section-header {
font-family: Impact;
font-weight: normal;
color: rgb(34, 34, 34);
}
/*Styling the footer for each page*/
.main-footer {
background-color: rgb(45, 45, 45);
padding: 5px;
position: relative;
bottom: 0;
width: 100vw;
height: 75px;
border-top: 1px solid black;
}
.footer-text {
font-size: 25px;
color: rgba(128, 128, 128);
display: inline-flex;
}
.footer-text:hover {
text-shadow: 0px 0px 40px rgba(255, 255, 255, 0.75);
cursor: crosshair;
color:rgb(188, 188, 188);
}
.main-footer-container {
display: flex;
align-items: center;
}
.main-footer-container ul {
flex-grow: 1;
text-align: end;
}
/*Styling the social media links in the footer*/
.footer-nav li {
list-style: none;
display: inline-flex;
transition: 350ms;
}
.footer-nav img {
border-radius: 5px;
width: 30px;
height: 30px;
}
.footer-nav li:hover {
background-color: rgba(215, 200, 200, .3);
border-radius: 5px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
}
/*Styling buttons across the whole site*/
.btn {
background-color: #349aff;
border: none;
border-radius: 1em;
color: white;
padding: 8px 16px;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 8px;
font-weight: bold;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.btn:hover {
background-color: #2090ff;
cursor: pointer;
box-shadow: none;
}
/*Styling the cart menu option in the main navigation*/
.cart-container{
display: inline-flex;
margin: auto;
}
.cart-icon {
float: left;
clear: left;
height: 25px;
}
.cart-text {
display:inline-block;
color: white;
padding: 2px;
margin-top: 1px;
}
.cart-text:hover {
text-decoration: underline;
}
/*Styling shop items*/
.shop-item {
display: block;
margin: 50px;
}
.shop-item-image {
display: block;
margin: 10px;
height: 200px;
}
.shop-item-title {
display: block;
text-align: center;
width: 100%;
font-weight: bold;
font-size: 1.1em;
color: #333;
margin-bottom: 5px;
}
.shop-item-details {
display: flex;
align-items: center;
}
.shop-item-price {
display: block;
text-align: center;
color: #333;
width: 50%;
}
.shop-item-button {
display: block;
}
.shop-items {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
/*Styling the image carousel*/
.carousel {
width: 600px;
height: 400px;
position: relative;
display: flex;
}
.carousel > ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.carousel-container {
margin: auto;
align-items: center;
}
/*Styling the buttons on the carousel*/
.carousel-button {
position: absolute;
padding: 0 .25rem;
z-index: 2;
background: none;
background-color: rgba(0, 0, 0, .1);
border: none;
border-radius: .25rem;
font-size: 2.5rem;
top: 50%;
transform: translateY(-120%);
color: rgba(255, 255, 255, .5);
cursor: pointer;
}
.carousel-button:hover, .carousel-button:focus {
color: white;
background-color: rgba(0, 0, 0, .2);
}
.carousel-button:focus {
outline: 1px solid black;
}
.carousel-button.prev {
left: 1rem;
}
.carousel-button.next {
right: 12rem;
}
/*Styling and formatting the next image effect for the image carousel*/
.slide {
position: absolute;
inset: 0;
opacity: 0;
object-fit: fill;
transition: 400ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide > img {
display: inline-block;
width: 70%;
height: 80%;
border-radius: 10px;
object-fit: cover;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
.slide[data-active] {
opacity: 1;
z-index: 1;
transition-delay: 0ms;
}
Use this CSS. It will also top align your content-section. I fixed horizontal scroll as well. Just make sure to keep your website content inside of body tags. Your footer was outside of the body tag.
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Abel', sans-serif;
color: #777;
}
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* Styles for navigation menus */
nav ul {
margin: 0;
}
nav li{
display: inline-block;
}
nav a {
display: inline-flex;
padding: .5em;
margin-top: 5px;
margin-bottom: 5px;
color: white;
text-decoration: none;
transition: 350ms;
}
nav a:hover {
background-color: rgba(215, 200, 200, .3);
border-radius: 2px;
}
/*Style for MAIN navigation menu*/
.main-nav {
text-align: center;
font-size: 1.1em;
font-weight: lighter;
border-bottom: 1px solid rgba(215, 200, 200, .3);
}
.main-nav li {
padding: 0 5%;
}
.main-header {
background-image: url('headerfooterimages/headerpicture.jpg');
background-size: cover;
background-color: rgba(0, 0, 0, 0.5);
background-blend-mode: multiply;
padding-bottom: 25px;
border-bottom: 1px solid black;
}
/* Style for Page Title/Logo */
.titleLogo {
text-align: center;
margin: auto;
font-size: 4em;
font-family: 'Bebas Neue';
color: white;
}
.titleLogo-large {
font-size: 6em;
}
/*Styles for sections of content on page*/
.content-section {
margin: 1em;
padding: 2em;
width: 100%;
box-sizing: border-box;
position: relative;
flex-grow: 1;
}
.content-container {
max-width: 900px;
margin: 0 auto;
padding: 0 1.5em;
box-sizing: border-box;
}
.section-header {
font-family: Impact;
font-weight: normal;
color: rgb(34, 34, 34);
}
/*Styling the footer for each page*/
.main-footer {
background-color: rgb(45, 45, 45);
padding: 5px;
position: relative;
bottom: 0;
width: 100%;
height: 75px;
border-top: 1px solid black;
margin: auto;
}
.footer-text {
font-size: 25px;
color: rgba(128, 128, 128);
display: inline-flex;
}
.footer-text:hover {
text-shadow: 0px 0px 40px rgba(255, 255, 255, 0.75);
cursor: crosshair;
color:rgb(188, 188, 188);
}
.main-footer-container {
display: flex;
align-items: center;
}
.main-footer-container ul {
flex-grow: 1;
text-align: end;
}
/*Styling the social media links in the footer*/
.footer-nav li {
list-style: none;
display: inline-flex;
transition: 350ms;
}
.footer-nav img {
border-radius: 5px;
width: 30px;
height: 30px;
}
.footer-nav li:hover {
background-color: rgba(215, 200, 200, .3);
border-radius: 5px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
}
/*Styling buttons across the whole site*/
.btn {
background-color: #349aff;
border: none;
border-radius: 1em;
color: white;
padding: 8px 16px;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 8px;
font-weight: bold;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}
.btn:hover {
background-color: #2090ff;
cursor: pointer;
box-shadow: none;
}
/*Styling the cart menu option in the main navigation*/
.cart-container{
display: inline-flex;
margin: auto;
}
.cart-icon {
float: left;
clear: left;
height: 25px;
}
.cart-text {
display:inline-block;
color: white;
padding: 2px;
margin-top: 1px;
}
.cart-text:hover {
text-decoration: underline;
}
/*Styling shop items*/
.shop-item {
display: block;
margin: 50px;
}
.shop-item-image {
display: block;
margin: 10px;
height: 200px;
}
.shop-item-title {
display: block;
text-align: center;
width: 100%;
font-weight: bold;
font-size: 1.1em;
color: #333;
margin-bottom: 5px;
}
.shop-item-details {
display: flex;
align-items: center;
}
.shop-item-price {
display: block;
text-align: center;
color: #333;
width: 50%;
}
.shop-item-button {
display: block;
}
.shop-items {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
/*Styling the image carousel*/
.carousel {
width: 600px;
height: 400px;
position: relative;
display: flex;
}
.carousel > ul {
margin: 0px;
padding: 0px;
list-style: none;
}
.carousel-container {
margin: auto;
align-items: center;
}
/*Styling the buttons on the carousel*/
.carousel-button {
position: absolute;
padding: 0 .25rem;
z-index: 2;
background: none;
background-color: rgba(0, 0, 0, .1);
border: none;
border-radius: .25rem;
font-size: 2.5rem;
top: 50%;
transform: translateY(-120%);
color: rgba(255, 255, 255, .5);
cursor: pointer;
}
.carousel-button:hover, .carousel-button:focus {
color: white;
background-color: rgba(0, 0, 0, .2);
}
.carousel-button:focus {
outline: 1px solid black;
}
.carousel-button.prev {
left: 1rem;
}
.carousel-button.next {
right: 12rem;
}
/*Styling and formatting the next image effect for the image carousel*/
.slide {
position: absolute;
inset: 0;
opacity: 0;
object-fit: fill;
transition: 400ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide > img {
display: inline-block;
width: 70%;
height: 80%;
border-radius: 10px;
object-fit: cover;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}
.slide[data-active] {
opacity: 1;
z-index: 1;
transition-delay: 0ms;
}
Why is the Flex text overlapping when Browser size is reduced?
If you reduce browser size, the text of "Discover" and "How it Works" overlap so that it looks like it says "Discover it works" "How".
How do I make it so that instead, the text of these Li items always stay separated? I tried doing flex: nowrap property but it had no effect.
Here is the codepen to show what I mean: https://codepen.io/hiarooo/pen/GRrzapM
Thanks for any help.
HTML
<header>
<div class="container">
<nav>
<div class="left-content">
<div class="header-user">
<img src="HOME/DoLogo.png" alt="logo" width="50px">
<p><span>Do</span></p>
</div>
<div class="header-tablet">
<div class="vl"></div>
<ul>
<li>Discover</li>
<li>How it works</li>
</ul>
</div>
</div>
<div class="right-content">
<div class="search">
<input type="text" placeholder="Search">
<i class="fas fa-search"></i>
</div>
<img id="notifications" src="HOME/Notification.svg" alt="Notification">
<div class="header-user">
<img src="HOME/uploadnav.png" alt="user">
</div>
<img class="mob" src="HOME/uploadnav.png" alt="user">
<img src="HOME/menu.svg" alt="hamburgermenu">
</div>
</nav>
</div>
</header>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 78%;
margin: 0 auto;
}
#media (max-width: 1330px) {
.container {
width: 90%;
margin: 0 auto;
}
}
/* Header */
header {
height: 80px;
border: 1px solid #e6e8ec;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#notifications{
padding-right:20px;
}
.search {
display: inline;
height: 40px;
width: 256px;
border-radius: 8px;
padding: 10px 12px 10px 16px;
border: 2px solid #e6e8ec;
outline: none;
display: flex;
justify-content: space-between;
margin-right: 18px;
margin-left: 20px;
}
.search input {
outline: none;
border: none;
}
.search i {
color: #777e90;
}
.search:hover {
cursor: pointer;
}
.search input::-webkit-input-placeholder {
font-family: "Poppins", sans-serif;
color: #777e90;
font-size: 12px;
}
.button {
background-color: #3772ff;
padding: 12px 16px;
border-radius: 90px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
text-align: center;
color: #fcfcfd;
text-decoration: none;
margin-left: 18px;
margin-right: 10px;
display: inline;
}
.header-user {
border-radius: 90px;
padding: 4px 12px 4px 4px;
border: 2px #e6e8ec solid;
width: 147px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.header-user p {
padding-left: 6px;
display: inline-block;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
}
.header-user span {
color: #45b26b;
padding-left: 2px;
}
.left-content {
display: flex;
height: 80px;
justify-content: center;
align-items: center;
}
.mob {
display: none;
}
.vl {
border-left: 2px #e6e8ec solid;
height: 40px;
margin: 0 32px;
}
.left-content ul {
list-style: none;
}
.left-content ul li {
display: inline;
}
.left-content ul li a {
text-decoration: none;
padding-right: 32px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #777e90;
}
.right-content {
display: flex;
height: 80px;
justify-content: center;
align-items: center;
}
.right-content img {
cursor: pointer;
}
.menu {
display: none;
}
.header-tablet {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
}
.topFont{
font-size: 14px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
text-decoration: none;
color: #23262f;
}
.btn-1 {
font-size: 14px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
text-decoration: none;
color: #23262f;
border: 2px solid #e6e8ec;
border-radius: 90px;
display: inline-block;
padding: 12px 16px;
margin-bottom: 0px;
}
.btn-1:hover {
background-color: #3772ff;
color: #fcfcfd;
/*border: none;*/
transition:all .2s ease;
-webkit-transition-delay:all .2s ease;
-moz-transition-delay:all .2s ease;
-ms-transition-delay:all .2s ease;
-o-transition-delay:all .2s ease;
}
/* input */
.round {
max-width: 100%;
height: 48px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
border: 3px #f4f4f4 solid;
border-radius: 90px;
margin: 20px 0px;
}
.round i {
color: rgba(0, 0, 0, 0.3);
padding: 10px;
line-height: 80px;
}
.round input {
outline: none;
border: none;
padding-left: 16px;
}
.search-btn {
margin-top: 0px;
margin-bottom: 0px;
padding-left: 12px;
}
.round input::-webkit-input-placeholder {
font-family: "Poppins", sans-serif;
color: #777e90;
font-size: 12px;
}
.search-icon:hover {
cursor: pointer;
color: #3772ff;
}
#media (max-width: 1170px) {
.round {
width: 200px;
}
}
#media (max-width: 960px) {
.round {
width: 200px;
}
}
#media (max-width: 779px) {
.container {
width: 90%;
margin: 0 auto;
}
.header-tablet{
display:none;
}
.search {
display: none;
}
.menu {
display: inline;
}
.button {
display: none;
}
/* header user */
.header-user {
display: none;
}
Change this CSS setting:
.left-content ul li {
display: inline;
}
to
.left-content ul li {
display: inline-block;
}
That way the contents of that li element will form a (inline) block that can only wrap to a new line as a whole.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 78%;
margin: 0 auto;
}
#media (max-width: 1330px) {
.container {
width: 90%;
margin: 0 auto;
}
}
/* Header */
header {
height: 80px;
border: 1px solid #e6e8ec;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#notifications {
padding-right: 20px;
}
.search {
display: inline;
height: 40px;
width: 256px;
border-radius: 8px;
padding: 10px 12px 10px 16px;
border: 2px solid #e6e8ec;
outline: none;
display: flex;
justify-content: space-between;
margin-right: 18px;
margin-left: 20px;
}
.search input {
outline: none;
border: none;
}
.search i {
color: #777e90;
}
.search:hover {
cursor: pointer;
}
.search input::-webkit-input-placeholder {
font-family: "Poppins", sans-serif;
color: #777e90;
font-size: 12px;
}
.button {
background-color: #3772ff;
padding: 12px 16px;
border-radius: 90px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
text-align: center;
color: #fcfcfd;
text-decoration: none;
margin-left: 18px;
margin-right: 10px;
display: inline;
}
.header-user {
border-radius: 90px;
padding: 4px 12px 4px 4px;
border: 2px #e6e8ec solid;
width: 147px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.header-user p {
padding-left: 6px;
display: inline-block;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
}
.header-user span {
color: #45b26b;
padding-left: 2px;
}
.left-content {
display: flex;
height: 80px;
justify-content: center;
align-items: center;
}
.mob {
display: none;
}
.vl {
border-left: 2px #e6e8ec solid;
height: 40px;
margin: 0 32px;
}
.left-content ul {
list-style: none;
}
.left-content ul li {
display: inline-block;
}
.left-content ul li a {
text-decoration: none;
padding-right: 32px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 16px;
color: #777e90;
}
.right-content {
display: flex;
height: 80px;
justify-content: center;
align-items: center;
}
.right-content img {
cursor: pointer;
}
.menu {
display: none;
}
.header-tablet {
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
}
.topFont {
font-size: 14px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
text-decoration: none;
color: #23262f;
}
.btn-1 {
font-size: 14px;
font-family: "DM Sans", sans-serif;
font-weight: 700;
text-decoration: none;
color: #23262f;
border: 2px solid #e6e8ec;
border-radius: 90px;
display: inline-block;
padding: 12px 16px;
margin-bottom: 0px;
}
.btn-1:hover {
background-color: #3772ff;
color: #fcfcfd;
/*border: none;*/
transition: all .2s ease;
-webkit-transition-delay: all .2s ease;
-moz-transition-delay: all .2s ease;
-ms-transition-delay: all .2s ease;
-o-transition-delay: all .2s ease;
}
/* input */
.round {
max-width: 100%;
height: 48px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
border: 3px #f4f4f4 solid;
border-radius: 90px;
margin: 20px 0px;
}
.round i {
color: rgba(0, 0, 0, 0.3);
padding: 10px;
line-height: 80px;
}
.round input {
outline: none;
border: none;
padding-left: 16px;
}
.search-btn {
margin-top: 0px;
margin-bottom: 0px;
padding-left: 12px;
}
.round input::-webkit-input-placeholder {
font-family: "Poppins", sans-serif;
color: #777e90;
font-size: 12px;
}
.search-icon:hover {
cursor: pointer;
color: #3772ff;
}
#media (max-width: 1170px) {
.round {
width: 200px;
}
}
#media (max-width: 960px) {
.round {
width: 200px;
}
}
#media (max-width: 779px) {
.container {
width: 90%;
margin: 0 auto;
}
.header-tablet {
display: none;
}
.search {
display: none;
}
.menu {
display: inline;
}
.button {
display: none;
}
/* header user */
.header-user {
display: none;
}
<header>
<div class="container">
<nav>
<div class="left-content">
<div class="header-user">
<img src="HOME/DoLogo.png" alt="logo" width="50px">
<p><span>Do</span></p>
</div>
<div class="header-tablet">
<div class="vl"></div>
<ul>
<li>Discover</li>
<li>How it works</li>
</ul>
</div>
</div>
<div class="right-content">
<div class="search">
<input type="text" placeholder="Search">
<i class="fas fa-search"></i>
</div>
<img id="notifications" src="HOME/Notification.svg" alt="Notification">
<div class="header-user">
<img src="HOME/uploadnav.png" alt="user">
</div>
<img class="mob" src="HOME/uploadnav.png" alt="user">
<img src="HOME/menu.svg" alt="hamburgermenu">
</div>
</nav>
</div>
</header>
Why doesn't my anchor navigate in the dropdown?
In CSS #lang-dropdown-button:focus should set pointer-events: all in #router-list , but it seems it doesn't work. The anchor doesn't navigate to the German on the dropdown. Why is that so?
*{
margin: 0px;
padding: 0px;
border:none;
}
body {
background-image: url(assets/bg.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
#header {
width: 94%;
height: 50px;
border-radius: 34px;
margin: 35px 3% 0px;
background-color: rgb(255, 255, 255);
display: flex;
justify-content: space-between;
background-size: cover;
filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.1));
position: relative;
z-index: 100;
}
#body {
width: 94%;
height: 1000px;
margin: 35px 3% 35px;
border-radius: 25px;
background-color: rgb(255, 255, 255);
filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.1));
}
#logo {
align-self: center;
height: 70px;
width: 70px;
border-radius: 14px;
background-size: cover;
cursor: pointer;
}
#cont1 {
display: flex;
align-self: center;
}
#cont2 {
align-self: center;
}
#lang-dropdown {
height: fit-content;
width: fit-content;
flex-direction: column;
display: flex;
margin-right: 20px;
border-radius: 15px;
}
#elipse {
height: 10px;
width: 10px;
border-radius: 100%;
align-self: center;
background-color: #333333;
}
#title {
align-self: center;
margin-left: 10px;
display: flex;
flex-direction: row;
}
#privacy {
margin-left: 14px;
font-family: Ubuntu-Md;
font-style: normal;
line-height: 1;
font-size: 18px;
position: absolute;
align-self: center;
color: #333333;
}
#lang {
font-family: Ubuntu-Md;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 21px;
align-self: center;
color: #333333;
}
#text-container {
padding: 0px;
}
#policy-date {
font-family: Ubuntu;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 21px;
align-self: center;
color: #838383;
margin-top: 10px;
padding-left: 3.5%;
padding-bottom: 10px;
}
#text1 {
font-family: Ubuntu-Md;
font-style: normal;
font-weight: bold;
font-size: 28px;
align-self: center;
color: #333333;
padding: 3% 3% 0px;
}
#body-header {
width: 100%;
/* border-bottom: #d6d6d6 solid 1px; */
}
#globe {
color: #333333;
margin-left: 3px;
width: 25px;
height: 25px;
}
#arrow {
color: #333333;
margin-left: 1px;
margin-top: 1px;
align-self: center;
}
#lang-dropdown-button {
height: fit-content;
width: fit-content;
justify-content: space-around;
flex-direction: row;
display: flex;
background-color: rgba(255, 255, 255, 0);
cursor: pointer;
border-radius: 15px;
transition: all 0.6s ease;
width: 110px;
}
#router-list ul {
position: absolute;
background-color: #E7E7E7;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
height: 35px;
width: 110px;
border-radius: 0px 0px 15px 15px;
}
#router-list li {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.4s ease;
}
#last {
border-radius: 0px 0px 15px 15px;
}
#router-list {
position: relative;
z-index: 50;
opacity: 0;
transform: translateY(-10px);
transition: all 0.4s ease;
pointer-events: none;
}
#last #lang-btn {
padding-bottom: 8px;
}
#router-list li:hover {
background-color: #d4d1d1;
border-radius: 0px;
}
#router-list #last:hover {
background-color: #d4d1d1;
border-radius: inherit;
}
/* #lang-dropdown-button:focus + #lang-dropdown{
border-radius: 15px 15px 0px 0px;
} */
#lang-dropdown-button:focus {
outline: none;
background-color: #E7E7E7;
border-radius: 15px 15px 0px 0px;
}
#lang-dropdown-button:focus + #router-list {
opacity: 1;
pointer-events: all;
z-index: 200;
transform: translateY(0px);
}
#lang-dropdown-button:hover{
background-color: #d4d1d1;
}
#lang-btn {
background-color: rgba(255, 255, 255, 0);
width: 100%;
height: 100%;
font-family: Ubuntu-Md;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 21px;
text-decoration: none;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
}
#lang-btn:hover {
cursor: pointer;
}
#font-face {
font-family: "Ubuntu-md";
src: url("assets/Ubuntu-Medium.ttf");
}
#font-face {
font-family: "Ubuntu";
src: url("assets/Ubuntu-Regular.ttf");
}
#media only screen and (max-width: 370px){
#privacy {
margin-right: 127px;
font-size: 16px;
}
#text1 {
font-size: 24px;
}
}
#media only screen and (max-width: 620px){
#text1 {
padding: 5% 5% 0px;
}
#policy-date {
padding: 0% 6% 10px;
}
}
#media only screen and (max-width: 325px){
#text1 {
padding: 6% 6% 0px;
}
#policy-date {
padding: 0% 7% 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style_v2.css" rel="stylesheet"/>
<title>Document</title>
</head>
<body>
<div id="header">
<div id="cont1">
<img id="logo" src="assets/logo.png" >
<div id ="title"><div id="elipse"></div> <div id="privacy">Privacy Policy</div> </div>
</div>
<div id="cont2">
<div id="lang-dropdown">
<button id="lang-dropdown-button" data-toggle="dropdown" >
<img id="arrow" src="assets/keyboard_arrow_down-24px 1.svg"/>
<div id="lang">English</div>
<img id="globe" src="assets/globe-24px.svg"/>
</button>
<div id="router-list" >
<ul>
<li id="last">Deutsch</li>
</ul>
</div>
</div>
</div>
</div>
<div id="box"></div>
<div id="body">
<div id="text-container">
<div id="body-header">
<div id="text1">title</div>
<div id="policy-date">Effective Date: m d, y</div>
</div>
<div></div>
</div>
</div>
</body>
</html>
i believe it has something to do with the hierarchy of the css combinators
https://www.w3schools.com/css/css_combinators.asp
i couldn't get it work either.. maybe because the combinator is acting on the div... but the links are actually li's inside a ul. thats just a guess tho.
I did however find you a work around. Switch to visibility:hidden instead of pointer-events. i tested it in VS code
it solves your hidden link being clickable thing
#router-list {
position: relative;
top: 20px;
z-index: 50;
opacity: 0;
transform: translateY(-10px);
transition: all 0.4s ease;
visibility: hidden;
/* pointer-events: none; */
}
#lang-dropdown-button:focus + #router-list {
opacity: 1;
/* pointer-events: all; */
visibility: visible;
z-index: 200;
transform: translateY(0px);
}
Just Change the pointer-events: none; to pointer-events: all;
Working on navbar and grid responsiveness
I can't seem to solve what was previously not a problem:
My navbar is fullwidth and mobile-y even above the breaking point
My grid boxes are not responsive on mobile even though I have set it to 1fr column and (6, fr) row.
https://codepen.io/arian-wardak/pen/QWKyzdj
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>Services - Quantum Marketing</title>
<link rel="stylesheet" type="text/css" href="css/quantum.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<nav>
<ul>
<li>Home</li>
<li><a class="active" href="services.html">Services</a></li>
<li>Contact</li>
<li>Account</li>
<li>Cite</li>
</ul>
</nav>
<div class="grid-services">
<div class="grid-item item-1">
<img src=img/coding.png alt="Coding Icon" width="64" height="51">
<h4>Web Development</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-2">
<img src=img/search.png alt="Search Icon with a Dollar Sign" width="64" height="64">
<h4>Search Engine Optimization</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-3">
<img src=img/copywriting.png alt="Notepad and Pencil Icon" width=64 height=57>
<h4>Copywriting</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-4">
<img src=img/email.png alt="Email Icon" width=64 height=64>
<h4>Email Marketing</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-5">
<img src=img/social.png alt="Social Media Icon" width=64 height=45>
<h4>Social Media Marketing</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-6">
<img src=img/retargeting.png alt="Bullseye Icon" width=64 height=64>
<h4>Retargeting</h4>
<div class="button">Choose</div>
</div>
</div>
</main>
<footer>
Copyright © 2020 Ariana Wardak. All Rights Reserved. | Privacy Policy Disclaimer | Designed by Ariana
</footer>
</body>
</html>
* {
box-sizing:border-box;
margin: 0;
font-family: 'Montserrat', sans-serif;
padding: 0;
outline: none;
}
body {
background-color: dimgray;
color: black;
}
main {
grid-area: main;
text-align:center;
overflow: hidden;
white-space: normal;
}
h1 {
padding: 20px;
color: white;
text-align: center;
}
h3 {
color: white;
text-align: center;
}
h4 {
padding: 30px;
color: white;
text-align: center;
}
.content {
margin: 0;
padding: 0;
background-color: white;
color: black;
}
.content img {
height: auto;
padding-right: 20px;
margin: 0;
}
nav {
overflow: hidden;
background-color: deepskyblue;
font-size: smaller;
}
ul {
display:block;
text-decoration: none;
text-align: center;
list-style: none;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
padding: 15px;
}
li a:hover {
background-color: deepskyblue;
}
li a.active {
background-color: navy;
}
.hero {
text-align: center;
background-color: navy;
padding: 200px 0;
}
.faq {
padding: 50px;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
min-height: 300px;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
text-align: left;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
.grid-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 300px 300px;
padding: 20px;
height: 100vh;
grid-gap: 20px;
}
.grid-item {
background-color: navy;
padding: 20px;
}
button,
.button,
.button-services,
.button-contact {
background-color: deepskyblue;
display: inline-block;
padding:10px 25px;
margin: 15px 20px;
font-weight: bold;
border-radius: 5px;
color: white;
text-decoration: none;
}
button:hover,
.button:hover,
.button-services:hover,
.button-contact:hover {
background-color: dimgray;
color: deepskyblue;
cursor: pointer;
transition: all 0.1s ease;
}
.faq {
padding: 50px;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
min-height: 300px;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
text-align: left;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
.contact {
max-width: 700px;
margin: auto;
}
.form {
max-width: 700px;
text-align: center;
margin: 20px auto;
display: grid;
grid-template-columns: 1fr 1em 2fr;
grid-gap: 0.3em 0.6em;
grid-auto-flow: dense;
align-items: center;
}
input, label {
display: block;
}
textarea {
resize: vertical;
max-height: 300px;
}
.profile {
background-color: white;
padding: 20px;
margin: auto;
color: black;
max-width: 800px;
text-align: center;
}
.profile h4 {
color: black;
}
.citations {
background-color: white;
padding: 20px;
margin: auto;
color: black;
max-width: 800px;
text-align: center;
}
.wrapper{
position: relative;
width: 500px;
background-color: navy;
margin: auto;
}
.profile_card{
height: 400px;
background: navy;
padding: 50px 25px;
position: relative;
z-index: 1;
padding: 20px;
}
.profile_card{
color: #fff;
text-align: center;
}
.profile_card .profile_img img{
width: 80px;
border-radius: 50%;
display: block;
margin: 0 auto;
}
.profile_card .profile_img .name{
font-size: 24px;
font-weight: 500;
margin: 15px 0 5px;
}
.profile_card .profile_img .place{
font-size: 14px;
font-weight: 300;
}
.profile_card .place .icon{
margin-right: 10px;
}
.profile_icons{
display: flex;
margin: 30px 0;
justify-content: center;
}
.profile_icons .profile_item{
margin-right: 15px;
}
.profile_icons .profile_item:last-child{
margin-right: 0;
}
.profile_icons .icon,
.profile_icons .number{
font-size: 24px;
}
.profile_icons .title{
font-size: 12px;
text-transform: uppercase;
margin: 10px 0;
}
.profile_btn{
background-color: deepskyblue;
padding: 10px;
border-radius: 25px;
width: 200px;
margin: 0 auto;
color: white;
cursor: pointer;
}
.profile_btn:hover{
background: #ffc208;
}
.settings_btn{
width: 50px;
height: 52px;
position: absolute;
bottom: 20px;
left: 225px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.settings_btn{
right: 0;
box-shadow: inset 2px -2px 3px ##00bfff;
}
.settings_btn:hover{
padding: 2px;
background-color: dimgray;
}
.profile_slider{
width: 325px;
height: 400px;
background: #fff;
color: #7b7a82;
position: absolute;
top: 25px;
left: 0;
font-size: 14px;
transition: bottom 0.2s ease;
}
.profile_slider li{
height: 80px;
border-bottom: 1px solid #eceff4;
padding: 15px;
}
.profile_slider li:last-child{
border-bottom: 0;
}
.profile_slider li .slider_item,
.profile_slider li .slider_left{
display: flex;
}
.profile_slider li .slider_item{
justify-content: space-between;
align-items: center;
height: 100%;
}
.profile_slider img{
width: 35px;
border-radius: 50%;
margin-right: 10px;
}
.profile_slider .item{
text-align: left;
font-size: 12px;
}
.profile_slider .item_email{
font-weight: 300;
margin-top: 5px;
}
.profile_slider .btn{
width: 100px;
padding: 8px 10px;
border-radius: 25px;
cursor: pointer;
font-size: 12px;
text-align: center;
}
.profile_slider .btn.btn_following{
background: #6a60c3;
color: #fff;
}
.profile_slider .btn.btn_following:hover{
background: #8178d1;
}
.profile_slider .btn.btn_follow{
border: 1px solid #7b7a82;
}
.profile_slider .btn.btn_follow:hover{
color: #fff;
background: #7b7a82;
}
.profile_slider.active{
left: 100%;
}
.settings_btn.active{
background: #00bfff;
}
.settings_btn i{
transition: transform 0.2s ease;
}
.settings_btn.active i{
transform: rotate(360deg);
}
.citations h4 {
color: black;
}
footer {
margin-bottom: 120px;
padding: 6px;
background-color: deepskyblue;
color: #ffffff;
text-align: center;
font-size: smaller;
}
#media screen and (max-width: 400px) {
nav {
float: none;
}
}
ul {
float: none;
}
li {
float: none;
width: 100%;
padding: 0;
}
.hero {
text-align: center;
padding: 180px 20px;
}
.connect {
margin: 0;
background-color: white;
color: black;
}
.connect img {
padding: 50px;
}
.content {
padding: 20px 8px;
}
}
.grid-services {
grid-template-columns: 1fr;
height: auto;
grid-template-rows: repeat(6, 1fr);
height: auto;
}
.form {
display: flex;
flex-direction: row;
color: white;
}
.form label {
flex: none;
display: block;
width: 250px;
font-weight: bold;
font-size: 1em;
display: inline-block;
}
.form label.right-inline {
text-align: right;
padding-right: 8px;
padding-left: 10px;
width: 300px;
}
.form .input-control {
flex: 1 1 auto;
display: block;
margin-bottom: 10px;
margin-right: 8px;
padding: 4px;
margin-top: -4px;
}
footer {
grid-area: footer;
margin: 0;
padding: 6px;
background-color: deepskyblue;
color: #ffffff;
text-align: center;
font-size: smaller;
}
You can use the Bootstrap class navbar; it already has breakpoints defined so you can have a presentable grid box at a small webpage size.
Dropdown menu works but only when I hover and not click
My menu works but only when I hover and not click. It does not show up on mobile devices it only shows up as services but not clickable.
here is the code.
I believe I am missing something to make the dropdown box clickable ect.
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
background: #fff4e9;
color: #444;
font-family: "Open Sans", sans-serif;
}
a {
color: #993300;
transition: 0.5s;
}
a:hover,
a:active,
a:focus {
color: #993300;
outline: none;
text-decoration: none;
}
p {
padding: 0;
margin: 0 0 30px 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Montserrat", sans-serif;
font-weight: 400;
margin: 0 0 20px 0;
padding: 0;
}
/* Back to top button */
.back-to-top {
position: fixed;
display: none;
background: #993300;
color: #fff;
padding: 6px 12px 9px 12px;
font-size: 16px;
border-radius: 2px;
right: 15px;
bottom: 15px;
transition: background 0.5s;
}
.back-to-top:focus {
background: #993300;
color: #fff;
outline: none;
}
.back-to-top:hover {
background: #993300;
color: #fff;
}
/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
background: #fff4e9;
padding: 10px 0;
border-bottom: 1px solid #eee;
font-size: 14px;
}
#topbar .contact-info a {
line-height: 1;
color: #555;
}
#topbar .contact-info a:hover {
color: #993300;
}
#topbar .contact-info i {
color: #993300;
padding: 4px;
}
#topbar .contact-info .fa-phone {
padding-left: 20px;
margin-left: 20px;
border-left: 1px solid #e9e9e9;
}
#topbar .social-links a {
color: #555;
padding: 4px 12px;
display: inline-block;
line-height: 1px;
border-left: 1px solid #e9e9e9;
}
#topbar .social-links a:hover {
color: #993300;
}
#topbar .social-links a:first-child {
border-left: 0;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
padding: 20px 0;
height: 84px;
transition: all 0.5s;
z-index: 997;
background: #fff4e9;
box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06);
}
#header #logo h1 {
font-size: 42px;
margin: 0;
padding: 0;
line-height: 1;
font-family: "Montserrat", sans-serif;
font-weight: 700;
}
#header #logo h1 a {
color: #993300;
line-height: 1;
display: inline-block;
}
#header #logo h1 a span {
color: #993300;
}
#header #logo img {
padding: 0;
margin: 0;
}
/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/
#intro {
width: 100%;
height: 60vh;
position: relative;
background: url("../img/intro-carousel/1.jpg") no-repeat;
background-size: cover;
}
#intro .intro-content {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: 10;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
#intro .intro-content h2 {
color: #993300;
margin-bottom: 30px;
font-size: 64px;
font-weight: 700;
}
#intro .intro-content h2 span {
color: #993300;
text-decoration: underline;
}
#intro .intro-content .btn-get-started,
#intro .intro-content .btn-projects {
font-family: "Raleway", sans-serif;
font-size: 15px;
font-weight: bold;
letter-spacing: 1px;
display: inline-block;
padding: 10px 32px;
border-radius: 2px;
transition: 0.5s;
margin: 10px;
color: #fff;
}
#intro .intro-content .btn-get-started {
background: #993300;
border: 2px solid #993300;
}
#intro .intro-content .btn-get-started:hover {
background: none;
color: #993300;
}
#intro .intro-content .btn-projects {
background: #993300;
border: 2px solid #993300;
}
#intro .intro-content .btn-projects:hover {
background: none;
color: #993300;
}
#intro #intro-carousel {
z-index: 8;
}
#intro #intro-carousel::before {
content: '';
background-color: );
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 7;
}
#intro #intro-carousel .item {
width: 100%;
height: 60vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition-property: opacity;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu,
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu>li>.dropdown-menu {
background-color: #fff4e9;
}
.nav-menu>li>.dropdown-item {
background-color: #fff4e9;
}
.dropdown-menu>li>a:hover {
background-color: #fff4e9;
background-image: none;
}
.nav-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
}
.nav-menu li {
position: relative;
white-space: nowrap;
}
.nav-menu>li {
float: left;
}
.nav-menu li:hover>ul,
.nav-menu li.sfHover>ul {
display: block;
}
.nav-menu ul ul {
top: 0;
left: 100%;
}
.nav-menu ul li {
min-width: 180px;
}
/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
padding-right: 22px;
}
.sf-arrows .sf-with-ul:after {
content: "\f107";
position: absolute;
right: 8px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}
.sf-arrows ul .sf-with-ul:after {
content: "\f105";
}
/* Nav Meu Container */
#nav-menu-container {
float: right;
margin: 0;
}
/* Nav Meu Styling */
.nav-menu a {
padding: 10px 8px;
text-decoration: none;
display: inline-block;
color: #555;
font-family: "Raleway", sans-serif;
font-weight: 700;
font-size: 14px;
outline: none;
}
.nav-menu li:hover>a,
.nav-menu .menu-active>a {
color: #993300;
}
.nav-menu>li {
margin-left: 10px;
}
.nav-menu ul {
margin: 4px 0 0 0;
padding: 10px;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
background: #fff;
}
.nav-menu ul li {
transition: 0.3s;
}
.nav-menu ul li a {
padding: 10px;
color: #333;
transition: 0.3s;
display: block;
font-size: 13px;
text-transform: none;
}
.nav-menu ul li:hover>a {
color: #993300;
}
.nav-menu ul ul {
margin: 0;
}
/* Mobile Nav Toggle */
#mobile-nav-toggle {
position: fixed;
right: 0;
top: 0;
z-index: 999;
margin: 20px 20px 0 0;
border: 0;
background: none;
font-size: 24px;
display: none;
transition: all 0.4s;
outline: none;
cursor: pointer;
}
#mobile-nav-toggle i {
color: #555;
}
/* Mobile Nav Styling */
#mobile-nav {
position: fixed;
top: 0;
padding-top: 18px;
bottom: 0;
z-index: 998;
background: rgba(52, 59, 64, 0.9);
left: -260px;
width: 260px;
overflow-y: auto;
transition: 0.4s;
}
#mobile-nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#mobile-nav ul li {
position: relative;
}
#mobile-nav ul li a {
color: #fff;
font-size: 16px;
overflow: hidden;
padding: 10px 22px 10px 15px;
position: relative;
text-decoration: none;
width: 100%;
display: block;
outline: none;
}
#mobile-nav ul li a:hover {
color: #fff;
}
#mobile-nav ul li li {
padding-left: 30px;
}
#mobile-nav ul .menu-has-children i {
position: absolute;
right: 0;
z-index: 99;
padding: 15px;
cursor: pointer;
color: #fff;
}
#mobile-nav ul .menu-has-children i.fa-chevron-up {
color: #993300;
}
#mobile-nav ul .menu-item-active {
color: #993300;
}
#mobile-body-overly {
width: 100%;
height: 100%;
z-index: 997;
top: 0;
left: 0;
position: fixed;
background: rgba(52, 59, 64, 0.9);
display: none;
}
/* Mobile Nav body classes */
body.mobile-nav-active {
overflow: hidden;
}
body.mobile-nav-active #mobile-nav {
left: 0;
}
body.mobile-nav-active #mobile-nav-toggle {
color: #fff;
}
/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
/* Sections Header
--------------------------------*/
.section-header {
margin-bottom: 30px;
}
.section-header h2 {
font-size: 32px;
color: #993300;
text-transform: uppercase;
font-weight: 700;
position: relative;
padding-bottom: 20px;
}
.section-header h3 {
font-size: 26px;
color: #993300;
text-transform: uppercase;
font-weight: 700;
position: relative;
padding-bottom: 20px;
}
.section-header h2::before {
content: '';
position: absolute;
display: block;
width: 50px;
height: 3px;
background: #993300;
bottom: 0;
left: 0;
}
.section-header h3::before {
content: '';
position: absolute;
display: block;
width: 50px;
height: 3px;
background: #993300;
bottom: 0;
left: 0;
}
.section-header p {
padding: 0;
margin: 0;
}
/* About Section
--------------------------------*/
#about {
padding: 60px 0 30px 0;
}
#about .about-img {
overflow: hidden;
}
#about .about-img img {
margin-left: -15px;
max-width: 100%;
}
#about .content h2 {
color: #993300;
font-weight: 700;
font-size: 36px;
font-family: "Raleway", sans-serif;
}
#about .content h3 {
color: #555;
font-weight: 300;
font-size: 18px;
line-height: 26px;
font-style: italic;
}
#about .content p {
line-height: 26px;
}
#about .content p:last-child {
margin-bottom: 0;
}
#about .content i {
font-size: 20px;
padding-right: 4px;
color: #993300;
}
#about .content ul {
list-style: none;
padding: 0;
}
#about .content ul li {
padding-bottom: 10px;
}
/* Services Section
--------------------------------*/
#services {
padding: 30px 0 0 0;
}
#services .box {
padding: 40px;
margin-bottom: 40px;
box-shadow: 10px 10px 15px rgba(73, 78, 92, 0.1);
background: #fff4e9;
transition: 0.4s;
}
#services .box:hover {
box-shadow: 0px 0px 30px rgba(73, 78, 92, 0.15);
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
}
#services .box .icon {
float: left;
}
#services .box .icon i {
color: #444;
font-size: 64px;
transition: 0.5s;
line-height: 0;
margin-top: 34px;
}
#services .box .icon i:before {
background: #993300;
background: linear-gradient(45deg, #993300 0%, #993300 100%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#services .box h4 {
margin-left: 100px;
font-weight: 700;
margin-bottom: 15px;
font-size: 22px;
}
#services .box h4 a {
color: #444;
}
#services .box p {
font-size: 14px;
margin-left: 100px;
margin-bottom: 0;
line-height: 24px;
}
/* Clients Section
--------------------------------*/
#clients {
padding: 30px 0;
}
#clients img {
max-width: 100%;
opacity: 0.5;
transition: 0.3s;
padding: 15px 0;
}
#clients img:hover {
opacity: 1;
}
#clients .owl-nav,
#clients .owl-dots {
margin-top: 5px;
text-align: center;
}
#clients .owl-dot {
display: inline-block;
margin: 0 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ddd;
}
#clients .owl-dot.active {
background-color: #993300;
}
/* Our Portfolio Section
--------------------------------*/
#portfolio {
background: #fff4e9;
padding: 30px 0;
}
#portfolio .portfolio-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
transition: all ease-in-out 0.4s;
}
#portfolio .portfolio-item {
overflow: hidden;
position: relative;
padding: 0;
vertical-align: middle;
text-align: center;
}
#portfolio .portfolio-item h2 {
color: #ffffff;
font-size: 24px;
margin: 0;
text-transform: capitalize;
font-weight: 700;
}
#portfolio .portfolio-item img {
transition: all ease-in-out 0.4s;
width: 100%;
}
#portfolio .portfolio-item:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#portfolio .portfolio-item:hover .portfolio-overlay {
opacity: 1;
background: rgba(0, 0, 0, 0.7);
}
#portfolio .portfolio-info {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* Testimonials Section
--------------------------------*/
#testimonials {
padding: 30px 0;
}
#testimonials .testimonial-item {
box-sizing: content-box;
padding: 30px 30px 0 30px;
margin: 30px 15px;
text-align: center;
min-height: 350px;
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
}
#testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50%;
border: 4px solid #fff;
margin: 0 auto;
}
#testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
color: #111;
}
#testimonials .testimonial-item h4 {
font-size: 14px;
color: #999;
margin: 0;
}
#testimonials .testimonial-item .quote-sign-left {
margin-top: -15px;
padding-right: 10px;
display: inline-block;
width: 37px;
}
#testimonials .testimonial-item .quote-sign-right {
margin-bottom: -15px;
padding-left: 10px;
display: inline-block;
max-width: 100%;
width: 37px;
}
#testimonials .testimonial-item p {
font-style: italic;
margin: 0 auto 15px auto;
}
#testimonials .owl-nav,
#testimonials .owl-dots {
margin-top: 5px;
text-align: center;
}
#testimonials .owl-dot {
display: inline-block;
margin: 0 5px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ddd;
}
#testimonials .owl-dot.active {
background-color: #993300;
}
/* Call To Action Section
--------------------------------*/
#call-to-action {
background: #081e5b;
background-size: cover;
padding: 40px 0;
}
#call-to-action .cta-title {
color: #fff;
font-size: 28px;
font-weight: 700;
}
#call-to-action .cta-text {
color: #fff;
}
#call-to-action .cta-btn {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 26px;
border-radius: 3px;
transition: 0.5s;
margin: 10px;
border: 3px solid #fff;
color: #fff;
}
#call-to-action .cta-btn:hover {
background: #993300;
border: 3px solid #993300;
}
/* Our Team Section
--------------------------------*/
#team {
background: #fff;
padding: 30px 0 0 0;
}
#team .member {
text-align: center;
margin-bottom: 20px;
}
#team .member .pic {
overflow: hidden;
text-align: center;
}
#team .member .pic img {
max-width: 100%;
}
#team .member .details {
background: #993300;
color: #fff;
padding: 15px;
border-radius: 0 0 3px 3px;
}
#team .member h4 {
font-weight: 700;
margin-bottom: 2px;
font-size: 18px;
}
#team .member span {
font-style: italic;
display: block;
font-size: 13px;
}
#team .member .social {
margin-top: 5px;
}
#team .member .social a {
color: #fff;
}
#team .member .social i {
font-size: 16px;
margin: 0 2px;
}
/* Contact Section
--------------------------------*/
#contact {
padding: 30px 0;
}
#contact .contact-info {
margin-bottom: 20px;
text-align: center;
}
#contact .contact-info i {
font-size: 48px;
display: inline-block;
margin-bottom: 10px;
color: #993300;
}
#contact .contact-info address,
#contact .contact-info p {
margin-bottom: 0;
color: #000;
}
#contact .contact-info h3 {
font-size: 18px;
margin-bottom: 15px;
font-weight: bold;
text-transform: uppercase;
color: #999;
}
#contact .contact-info a {
color: #000;
}
#contact .contact-info a:hover {
color: #993300;
}
#contact .contact-address,
#contact .contact-phone,
#contact .contact-email {
margin-bottom: 20px;
}
#contact #google-map {
height: 290px;
margin-bottom: 20px;
}
#contact .form #sendmessage {
color: #993300;
border: 1px solid #993300;
display: none;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #errormessage {
color: red;
display: none;
border: 1px solid red;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #sendmessage.show,
#contact .form #errormessage.show,
#contact .form .show {
display: block;
}
#contact .form .validation {
color: red;
display: none;
margin: 0 0 20px;
font-weight: 400;
font-size: 13px;
}
#contact .form input,
#contact .form textarea {
padding: 10px 14px;
border-radius: 0;
box-shadow: none;
font-size: 15px;
}
#contact .form button[type="submit"] {
background: #993300;
border: 0;
border-radius: 3px;
padding: 10px 30px;
color: #fff;
transition: 0.4s;
cursor: pointer;
}
#contact .form button[type="submit"]:hover {
background: #2dc899;
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
background: #fff4e9;
padding: 0 0 30px 0;
font-size: 14px;
}
#footer .copyright {
text-align: center;
padding-top: 30px;
}
#footer .credits {
text-align: center;
font-size: 13px;
color: #555;
}
#footer .credits a {
color: #993300;
}
#media (min-width: 768px) {
#contact .contact-address,
#contact .contact-phone,
#contact .contact-email {
padding: 20px 0;
}
#contact .contact-phone {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
}
#media (min-width: 769px) {
#call-to-action .cta-btn-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
}
#media (max-width: 768px) {
.back-to-top {
bottom: 15px;
}
#header {
padding: 20px 0;
height: 74px;
}
#header #logo h1 {
font-size: 34px;
}
#header #logo img {
max-height: 40px;
}
#nav-menu-container {
display: none;
}
#mobile-nav-toggle {
display: inline;
}
#about .about-img {
height: auto;
}
#about .about-img img {
margin-left: 0;
padding-bottom: 30px;
}
}
#media (max-width: 767px) {
#intro .intro-content h2 {
font-size: 34px;
}
#services .box .box {
margin-bottom: 20px;
}
#services .box .icon {
float: none;
text-align: center;
padding-bottom: 15px;
}
#services .box h4,
#services .box p {
margin-left: 0;
text-align: center;
}
#testimonials .testimonial-item {
margin: 30px 10px;
}
}
#media (max-width: 576px) {
#contact #google-map {
margin-top: 20px;
}
}
#thumbnails {
display: block;
margin-bottom: 10px;
}
#thumbnails ul li {
float: left;
margin-right: 12px;
margin-left: 12px;
margin-bottom: 12px;
}
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About us</li>
<li class="dropdown">
<a class="dropdown-item">Services</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="page1.html">page1</a></li>
<li><a class="dropdown-item" href="page2.html">page2</a></li>
</ul>
<li>page3</li>
<li>page4</li>
</ul>
</nav>
The answers are right in front of you! #MattOpen sent you the Bootstrap nav components. I am not going to do the work for you as you stated you was new to this so the best way to learn is to just get stuck in! make a copy so you can always revert and test. Have a little look at this code below and then play around with you CSS :)` <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="page1.html">Dropdown Page 1</a> <a class="dropdown-item" href="page2.html">Dropdwon Page 2</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="page3.html">page 3</a> </li> <li class="nav-item"> <a class="nav-link" href="page4.html">page 4</a> </li> </ul> </div> `