https://i.sstatic.net/oT9dgpaA.png NavBar.js
import React from "react";
import ReactDOM from 'react-dom';
import ReactDOMServer from 'react-dom/server';
import './NavBar.css';
function NavBar() {
const heading = 'first heading'
let list = ['About Us', 'Career Page', 'Resources']
const BuildList = () => {
return(
<>
<div className = 'nav-container'>
<div className='logo-container'> Logo Container</div>
<div className='nav-content-container'>
</div>
<div className="navbar-primary-menu">
{ list.map((key) => (<div className='navbar-primary-menu-items' key={key}> {key} </div>)) }
</div>
<div className="search-container">
<svg className='search-icon' xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="80" height="80" viewBox="0 0 48 48">
<path fill="#616161" d="M34.6 28.1H38.6V45.1H34.6z" transform="rotate(-45.001 36.586 36.587)"></path><path fill="#616161" d="M20 4A16 16 0 1 0 20 36A16 16 0 1 0 20 4Z"></path><path fill="#37474F" d="M36.2 32.1H40.2V44.400000000000006H36.2z" transform="rotate(-45.001 38.24 38.24)"></path><path fill="#64B5F6" d="M20 7A13 13 0 1 0 20 33A13 13 0 1 0 20 7Z"></path><path fill="#BBDEFB" d="M26.9,14.2c-1.7-2-4.2-3.2-6.9-3.2s-5.2,1.2-6.9,3.2c-0.4,0.4-0.3,1.1,0.1,1.4c0.4,0.4,1.1,...
<input className='input-field' type='text'></input>
</div>
</div>
</>
);
};
// const element = <ul> <li>Hello there</li></ul>
return(
<div>
<BuildList/>
</div>
);
}
export default NavBar
NavBar.css
.nav-container {
display: flex;
background: cyan;
justify-content: space-between;
align-items: center;
border: 2px solid black;
width: 100%;
gap: 10px
}
.list {
list-style-type: none;
border: 10px solid yellow;
}
li {
padding: 5px;
margin: auto;
border: 10px solid red;
}
.logo-container {
display: flex;
align-items: center;
border: 2px solid black;
margin-left: 2em;
}
.text-box {
margin-right: 10px;
margin-left: 20px;
}
.text-box input[type="text"] {
width: 10px;
}
.navbar-primary-menu {
display: flex;
flex-direction: row;
justify-content: space-around;
max-width: 30%;
border: 2px solid white;
}
.navbar-primary-menu-items {
border: 2px solid red;
}
.search-container {
display: flex;
align-items: flex-end;
padding: 2px;
margin-right: 2em;
}
.search-icon {
border: 2px solid yellow;
max-height: 30px;
max-width: 30px;
}
.input-field {
max-height: 100px;
max-width: 100px;
}
I am attempting to create a navigation bar utilizing flexbox. As a novice in CSS, I'm experimenting to enhance my understanding of styling.
However, I've encountered an issue with the alignment of elements within the navbar. Specifically, there seems to be uneven spacing between the logo container and the menu items.
My goal is to:
- Utilize the 'space-between' property
- Ensure equal spacing between the middle menu div and both sides of the navbar.
(The discrepancy in the gaps is highlighted by the blue area with stripes in the attached image)
If anyone could provide guidance on how to address this issue, it would be greatly appreciated.