styled menus for small screens agnostic to menu internal name

This commit is contained in:
jorge 2023-01-14 19:29:24 +01:00
parent 4b4e205312
commit e37557eb94
7 changed files with 26 additions and 22 deletions

View File

@ -1326,7 +1326,7 @@ Add your custom styles in this file so it is easier to update the theme.
display: block; display: block;
} }
.edit-post-visual-editor__content-area .main-navigation.toggled .menu-primary-menu-container { .edit-post-visual-editor__content-area .main-navigation.toggled .main-navigation-content {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 5rem; top: 5rem;
@ -1362,15 +1362,15 @@ Add your custom styles in this file so it is easier to update the theme.
padding: 0; padding: 0;
} }
.edit-post-visual-editor__content-area .menu-primary-menu-container { .edit-post-visual-editor__content-area .main-navigation-content {
text-transform: uppercase; text-transform: uppercase;
} }
.edit-post-visual-editor__content-area .menu-primary-menu-container li { .edit-post-visual-editor__content-area .main-navigation-content li {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
.edit-post-visual-editor__content-area .menu-secondary-menu-container { .edit-post-visual-editor__content-area .secondary-navigation-content {
padding: 4rem 2rem; padding: 4rem 2rem;
} }
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -48,6 +48,7 @@
<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" style="background-image: url('<?php echo esc_url( wp_get_attachment_url( get_theme_mod( 'custom_logo' ) ) ); ?>');" ><?php esc_html_e( 'Menu XarxaProd', 'ofisuport' ); ?></button> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false" style="background-image: url('<?php echo esc_url( wp_get_attachment_url( get_theme_mod( 'custom_logo' ) ) ); ?>');" ><?php esc_html_e( 'Menu XarxaProd', 'ofisuport' ); ?></button>
<section class="main-navigation-content">
<?php <?php
wp_nav_menu( wp_nav_menu(
array( array(
@ -55,7 +56,8 @@
'menu_id' => 'primary-menu', 'menu_id' => 'primary-menu',
) )
); );
?> ?>
</section>
</nav><!--primary #site-navigation --> </nav><!--primary #site-navigation -->
</div> </div>
<div class="secondary"> <div class="secondary">
@ -66,15 +68,17 @@
<input id="show-menu-mobile" class="hide-not-mobile toggle" name="toggle" type="radio"> <input id="show-menu-mobile" class="hide-not-mobile toggle" name="toggle" type="radio">
<div class="toggled-menu"> <div class="toggled-menu">
<label for="hide-menu-mobile" class="hide-not-mobile toggle-hide"><span class="hide-content">close</span></label> <label for="hide-menu-mobile" class="hide-not-mobile toggle-hide"><span class="hide-content">close</span></label>
<section class="secondary-navigation-content">
<?php // here content to hide or show ?> <?php // here content to hide or show ?>
<?php <?php
wp_nav_menu( wp_nav_menu(
array( array(
'theme_location' => 'menu-2', 'theme_location' => 'menu-2',
'menu_id' => 'secondary-menu', 'menu_id' => 'secondary-menu',
) )
); );
?> ?>
</section>
</div><!--toggled-menu--> </div><!--toggled-menu-->
</nav><!--secondary #site-navigation --> </nav><!--secondary #site-navigation -->

View File

@ -130,7 +130,7 @@
ul { ul {
display: block; display: block;
} }
.menu-primary-menu-container { .main-navigation-content {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 5rem; top: 5rem;
@ -163,13 +163,13 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.menu-primary-menu-container { .main-navigation-content {
text-transform: uppercase; text-transform: uppercase;
li { li {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
} }
.menu-secondary-menu-container { .secondary-navigation-content {
padding: 4rem 2rem; padding: 4rem 2rem;
} }
} }

View File

@ -1201,7 +1201,7 @@ textarea {
display: block; display: block;
} }
.main-navigation.toggled .menu-primary-menu-container { .main-navigation.toggled .main-navigation-content {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 5rem; top: 5rem;
@ -1237,15 +1237,15 @@ textarea {
padding: 0; padding: 0;
} }
.menu-primary-menu-container { .main-navigation-content {
text-transform: uppercase; text-transform: uppercase;
} }
.menu-primary-menu-container li { .main-navigation-content li {
padding: 0.5rem 0; padding: 0.5rem 0;
} }
.menu-secondary-menu-container { .secondary-navigation-content {
padding: 4rem 2rem; padding: 4rem 2rem;
} }
} }

File diff suppressed because one or more lines are too long