styled menus for small screens agnostic to menu internal name
This commit is contained in:
parent
4b4e205312
commit
e37557eb94
|
@ -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
20
header.php
20
header.php
|
@ -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 -->
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
Loading…
Reference in New Issue