xarxaprod
/
oficinasuport-wp-theme
3
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

styled navigation for big screens, added color for bottom main menu

This commit is contained in:
jorge 2022-11-30 01:56:42 +01:00
parent 6b02a3be4b
commit a4a5dea137
5 changed files with 85 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sass/abstracts/variables/_colors.scss
View File

@ -1,5 +1,6 @@
$color__white: #fff; $color__white: #fff;
$color__white-dark: #fdfdfd; $color__white-dark: #fdfdfd;
$color__grey-lighter: #eee;
$color__grey-light: #ccc; $color__grey-light: #ccc;
$color__grey-dark: #666; $color__grey-dark: #666;
$color__black-light: #101010; $color__black-light: #101010;

48
sass/components/navigation/_navigation.scss
View File

@ -58,48 +58,72 @@
} }
a { a {
display: block; display: flex;
align-items: center;
min-height: 100%;
padding: 0 1rem;
text-decoration: none; text-decoration: none;
font-size: 1rem;
} }
.current_page_item > a, .current_page_item > a,
.current-menu-item > a, .current-menu-item > a,
.current_page_ancestor > a, .current_page_ancestor > a,
.current-menu-ancestor > a { .current-menu-ancestor > a {
font-weight: bold;
} }
.current-menu-item::after {
border-bottom: 2px solid #000;
display: block;
content: "";
width: 60%;
margin: 0 20%;
}
} }
.main-navigation {
}
.secondary-navigation {
padding: 1.5rem 0;
a {
text-transform: uppercase;
}
}
/* Small menu. */ /* Small menu. */
.menu-toggle, .menu-toggle,
.main-navigation.toggled ul { .main-navigation.toggled ul {
display: block; display: block;
} }
/* secondary navigation */
.secondary-navigation ul {
display: flex;
}
@media screen and (min-width: 37.5em) { @media screen and (min-width: 37.5em) {
.site-branding { .site-branding {
// display: inline-block; //display: inline-block;
// float: left; //float: left;
} }
.custom-logo { .custom-logo {
max-width: 11rem; max-width: 11rem;
margin: 1rem; margin: 1rem;
} }
.menu-primary-menu-container, .menu-primary-menu-container {
.menu-secondary-menu-container { height: 100%;
display: flex; }
justify-content: end; //.menu-primary-menu-container,
} //.menu-secondary-menu-container {
// display: flex;
// justify-content: end;
//}
.menu-toggle { .menu-toggle {
display: none; display: none;
} }
.main-navigation ul { .main-navigation ul {
display: flex; display: flex;
justify-content: end;
height:100%;
} }
.secondary-navigation ul {
display: flex;
}
} }
.comment-navigation, .comment-navigation,

11
sass/layouts/_no-sidebar.scss
View File

@ -1,5 +1,4 @@
.no-sidebar { .no-sidebar {
.site { .site {
display: grid; display: grid;
grid-template-columns: auto; grid-template-columns: auto;
@ -13,14 +12,16 @@
} }
.site-header { .site-header {
.main { .main {
display:flex; // display:flex;
align-items: center; // align-items: center;
justify-content: space-between; // justify-content: space-between;
display: grid;
grid-template-columns: 1fr 4fr;
border-bottom: 1px solid $color__grey-lighter;
} }
.secondary { .secondary {
display:flex; display:flex;
justify-content: center; justify-content: center;
border-top: 1px solid $color__grey-light;
} }
} }
} }

55
style.css
View File

@ -684,15 +684,14 @@ textarea {
} }
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
display: flex; display: grid;
align-items: center; grid-template-columns: 1fr 4fr;
justify-content: space-between; border-bottom: 1px solid #eee;
} }
.no-sidebar .site-header .secondary { .no-sidebar .site-header .secondary {
display: flex; display: flex;
justify-content: center; justify-content: center;
border-top: 1px solid #ccc;
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@ -743,8 +742,38 @@ textarea {
} }
.main-navigation a, .secondary-navigation a { .main-navigation a, .secondary-navigation a {
display: block; display: flex;
align-items: center;
min-height: 100%;
padding: 0 1rem;
text-decoration: none; text-decoration: none;
font-size: 1rem;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a, .secondary-navigation .current_page_item > a,
.secondary-navigation .current-menu-item > a,
.secondary-navigation .current_page_ancestor > a,
.secondary-navigation .current-menu-ancestor > a {
font-weight: bold;
}
.main-navigation .current-menu-item::after, .secondary-navigation .current-menu-item::after {
border-bottom: 2px solid #000;
display: block;
content: "";
width: 60%;
margin: 0 20%;
}
.secondary-navigation {
padding: 1.5rem 0;
}
.secondary-navigation a {
text-transform: uppercase;
} }
/* Small menu. */ /* Small menu. */
@ -753,26 +782,24 @@ textarea {
display: block; display: block;
} }
/* secondary navigation */
.secondary-navigation ul {
display: flex;
}
@media screen and (min-width: 37.5em) { @media screen and (min-width: 37.5em) {
.custom-logo { .custom-logo {
max-width: 11rem; max-width: 11rem;
margin: 1rem; margin: 1rem;
} }
.menu-primary-menu-container, .menu-primary-menu-container {
.menu-secondary-menu-container { height: 100%;
display: flex;
justify-content: end;
} }
.menu-toggle { .menu-toggle {
display: none; display: none;
} }
.main-navigation ul { .main-navigation ul {
display: flex; display: flex;
justify-content: end;
height: 100%;
}
.secondary-navigation ul {
display: flex;
} }
} }

2
style.css.map
View File

File diff suppressed because one or more lines are too long