styled menus for mobile

This commit is contained in:
jorge 2022-12-03 19:49:36 +01:00
parent f810d617e5
commit d336aa54e1
5 changed files with 51 additions and 38 deletions

View File

@ -47,7 +47,7 @@
</div><!-- .site-branding -->
<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
wp_nav_menu(
array(

View File

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

View File

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

View File

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

File diff suppressed because one or more lines are too long