diff --git a/index.html b/index.html
index 00214d1..4d21c8d 100644
--- a/index.html
+++ b/index.html
@@ -19,23 +19,17 @@
-
-
-
-
- Ralerv
-
-
+
diff --git a/js/menu-icon.js b/js/menu-icon.js
index 8341e05..20958e1 100644
--- a/js/menu-icon.js
+++ b/js/menu-icon.js
@@ -1,6 +1,6 @@
let menuIcon = document.getElementById("menu-icon")
let menuList = document.getElementById("nav-list")
-let menuLink = document.getElementsByClassName("nav-link")
+let menuLink = document.getElementsByClassName("navbar__link")
let divHider = document.getElementById("nav-body-hider")
function crearListeners( ){ //Crear listeners para los elementos a escuchar
@@ -11,14 +11,14 @@ function crearListeners( ){ //Crear listeners para los elementos
}
function showmenu() { //Pone clases en CSS que muestran el menu
- menuList.classList.toggle("nav-list--show")
- menuIcon.classList.toggle("menu-icon-img--show")
+ menuList.classList.toggle("navbar__list--show")
+ menuIcon.classList.toggle("navbar__menu-icon--show")
divHider.classList.toggle("nav-body-hider--show")
}
function hidemenu() { //QUITA clases en CSS que muestran el menu
- menuList.classList.toggle("nav-list--show")
- menuIcon.classList.toggle("menu-icon-img--show")
+ menuList.classList.toggle("navbar__list--show")
+ menuIcon.classList.toggle("navbar__menu-icon--show")
divHider.classList.toggle("nav-body-hider--show")
}
diff --git a/styles/header.css b/styles/header.css
index 0356e70..0c9ca5a 100644
--- a/styles/header.css
+++ b/styles/header.css
@@ -1,8 +1,4 @@
-#nav-list li:last-child { /* QUITAR CUANDO AGREGAMOS EXTRAS */
- display: none;
-}
-
-header { /* general distribution */
+.navbar {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: var(--dark-jungle-green);
@@ -16,45 +12,34 @@ header { /* general distribution */
z-index: 1;
}
-.logo_name { /* Logo size */
- height: 100%;
+.navbar__logo {
+ height: 50%;
max-width: 30rem;
display: flex;
justify-content: center;
align-items: center;
}
-.logo_name img, .menu-icon--span img { /* general imgs size */
- height: 50%;
- object-fit: cover;
-}
-
-#menu-icon { /* menu cursor efect */
- cursor: pointer;
-}
-
-.name { /* size of name on header */
+.navbar__name {
font-size: var(--xlg);
+ justify-self: start;
}
-.nav-header {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.nav-header span { /* img container styles */
- height: 92%;
+.navbar__menu-icon {
+ height: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
z-index: 2;
+ right: 30px;
+}
+
+.navbar__menu-icon--show {
+ filter: invert(75%) sepia(47%) saturate(2805%) hue-rotate(168deg) brightness(87%) contrast(102%);
}
-.nav-list { /* option list styles */
+.navbar__list {
height: 75vh;
width: 100vw;
position: absolute;
@@ -64,76 +49,61 @@ header { /* general distribution */
list-style: none;
display: flex;
flex-direction: column;
- justify-content: center;
+ justify-content: space-around;
align-items: center;
- transform: translateY(-100%); /* hide list */
+ transform: translateY(-100%);
transition: transform var(--normal-transition-time);
}
-.nav-list--show { /* show list */
- transform: translateY(0%);
- box-shadow: 0px 15px 10px -15px rgb(0, 0, 0);
-}
-
-.menu-icon-img--show { /* change img colors when nav list is show up */
- filter: invert(75%) sepia(47%) saturate(2805%) hue-rotate(168deg) brightness(87%) contrast(102%);
-}
-
-.nav-header ul li a { /* a base styles */
+.navbar__link a {
+ transition: var(--short-transition-time);
text-decoration: none;
color: white;
}
-.nav-header ul li
-,.nav-header ul li a {
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
+.navbar__link--extras {
+ display: none;
}
-.nav-header ul li{
- transition: var(--short-transition-time);
- /* border-bottom: 0.4rem solid var(--blue-sapphire); */
+.navbar__list--show {
+ transform: translateY(0%);
+ box-shadow: 0px 15px 10px -15px rgb(0, 0, 0);
}
@media (any-hover: hover) {
- .nav-header ul li:hover { /* hover for list options */
+ .navbar__link:hover {
background-color: var(--blue-sapphire);
}
}
-
+
@media only screen and (min-width: 768px) {
- header { /* general distribution */
+ .navbar {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
- justify-items: unset;
- top: 0;
box-shadow: 0px 10px 12px 0px var(--dark-jungle-green-transparency);
}
- .nav-header span { /* img container styles */
+ .navbar__menu-icon {
display: none;
}
- .nav-list { /* option list styles */
+ .navbar__list {
position: static;
height: 100%;
width: 100%;
list-style: none;
display: flex;
flex-direction: row;
- justify-content: center;
+ justify-content: space-around;
align-items: center;
transform: translateY(0%);
}
- .nav-header ul li a { /* a base styles */
+ .navbar__link {
font-weight: lighter;
}
- .nav-list--show { /* show list */
+ .navbar__list--show {
transform: translateY(0%);
box-shadow: none;
}