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;
text-align: center;
}
@include breakpoint(medium){
@include breakpoint(large){
@include xy-cell(shrink);
@include flex-align(left, middle);
text-align: unset;
@ -21,6 +21,7 @@
@include xy-cell(12);
@include flex;
@include flex-align(center, middle);
padding-bottom: $global-padding*2;
a, button {
color: $black;
&:hover {
@ -30,17 +31,43 @@
menu {
margin: 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 flex;
@include flex-align(right, middle);
padding-bottom: 0;//$global-padding;
menu {
margin: 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;
}
}
}
}
}
}

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

@ -1,29 +1,23 @@
// navigation scss
//.menu {
// background-color: rgba(100,250,100,1);
// li {
// background-color: rgba(250,250,100,1);
// padding: 0.7rem 1rem;
// a {
// background-color: rgba(250,100,250,1);
@include breakpoint(small){
// .dropdown.menu {
// li,.button {
// min-width: unset;
// margin:0;
// padding:0;
// }
// .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);
// }
.dropdown.menu {
li,.button {
min-width: unset;
margin:0;
padding:0;
}
.button {
background-color:$input-background;
@include breakpoint(medium){
}
@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;
text-align: center;
}
@include breakpoint(medium){
@include breakpoint(large){
@include xy-cell(shrink);
@include flex-align(left, middle);
text-align: unset;
@ -21,6 +21,7 @@
@include xy-cell(12);
@include flex;
@include flex-align(center, middle);
padding-bottom: $global-padding*2;
a, button {
color: $black;
&:hover {
@ -30,17 +31,43 @@
menu {
margin: 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 flex;
@include flex-align(right, middle);
padding-bottom: 0;//$global-padding;
menu {
margin: 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;
}
}
}
}
}
}

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

@ -1,29 +1,23 @@
// navigation scss
//.menu {
// background-color: rgba(100,250,100,1);
// li {
// background-color: rgba(250,250,100,1);
// padding: 0.7rem 1rem;
// a {
// background-color: rgba(250,100,250,1);
@include breakpoint(small){
// .dropdown.menu {
// li,.button {
// min-width: unset;
// margin:0;
// padding:0;
// }
// .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);
// }
.dropdown.menu {
li,.button {
min-width: unset;
margin:0;
padding:0;
}
.button {
background-color:$input-background;
@include breakpoint(medium){
}
@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);
}