arcHIVE-tech/arc-hive-wordpress-theme
arcHIVE-tech
/
arc-hive-wordpress-theme
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

top menu nav styles for smaller screens and big screens

This commit is contained in:
jorge 2022-03-31 11:08:40 +02:00
parent c1e1c1437f
commit 577977bfb3
5 changed files with 101 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

35
dist/assets/scss/modules/_header.scss vendored
View File

@ -10,7 +10,7 @@
min-width: 14rem; min-width: 14rem;
text-align: center; text-align: center;
} }
@include breakpoint(medium){ @include breakpoint(large){
@include xy-cell(shrink); @include xy-cell(shrink);
@include flex-align(left, middle); @include flex-align(left, middle);
text-align: unset; text-align: unset;
@ -21,6 +21,7 @@
@include xy-cell(12); @include xy-cell(12);
@include flex; @include flex;
@include flex-align(center, middle); @include flex-align(center, middle);
padding-bottom: $global-padding*2;
a, button { a, button {
color: $black; color: $black;
&:hover { &:hover {
@ -30,17 +31,43 @@
menu { menu {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 0.8rem; .menu {
&.dropdown {
justify-content:center;
li,.button {
min-width: unset;
margin:0;
padding:0;
font-size: $global-font-size*0.9;//$header-menu-font-size;
}
.button {
background-color:$input-background;
}
.is-dropdown-submenu {
font-size: $dropdown-font-size * 0.95;
min-width: 10rem;
box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
} }
} }
@include breakpoint(medium){ }
}
}
@include breakpoint(large) {
@include xy-cell(auto); @include xy-cell(auto);
@include flex; @include flex;
@include flex-align(right, middle); @include flex-align(right, middle);
padding-bottom: 0;//$global-padding;
menu { menu {
margin: inherit; margin: inherit;
padding: inherit; padding: inherit;
font-size: $global-font-size*1.5; .menu {
&.dropdown {
justify-content: end;
li,.button {
font-size: $global-font-size*1.4;//$header-menu-font-size;
}
}
}
} }
} }
} }

44
dist/assets/scss/modules/_navigation.scss vendored
View File

@ -1,29 +1,23 @@
// navigation scss @include breakpoint(small){
// .dropdown.menu {
//.menu { // li,.button {
// background-color: rgba(100,250,100,1); // min-width: unset;
// li { // margin:0;
// background-color: rgba(250,250,100,1); // padding:0;
// padding: 0.7rem 1rem; // }
// a { // .button {
// background-color: rgba(250,100,250,1); // background-color:$input-background;
// } // }
// } // }
//} //
// .is-dropdown-submenu {
.dropdown.menu { // font-size: $dropdown-font-size * 0.95;
li,.button { // min-width: 10rem;
min-width: unset; // box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
margin:0; // }
padding:0; }
} @include breakpoint(medium){
.button { }
background-color:$input-background; @include breakpoint(large){
}
} }
.is-dropdown-submenu {
font-size: $dropdown-font-size * 0.95;
min-width: 10rem;
box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
}

35
src/assets/scss/modules/_header.scss
View File

@ -10,7 +10,7 @@
min-width: 14rem; min-width: 14rem;
text-align: center; text-align: center;
} }
@include breakpoint(medium){ @include breakpoint(large){
@include xy-cell(shrink); @include xy-cell(shrink);
@include flex-align(left, middle); @include flex-align(left, middle);
text-align: unset; text-align: unset;
@ -21,6 +21,7 @@
@include xy-cell(12); @include xy-cell(12);
@include flex; @include flex;
@include flex-align(center, middle); @include flex-align(center, middle);
padding-bottom: $global-padding*2;
a, button { a, button {
color: $black; color: $black;
&:hover { &:hover {
@ -30,17 +31,43 @@
menu { menu {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 0.8rem; .menu {
&.dropdown {
justify-content:center;
li,.button {
min-width: unset;
margin:0;
padding:0;
font-size: $global-font-size*0.9;//$header-menu-font-size;
}
.button {
background-color:$input-background;
}
.is-dropdown-submenu {
font-size: $dropdown-font-size * 0.95;
min-width: 10rem;
box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
} }
} }
@include breakpoint(medium){ }
}
}
@include breakpoint(large) {
@include xy-cell(auto); @include xy-cell(auto);
@include flex; @include flex;
@include flex-align(right, middle); @include flex-align(right, middle);
padding-bottom: 0;//$global-padding;
menu { menu {
margin: inherit; margin: inherit;
padding: inherit; padding: inherit;
font-size: $global-font-size*1.5; .menu {
&.dropdown {
justify-content: end;
li,.button {
font-size: $global-font-size*1.4;//$header-menu-font-size;
}
}
}
} }
} }
} }

44
src/assets/scss/modules/_navigation.scss
View File

@ -1,29 +1,23 @@
// navigation scss @include breakpoint(small){
// .dropdown.menu {
//.menu { // li,.button {
// background-color: rgba(100,250,100,1); // min-width: unset;
// li { // margin:0;
// background-color: rgba(250,250,100,1); // padding:0;
// padding: 0.7rem 1rem; // }
// a { // .button {
// background-color: rgba(250,100,250,1); // background-color:$input-background;
// } // }
// } // }
//} //
// .is-dropdown-submenu {
.dropdown.menu { // font-size: $dropdown-font-size * 0.95;
li,.button { // min-width: 10rem;
min-width: unset; // box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
margin:0; // }
padding:0; }
} @include breakpoint(medium){
.button { }
background-color:$input-background; @include breakpoint(large){
}
} }
.is-dropdown-submenu {
font-size: $dropdown-font-size * 0.95;
min-width: 10rem;
box-shadow: 0 3px 5px 3px rgba(200, 200, 200, 0.1);
}