As a beginner in coding, I am taking on the challenge of creating a webpage for a student project using React.
I've hit a hurdle while working on the navbar for the page. How can I align the items (Home, Project, Team, Contact) to the right side of the bar?
Here is the current look of the navbar: https://i.sstatic.net/gUJPi.png
Below is the code snippet I'm currently using:
const navbar = props => (
<nav className="navbar">
<div className="container" >
<div className="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div className="navbar__title">
<h2>Our project</h2>
</div>
<div className="navbar__navigation-items">
<ul>
<li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
<li><NavLink to="/project" activeClassName="is-active">Project</NavLink></li>
<li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
<li><NavLink to="/contact" activeClassName="is-active">Contact</NavLink></li>
</ul>
</div>
</div>
</nav>
);
Here is the SCSS code for the container and the navbar:
.container {
max-width: 115rem;
margin: 0 10rem;
padding: 0 $m-size;
display: flex;
}
and
.navbar {
background: #E3E9EE;
position: fixed;
width: 100%;
top: 0;
padding: .7rem 0;
height: 80px;
display: flex;
border-bottom: 1px solid lighten(#2C465F, 30%);
}
.navbar__bubble {
color: #2C465F;
cursor: pointer;
margin-top: 20px;
}
.navbar__title {
color: #2C465F;
cursor: pointer;
margin: 30px;
margin-left: 10px;
margin-top: 5px;
font-size: $m-size;
}
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
}
.navbar__navigation-items ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 20px;
list-style: none;
float: right;
}
.navbar__navigation-items a:hover,
.navbar__navigation-items a:active {
color: #2C465F;
}
.navbar__subtitle {
margin-top: 28px;
}
Any help or advice you can provide would be greatly appreciated! :)