Good evening,
I’m trying to integrate a navbar and I can’t align the logo on the left and the menus on the right.
https://codepen.io/aaashpnt-the-sans/pen/VwJaxjL
Can you help me ?
Something like this will get you started:
.bar {
width: 100%;
}
.navbar {
display: flex;
align-items: center;
}
.navbar ul {
display: flex;
margin-left: auto;
list-style: none;
}
2 Likes
Thank you for your help
on a normal screen it works, on a larger screen of size 23 the menu is much lower.
on a normal screen it works, on a larger screen of size 23 the menu is much lower.
it might be due to the padding or the height of the .navbar not being enough to accommodate the content, or due to other elements affecting the layout.
To make a good start on this, it might be a good idea to remove the head section and script link from your html.
In codepen you should only be putting the contents of the body in the HTML shell.
e.g. just this
<div class="bar">
<nav class="navbar">
<div class="logo">Logo</div>
<ul>
<li><a href=""><i class="fas fa-home"></i>Home</a></li>
<li><a href=""><i class="fas fa-info-circle"></i>About</a></li>
<li><a href=""><i class="fas fa-cogs"></i>Services</a></li>
<li><a href=""><i class="fas fa-envelope"></i>Contact</a></li>
</ul>
</nav>
</div>
<img src="smartcontract.png" alt="">
<div class="langs">
<a href="#" language="francais" class="active">FRA</a>
<a href="#" language="english">ENG</a>
<a href="#" language="neerlandais">NLD</a>
</div>
<div class="content">
<h1 class="title">LA PROPRIÉTÉ RÉINVENTÉE</h1>
<p class="description">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</p>
</div>
If you need to add external CSS stylesheets like font-awesome, you can do that from your settings top right.
With regards not needing the script link e.g. <script src="script.js"></script>, the code in the codepen JS shell is automatically added as a link.