Hi there! I’d really appreciate some help on getting my navigation bar to align to the right. I’ve tried various things but just can’t figure it out, so it’s time to ask for help.
I’m quite sure that my code is messy since I’m really new to this. I tried to use float:right on various elements, but nothing seems to stick. Sometimes if I put float: right onto an element it just changes the order of the nav-bar.
Here’s the link to the Codepen, and I’ll put the code below.
HTML
<body>
<header id="header">
<img src="https://i.ibb.co/xCLzd7w/coffeeweed.png" id="header-img">
<h1 id="title">Morning Cup of Jane</h1>
<nav class="nav-bar">
<ul>
<li class="nav-link"><a href="#">Home<a></li>
<li class="nav-link"><a href="#">About</a></li>
<li class="nav-link"><a href="#">Weed</a></li>
<li class="nav-link"><a href="#">Coffee</a></li>
</ul>
</nav>
<!--Navigation bar and Header image-->
</header>
CSS
h1 {
font-family: Georgia;
color: white;
text-align: ;
text-shadow: ;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
}
h2 {
font-family: Open Sans;
text-align: center;
}
p {
font-family: Open Sans;
}
div {
width: 900px;
margin: 0 auto;
}
nav {
color: white;
}
ul * {
list-style: none;
display: inline;
}
li {
text-decoration: none;
}
body {
display: flex;
flex-direction: column;
}
@media all and (max-width: 400px) {
.container {
display: flex;
flex: 1;
flex-basis: 100%;
flex-wrap: wrap;
}}
#header {
position: sticky; top: 0;
display: flex;
background-color: #6B8E23;
height: 100px;
}
#header-img {
height: 100px;
width: 100px;
}
#title {
}
#nav-bar {
}
.nav-link a {
text-decoration: none;
margin: 0;
}
.nav-link a:hover {
text-decoration: none;
}
.nav-link a.active {
text-decoration: none;
}
#video {
display: block;
text-align: center;
}
#form {
margin: 0 auto;
width: 200px;
}
#email {
}
#submit {
}
Hey holdenmad!
I used position: absolute; and right: 0;. Also added margins so it’s in the center. You can also use flex.
nav {
color: white;
margin-right: 2vw;
margin-top: 2vw;
position: absolute;
right: 0;
}
The problem is it’s responsiveness, try to make so it resizes correctly to smaller screens by using media queries or %, vw, vw, and em as units instead of pixels.
Also, I’m a musician as well! (Baritone) so if you ever have any questions I’ll be around.
Good luck Holden!
1 Like
Hi…
I have corrected your HTML and CSS. you did not close properly for tag.
Below I have updated your code. Paste the code in codepen and see the results.
HTML:
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!--Product: Weed dispensary, coffee -->
<body>
<header id="header">
<img src="https://i.ibb.co/xCLzd7w/coffeeweed.png" id="header-img">
<h1 id="title">Morning Cup of Jane</h1>
<nav class="nav-bar">
<ul>
<li class="nav-link"><a href="#">Home</a></li>
<li class="nav-link"><a href="#">About</a></li>
<li class="nav-link"><a href="#">Weed</a></li>
<li class="nav-link"><a href="#">Coffee</a></li>
</ul>
</nav>
<!--Navigation bar and Header image-->
</header>
<div>
<h2>About Us</h2>
<p>'Morning Cup of Jane' is a small "pop n' pop" café and dispensary inspired by Dutch "coffee shops". While in Holland, we of course loved the relaxed and casual vibe of Dutch coffee shops, and the quality of the weed, but were disappointed by the actual quality of the coffee. Our goal is to give you access to quality weed from knowledge staff, with excellent coffee that you can enjoy.</p>
<p>Along with
</p>
</div>
<div>
<h2>Our Herb</h2>
<p>Regardless of your experience, we're happy to lead you to some nice tasting bud. All of our employees are well educated in the science of the magical herb, and understand the levels of THC, CBD, and the effects of each strain. Whether you're using it medicinally or recreationally, we're happy to advise you. There's no right way to enjoy weed.</p>
</div>
<div id="video">
<!--Embedded video here-->
<p><b>For more information, check out this video:</b></p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5kNQ3m3J7Xc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div>
<h2>Our Coffee</h2>
<p>The coffee we serve you us locally roasted by [INSERT HERE], a high quality, third-wave roastery. We sat down with them and paired various strains with their roasts, giving an experience not unlike wine and cheese pairings.</p>
<p>Like wine, whisky, or coffee, weed has various tasting notes which--when smoking a high-quality bud--are prominent. When pair with an excellent coffee with complimentary notes, both your tasting experience and your high are enhanced.</p>
</div>
<div>
</div>
<br><br>
<div>
<h2>Sign up for our newsletter!</h2>
<form id="form">
<label>Name</label>
<input type="text" required>
<br>
<label>Email</label>
<input type="email" id="email" placeholder="xxx@xxx.xxx" required>
<br><br>
<input type="submit" id="submit">
</form>
</div>
</body>
CSS:
h1 {
font-family: Georgia;
color: white;
float: left;
text-shadow: none;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
width: 50%;
}
h2 {
font-family: Open Sans;
text-align: center;
}
p {
font-family: Open Sans;
}
div {
width: 900px;
margin: 0 auto;
}
nav {
color: white;
float: right;
width: 50%;
text-align:right;
}
ul {
display: block;
margin-top: 40px;
}
ul * {
list-style: none;
text-decoration: none;
display: inline;
margin:0 20px;
}
li a{
color: #fff;
}
body {
display: flex;
flex-direction: column;
}
@media all and (max-width: 400px) {
.container {
display: flex;
flex: 1;
flex-basis: 100%;
flex-wrap: wrap;
}}
#header {
position: sticky; top: 0;
display: flex;
background-color: #6B8E23;
height: 100px;
}
#header-img {
height: 100px;
width: 100px;
}
#title {
}
#nav-bar {
}
.nav-link a {
text-decoration: none;
margin: 0;
}
.nav-link a:hover {
text-decoration: none;
}
.nav-link a.active {
text-decoration: none;
}
#video {
display: block;
text-align: center;
}
#form {
margin: 0 auto;
width: 200px;
}
#email {
}
#submit {
}
1 Like
Please don’t use absolute positioning or floats for this. Use Flexbox. You can just give the nav margin-left auto.
nav {
color: white;
/* to vertically align */
display: flex;
align-items: center;
/* push the nav to the right */
margin-left: auto;
/* move it a bit back away from the edge */
margin-right: 20px;
}
And as said you need to close your <a> tag on line 13
1 Like
Thanks for the help and also hi fellow musician! 
I’ll look back at media queries at the lessons on it again. That does make sense to use another unit besides pixels!
Just out of curiosity, are there any practical differences between this solution and a flex solution?
Thanks for the solution with the notes and for pointing out exactly what line needed closing. It’s really helpful.
Sorry if it’s a dumb question, but why shouldn’t absolute positioning or floats be used for this, or why is Flexbox the better solution for positioning the navigation bar?
Positioning (especially absolute), should be used sparingly when appropriate and needed. Most times there are better solutions and it should almost never be used for doing normal element layout. It breaks the normal document flow and it is not the correct way to do layouts.
There are exceptions to this rule, like if you want to have elements on top of each other, elements that overlap, menus that should not push other content when open, etc. use cases that require elements to be taken out of normal document flow. Other positioning like fixed has similar specific use cases.
Float is just outdated and can have potential side effects that there really is no need to have to worry about. Use float for the intended purpose, floating text around elements, not for doing layout.
Flexbox was specifically made for layout use it when you can. Same with CSS grid.
1 Like
Awesome thank you that’s really clear. I’ll have to do some more work learning Flexbox then. 