I am new to this topic.
Following a tutorial on the internet about HTML/CSS/Bootstrap.
I would like to move the navbar to the right hand side (top) of the page, see below what I expect is to see bar the right side, I wrote it manually on the screenshot…
but instead appers in the left side, as it is exaclty above…
I did my research by myself and to fix that I need to add to
<ul class="navbar-nav">
Into
<ul class="navbar-nav mr-auto">
But it doesn’t work, what could be wrong?
Here is my code:
* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
#nav-bar {
position: sticky;
top: 0;
z-index: 10;
}
.navbar {
background-image: linear-gradient(to right, #a517ba, #5f1782);
padding: 0 !important;
/* Remove flex-direction: column; */
}
.navbar-brand img {
height: 40px;
padding-left: 20px;
}
.navbar-brand li {
padding: 0 10px;
}
.navbar-brand li a {
color: #FFD166 !important;
font-weight: 600;
text-align: left;
}
.fa-bars {
color: #FFD166;
font-size: 30px !important;
}
.navbar-toggler {
outline: none !important;
}
#banner {
background-image: linear-gradient(to right, #a517ba, #5f1782);
color: #fff;
padding-top: 5%;
}
.promo-title {
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}
.play-btn {
width: 45px;
margin: 20px;
}
#banner a {
color: #fff;
text-decoration: none;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nome</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #EFEFEF;">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="https://picsum.photos/400"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #FFD166;">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #FFD166;">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #FFD166;">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #FFD166;">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color: #FFD166;">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<section id="banner">
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<p class="promo-title">Esercizio Luglio 2023</p>
<p>Check the tutorials</p>
<a href="#"><img src="https://picsum.photos/400" class="play-btn">Watch Tutorials</a>
<div class="col-md-6 text-center">
<img src="https://picsum.photos/400" class="image-fluid" style="width: 200px; float: left; margin-right: 20px;">
</div>
</div>
</div>
</section>
</body>
</html>
2
Answers
Try This:
Explanation:
Since your navbar elements were placed in a flexbox I added
justify-content-endto the flexbox container containing them.Reference: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
Actually, you would want to set the left margin to auto to take up all available space and move the content all the way to the right. However, in Bootstrap 5, "Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., start and end in lieu of left and right.
Thefore, you should use the class
ms-autoto setmargin-start: auto