I have written a navbar code using pure HTML/SASS, but I am facing a challenge in adding a collapse element to the navigation bar.
Despite trying various solutions from Stack Overflow, I still haven't found one that works for me.
Therefore, I am reaching out for your valuable assistance.
This is my current code:
HTML/PHP
<!-- NAVBAR -->
<div class="navbar-wrapper">
<!-- SITE LOGO -->
<div class="site-branding">
<a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><img class="logo" src="<?php echo get_template_directory_uri(); ?>/assets/img/logo-white.png" alt="<?php bloginfo('name'); ?>" /></a>
</div>
<!-- END SITE LOGO -->
<!-- SITE NAV -->
<nav id="site-navigation" class="main-navigation">
<?php
// Header Menu - > Defined in functions.php
wp_nav_menu(
array(
'theme_location' => 'header-menu',
'menu_id' => 'header-nav',
)
);
?>
</nav>
<!-- END SITE NAV -->
</div>
<!-- END NAVBAR -->
SCSS
.navbar-wrapper {
@include flex(center);
flex-direction: row;
width: 100%;
padding: 8.6rem 0 8.6rem;
.site-branding {
flex-grow: 1;
}
#site-navigation {
#header-nav {
@include flex(center);
list-style: none;
margin: 0;
padding: 0;
li>a {
text-decoration: none;
cursor: pointer;
letter-spacing: 0.014rem;
padding: 0 2rem;
color: $white;
font-size: 1.8rem;
font-family: $subtitle-font;
&:hover {
color: $color-primary
}
}
}
}
}
I am aiming to achieve a result similar to the image below: https://i.sstatic.net/8k8J3.jpg
Any assistance would be greatly appreciated!