My project consists of three main files - an HTML, a CSS, and a JS file. I have developed the HTML using the Bootstrap 5.1.3 framework.
The issue I am facing pertains to the alignment of the clothing brand logo within the header section. Despite multiple attempts, I have been unable to center the logo properly. Additionally, when activating the search function (triggered by a search icon click), the logo shifts further to the left due to the placement of the search box on the right side of the header.
While I suspect that container elements are causing this misalignment, my efforts to resize and center the logo container have not yielded any success. This seemingly minor detail is hindering my progress in understanding the framework, and I would greatly appreciate any assistance you can provide. The code snippet below illustrates my attempt to address this issue:
// Code snippet for search functionality and toggle
const searchIcon = document.querySelector('.fa-search-icon');
const searchField = document.querySelector('.search-container input[type="text"]');
// Event listener for search icon click
searchIcon.addEventListener('click', function() {
// Toggles display for search field
searchField.style.display = searchField.style.display === 'none' ? 'block' : 'none';
});.navbar {
/* CSS styles for navbar */
}
/* Additional CSS for various elements */
.search-container {
/* CSS styles for search container */
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f140b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Men</a></li>
<li class="nav-item"><a class="nav-link" href="#">Women</a></li>
</ul>
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Logo" style="max-width: 146px;">
</a>
<ul class="navbar-nav ms-auto">
<li class="nav-item search-container">
<input type="text" placeholder="Search...">
<a class="nav-link" href="#"><i class="fa fa-search fa-search-icon"></i></a></li>
<!-- Other menu items -->
</ul>
</div>
</div>
</nav>
</header>In attempting to resolve the alignment issue, I have:
- Attempted centering the logo conventionally
- Tried resizing the logo container
- Started afresh with the code
Despite numerous adjustments to the CSS properties, the logo remains uncentered. In one scenario where I managed to align the logo, it caused an overlap with the header, rendering the clickable sections inaccessible.