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

@@ -4,26 +4,47 @@
</div>
<div class="header-cointainer">
<div class="container mx-auto flex justify-between self-start justify-self-start ">
<img src="<?= get_field('logo_home', 'option') ?>" alt="<?= get_bloginfo('name') ?>">
<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 text-white " 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">
<nav class="container p-4 2xl:mx-auto flex flex-wrap items-center self-start">
<div class="flex-1 flex justify-between items-center">
<a href="<?= get_home_url() ?>" class="flex text-lg font-semibold">
<img src="<?= get_field('logo_home', 'option') ?>" alt="<?= get_bloginfo('name') ?>">
</a>
</nav>
</div>
<label for="menu-toggle" class="cursor-pointer lg:hidden block">
<svg
class="fill-current text-white"
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 text-xl text-center items-center pt-4 md:gap-x-4 lg:text-lg lg:flex lg:pt-0 gap-6 text-white" 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 "><?= get_the_title() ?></h1>
</div>
</header>