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-dark: #fdfdfd;
$color__grey-lighter: #eee;
$color__grey-light: #ccc;
$color__grey-dark: #666;
$color__black-light: #101010;

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

@ -58,47 +58,71 @@
}
a {
display: block;
display: flex;
align-items: center;
min-height: 100%;
padding: 0 1rem;
text-decoration: none;
font-size: 1rem;
}
.current_page_item > a,
.current-menu-item > a,
.current_page_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. */
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}
/* secondary navigation */
.secondary-navigation ul {
display: flex;
}
@media screen and (min-width: 37.5em) {
.site-branding {
// display: inline-block;
// float: left;
//display: inline-block;
//float: left;
}
.custom-logo {
max-width: 11rem;
margin: 1rem;
}
.menu-primary-menu-container,
.menu-secondary-menu-container {
display: flex;
justify-content: end;
.menu-primary-menu-container {
height: 100%;
}
//.menu-primary-menu-container,
//.menu-secondary-menu-container {
// display: flex;
// justify-content: end;
//}
.menu-toggle {
display: none;
}
.main-navigation ul {
display: flex;
justify-content: end;
height:100%;
}
.secondary-navigation ul {
display: flex;
}
}

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

@ -1,5 +1,4 @@
.no-sidebar {
.site {
display: grid;
grid-template-columns: auto;
@ -13,14 +12,16 @@
}
.site-header {
.main {
display:flex;
align-items: center;
justify-content: space-between;
// display:flex;
// align-items: center;
// justify-content: space-between;
display: grid;
grid-template-columns: 1fr 4fr;
border-bottom: 1px solid $color__grey-lighter;
}
.secondary {
display:flex;
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 {
display: flex;
align-items: center;
justify-content: space-between;
display: grid;
grid-template-columns: 1fr 4fr;
border-bottom: 1px solid #eee;
}
.no-sidebar .site-header .secondary {
display: flex;
justify-content: center;
border-top: 1px solid #ccc;
}
/*--------------------------------------------------------------
@ -743,8 +742,38 @@ textarea {
}
.main-navigation a, .secondary-navigation a {
display: block;
display: flex;
align-items: center;
min-height: 100%;
padding: 0 1rem;
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. */
@ -753,26 +782,24 @@ textarea {
display: block;
}
/* secondary navigation */
.secondary-navigation ul {
display: flex;
}
@media screen and (min-width: 37.5em) {
.custom-logo {
max-width: 11rem;
margin: 1rem;
}
.menu-primary-menu-container,
.menu-secondary-menu-container {
display: flex;
justify-content: end;
.menu-primary-menu-container {
height: 100%;
}
.menu-toggle {
display: none;
}
.main-navigation ul {
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