Just starting out in the world of Web Development, so any help would be greatly appreciated!
I've been working on a Wordpress website for a company and encountered an issue with my CSS while implementing the Bootstrap 5 navbar. On desktop, the dropdown menus open on hover, and the items inside are clickable as intended. However, I'd like them to open only on hover, and currently, they remain open if clicked. Additionally, my CSS completely disrupted the mobile functionality - the entire menu refuses to open on mobile, the button toggle doesn't work, and I'm unsure how to proceed.
If I remove the custom CSS, the navbar works as expected out of the box - no hover on desktop, but clickable on mobile. So, I know the issue lies with the styling I've added.
Any suggestions on how to solve this, including using scripts or other methods, would be much appreciated. Thank you!
CSS (style.css):
.navbar-wrapper {
background-color: var(--orange);
}
.nav-container {
width: 100%;
max-width: 90rem;
margin: 0 auto;
padding: 0 2.5rem;
height: 5.625rem;
}
.navbar-toggler {
border-style: none;
}
.navbar-brand {
padding-top: .85rem;
}
.collapse.navbar-collapse {
justify-content: flex-end;
display: flex;
}
.navbar-nav .nav-link {
color: #fff;
text-transform: uppercase;
font-weight: 600;
padding: .625rem 0.75rem;
border-radius: 50px;
transition: background-color 0.3s;
}
.nav-item {
padding-left: .625rem;
}
.nav-item.active .nav-link{
background-color: rgba(255,255,255,0.8);
color: var(--orange) !important;
}
.navbar-nav .nav-link:hover {
background-color: rgba(255,255,255,0.2);
color: #fff;
}
.nav-item.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
background-color: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dropdown-menu .dropdown-item {
text-transform: uppercase;
font-weight: 600;
color: var(--light-grey);
transition: color 0.3s;
}
.dropdown-menu .dropdown-item:hover {
color: var(--orange);
}
PHP (header.php):
<header class="navbar-wrapper">
<nav class="navbar navbar-expand-lg">
<div class="container-lg padding-global nav-container">
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/') ); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/assets/svg/logo.svg" width="130px" height="auto" alt="Logo Bigdooh">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Menu de Navegação', 'your-theme-slug' ); ?>">
<i class="fa-solid fa-bars"></i>
</button>
<?php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</div>
</nav>
</header>