I decided to split my navigation bar and header into two separate react components. However, I encountered an issue with the positioning of my logo, which is located in the navigation bar component. I am currently working on making it overlap the header component.
If you need a visual representation, here is how it appears on my website: The circular logo is positioned on the top left corner, while the header has a cream white color.
Below is the relevant code snippets:
This is the HTML for my Header component (named main-container-three)
<div className="main-container-three">
<div className="admin-container">
<p className="admin-heading">The Oilixate Shop: Oil Spells</p>
</div>
Here is the corresponding CSS for the Header component:
.main-container-three{
position: relative;
width: 1440px;
height: 770px;
left: 0px;
top: 78px;
background: #ECE8DF;
z-index: 1;
border-radius: 0px 0px 37px 37px;
}
Next, we have the HTML for the Navigation Bar component:
<div className="nav-bar">
<div className="nav-logo"></div>
<a href="/"><p className="nav-home">Home</p></a>
<a href="/IndiProduct"><p className="nav-product">Products</p></a>
<a href="/Checkout"><p className="nav-checkout">Checkout</p></a>
<a href="/Admin"><p className="nav-admin">Admin</p></a>
<input type={"text"} placeholder={'Search'} className="search-box"></input>
<button className="search-btn"></button>
<div className="shopping-cart"></div>
<div className="numb-items">
<p className="one-item">1</p>
</div>
</div>
And finally, the CSS styles for the Navigation Bar:
.nav-bar{
width: 100%;
height: 82px;
background: #2B4447;
float: left;
}
.nav-logo{
width: 80px;
height: 80px;
z-index: 2;
margin-top: 27px;
margin-left: 31px;
background: grey;
border-radius: 100%;
float: left;
}
/* Additional CSS styles for other elements within the navigation bar */