Responsive version

This commit is contained in:
2024-09-21 15:42:53 +02:00
parent 19403eb4c8
commit f86e484b9d
7 changed files with 121 additions and 46 deletions

View File

@@ -1,24 +1,43 @@
<header id="masthead">
<div class="bg-white py-6">
<div class="container mx-auto flex justify-between self-start justify-self-start ">
<?= get_custom_logo() ?>
<nav id="site-navigation" aria-label="<?php esc_attr_e('Main Navigation', 'valier'); ?>"
class="has-small-font-size uppercase has-cinzel-font-family flex items-center gap-6 ">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-primary',
'container' => false,
'menu_id' => 'menu-primary',
'items_wrap' => '<ul id="%1$s" class="%2$s flex justify-center gap-6 " aria-label="submenu">%3$s</ul>',
)
);
?>
<a href="<?= get_field('linkedin_link', 'option') ?>" target="_blank">
<img src="<?= get_field('abrevitura_de_linkedin', 'option') ?>" alt="Linkedin" class="linkedin">
</a>
</nav>
</div>
<nav class="container p-4 2xl:mx-auto flex flex-wrap items-center self-start">
<div class="flex-1 flex justify-between items-center">
<?= get_custom_logo() ?>
</div>
<label for="menu-toggle" class="cursor-pointer lg:hidden block">
<svg
class="fill-current"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
>
<title>menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
</svg>
</label>
<input class="hidden" type="checkbox" id="menu-toggle"/>
<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
<nav id="site-navigation" aria-label="
<?php esc_attr_e('Main Navigation', 'valier'); ?>"
class="has-small-font-size uppercase has-cinzel-font-family flex items-center gap-6">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-primary',
'container' => false,
'menu_id' => 'menu-primary',
'items_wrap' => '<ul id="%1$s" class="%2$s md:gap-x-4 lg:flex lg:pt-0 gap-6 " aria-label="submenu">%3$s</ul>',
)
);
?>
</nav>
</div>
<a href="<?= get_field('linkedin_link', 'option') ?>" target="_blank">
<img src="<?= get_field('abrevitura_de_linkedin', 'option') ?>" alt="Linkedin" class="linkedin hidden lg:block ">
</a>
</nav>
</div>
<h1 class="self-start justify-self-center has-extreme-font-size has-white-color has-cinzel-font-family uppercase text-center py-10"
style="background-image: url(<?= get_the_post_thumbnail_url() ?>)"><?= get_the_title() ?></h1>