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

styled menus for mobile

This commit is contained in:
jorge-vitrubio 2022-12-03 19:49:36 +01:00
parent f810d617e5
commit d336aa54e1
5 changed files with 51 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
header.php
View File

@ -47,7 +47,7 @@
</div><!-- .site-branding --> </div><!-- .site-branding -->
<nav id="site-navigation-main" class="main-navigation"> <nav id="site-navigation-main" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'ofisuport' ); ?></button> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Menu XarxaProd', 'ofisuport' ); ?></button>
<?php <?php
wp_nav_menu( wp_nav_menu(
array( array(

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

@ -88,9 +88,12 @@
.main-navigation { .main-navigation {
} }
.secondary-navigation { .secondary-navigation {
padding: 1.5rem 0; padding: 1em 0;
ul { ul {
display: inherit; display: inline-block;
li {
padding: 0.5em 0;
}
} }
a { a {
text-transform: uppercase; text-transform: uppercase;
@ -113,10 +116,10 @@
left:0; left:0;
top:0; top:0;
width: 100%; width: 100%;
height: 100%; height: 100vh;
margin-top: 0; margin-top: 0;
padding-top: 3em; padding: 7em 4em 0 4em;
background-color: rgba(250,250,250,0.9); background-color: $color__white;
} }
.toogle-show { .toogle-show {
position: relative; position: relative;
@ -124,8 +127,8 @@
width: 1.8em; width: 1.8em;
height: 1.4em; height: 1.4em;
margin-right: 0.3em; margin-right: 0.3em;
border-top: 0.3em solid #000; border-top: 0.3em solid $color__black;
border-bottom: 0.3em solid #000; border-bottom: 0.3em solid $color__black;
} }
.toogle-show::before { .toogle-show::before {
content: ""; content: "";
@ -133,22 +136,17 @@
top: 0.3em; top: 0.3em;
left: 0; left: 0;
width: 100%; width: 100%;
border-top: 0.3em solid #000; border-top: 0.3em solid $color__black;
}
.toogle-hide {
display: flex;
justify-content: center;
} }
.toogle-hide::after{ .toogle-hide::after{
content: "x"; content: "x";
display: block; padding: 0;
position:absolute; font-size: 3rem;
top:0;
left:50%;
width: 1.8em;
height: 1.4em;
//margin-top: -1.4em;
padding: 0.2em;
font-size: 2rem;
font-weight: bold; font-weight: bold;
background-color: $color__white;
color: $color__black;
} }
/* end of menu hidden*/ /* end of menu hidden*/
@ -198,6 +196,7 @@
} }
} }
.secondary-navigation { .secondary-navigation {
padding: 1.5em 0;
} }
/* /*
* css menu toogler * css menu toogler

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

@ -12,10 +12,14 @@
max-width: 80em; max-width: 80em;
} }
.site-header { .site-header {
position: sticky;
top: 0;
background-color: $color__white;
.main { .main {
display: flex; display: flex;
flex-flow: column; flex-flow: row;
align-items: center; align-items: center;
justify-content: space-around;
} }
.secondary { .secondary {
display: flex; display: flex;
@ -32,6 +36,7 @@
} }
.site-header { .site-header {
.main { .main {
flex-flow: column;
border-bottom: 1px solid $color__grey-lighter; border-bottom: 1px solid $color__grey-lighter;
} }
.secondary { .secondary {

41
style.css
View File

@ -739,10 +739,16 @@ textarea {
padding: 0 1rem; padding: 0 1rem;
max-width: 80em; max-width: 80em;
} }
.no-sidebar .site-header {
position: sticky;
top: 0;
background-color: #fff;
}
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
display: flex; display: flex;
flex-flow: column; flex-flow: row;
align-items: center; align-items: center;
justify-content: space-around;
} }
.no-sidebar .site-header .secondary { .no-sidebar .site-header .secondary {
display: flex; display: flex;
@ -756,6 +762,7 @@ textarea {
padding: 0 2rem; padding: 0 2rem;
} }
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
flex-flow: column;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
} }
@ -843,10 +850,13 @@ textarea {
border-left: 1px solid #000; border-left: 1px solid #000;
} }
.secondary-navigation { .secondary-navigation {
padding: 1.5rem 0; padding: 1em 0;
} }
.secondary-navigation ul { .secondary-navigation ul {
display: inherit; display: inline-block;
}
.secondary-navigation ul li {
padding: 0.5em 0;
} }
.secondary-navigation a { .secondary-navigation a {
text-transform: uppercase; text-transform: uppercase;
@ -865,10 +875,10 @@ textarea {
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100vh;
margin-top: 0; margin-top: 0;
padding-top: 3em; padding: 7em 4em 0 4em;
background-color: rgba(250, 250, 250, 0.9); background-color: #fff;
} }
.toogle-show { .toogle-show {
position: relative; position: relative;
@ -887,19 +897,15 @@ textarea {
width: 100%; width: 100%;
border-top: 0.3em solid #000; border-top: 0.3em solid #000;
} }
.toogle-hide {
display: flex;
justify-content: center;
}
.toogle-hide::after { .toogle-hide::after {
content: "x"; content: "x";
display: block; padding: 0;
position: absolute; font-size: 3rem;
top: 0;
left: 50%;
width: 1.8em;
height: 1.4em;
padding: 0.2em;
font-size: 2rem;
font-weight: bold; font-weight: bold;
background-color: #fff;
color: #000;
} }
/* end of menu hidden*/ /* end of menu hidden*/
/* Small menu. */ /* Small menu. */
@ -946,6 +952,9 @@ textarea {
margin-top: 0.9em; margin-top: 0.9em;
border-bottom: 2px solid #000; border-bottom: 2px solid #000;
} }
.secondary-navigation {
padding: 1.5em 0;
}
/* /*
* css menu toogler * css menu toogler
* */ * */

2
style.css.map
View File

File diff suppressed because one or more lines are too long