Position items in a navbar - html

Question

I am a total beginner in coding & try to create a webpage for a student project, using React.
I have a problem while creating the navbar for the page. How do I position the items (Home, Project, Team, Kontakt) to the right side of the bar?
This is what it currently looks like:[1]: https://i.stack.imgur.com/gUJPi.png
Here is the code I am 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="/projekt" activeClassName="is-active">Project</NavLink></li>
<li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
<li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
</ul>
</div>
</div>
</nav>
);
& 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;
}
Thanks in advance for your help! :) (

Answer 1

Wrap you left elements and use flexbox
.container {
display: flex;
align-items: center;
justify-content: space-between;
}
const navbar = props => (
<nav className="navbar">
<div className="container" >
<div className="navbar__left">
<div className="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div className="navbar__title">
<h2>Our project</h2>
</div>
</div>
<div className="navbar__navigation-items">
<ul>
<li><NavLink to="/" activeClassName="is-active" exact={true}>Home</NavLink></li>
<li><NavLink to="/projekt" activeClassName="is-active">Project</NavLink></li>
<li><NavLink to="/team" activeClassName="is-active" exact={true}>Team</NavLink></li>
<li><NavLink to="/kontakt" activeClassName="is-active">Kontakt</NavLink></li>
</ul>
</div>
</div>
</nav>
);

Answer 2

I would add flex: 1 to the .navbar__title. It will push everything after it to the right as much as it can.

Answer 3

Use flexbox for the items. I did change the code a bit, and made it HTML-CSS friendly, so adapt it for React (className, RouterLinks etc).
Summary: The Nav has display: flex applied and it has 2 child elements (Logo+Title and Menu), and I added justify-content: space-between.
In the <ul> class, I added another display: flex so the items are behaved as a row. By default, the flex-direction is row. If you want anything as column, you must add flex-direction: column.
Here is a working snippet:
* {
list-style: none;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar__navigation-items ul {
display: flex;
}
.navbar__navigation-items ul li {
margin-right: 10px;
}
<nav class="navbar">
<div class="container">
<div class="navbar__bubble">
<IoIosChatbubbles size="2.3em"></IoIosChatbubbles>
</div>
<div class="navbar__title">
<h2>Our project</h2>
</div>
</div>
<div class="navbar__navigation-items">
<ul>
<li>Home</li>
<li>Project</li>
<li>Team</li>
<li>Kontakt</li>
</ul>
</div>
</nav>

Answer 4

All you need to do, is to add margin-left: auto for your navbar__navigation-items style.
That will position your navbar__navigation-items to the right and push everything else within the same container to the left.
Another option would be to use flexbox. For your container apply display: flexbox to it. and add justify-content: space-between; and it will also work. But this will control all other elements within container to behave based on that call.
Check below, I've done it and all works.
.navbar {
background: #E3E9EE;
position: fixed;
width: 100%;
top: 0;
padding: .7rem 0;
height: 80px;
display: flex;
border-bottom: 1px solid lighten(#2C465F, 30%);
}
.container {
max-width: 115rem;
padding: 0 $m-size;
display: flex;
width: 100%;
}
.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;
margin-left: auto;
}
.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;
}
.navbar__navigation-items a:hover,
.navbar__navigation-items a:active {
color: #2C465F;
}
.navbar__subtitle {
margin-top: 28px;
}
<nav class="navbar">
<div class="container" >
<div class="navbar__title">
<h2>Our project</h2>
</div>
<div class="navbar__navigation-items">
<ul>
<li><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
<li><a>Four</a></li>
</ul>
</div>
</div>
</nav>

Answer 5

there is multiple ways to do it but adding
float: right
to
.navbar__navigation-items {
margin-top: 30px;
font-size: $m-size;
float: right;
}
should do the trick,
might need to add width: 100% to the container aswell
.container {
max-width: 115rem;
margin: 0 10rem;
padding: 0 $m-size;
display: flex;
width: 100%;
}
Edit:
i agree that float is not the best tool but i suggested it because he already use it in his code and it required only css changes but https://stackoverflow.com/a/63427704/8382007 answer with width to 100%
.container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
surely is better