Good day, everyone. Please I'm a newbie in CSS and HTML, and this is literally my first project.
So, I'm trying to build a navigation menu, and I'm trying to move two items("SIGN IN" and "CART") to the right, away from the other items on the navbar. But I can't seem to get them to move. navbar-right doesn't work. I've tried housing them inside a container and giving them a relative position, but then the navbar menu is not responsive when I decrease the size of the screen. Also, for some unknown reason, the glyphicon shopping cart item refuses to be displayed.
in my main.css, this is my code-
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Ecommerce</title>
{% load static %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<link rel="stylesheet"
href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{% static 'store/styles.css' %}" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light md-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Jumaz</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><i class="fa fa-fw fa-home"></i>Home</a>
</li>
<div id="formAndButton">
<form id="search" method="get" class="d-flex" action="#">
<input id="input" class="form-control me-2" type="text" placeholder="Search products" aria-label="Search">
<button class="btn btn-warning text-light" type="submit">SEARCH</button>
</form>
</div>
<!--i intend moving the following items to the right and make them responsive when screen is shrunk-->
<div class="navbar" id="moveRight">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#" class="btn btn-warning">SIGN IN</a>
</li>
<li class="nav-item">
<!-- glyphicon shopping cart item does not load -->
<a href="#" class="btn btn-warning"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>CART</a>
</li>
</ul>
</div>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
{% block body %}
{% endblock body %}
</body>
</html>
in my styles.css, i have -
#input{
width: 500px;
border: 1px solid #555;
display: block;
padding: 9px 4px 9px 40px;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}
#formAndButton{
margin-left: 100px;
}
/*i tried relative positioning of the items like this, but it isn't responsive when screen is shrunk*/
#moveRight{
position:relative; left:200px;
}
li { margin-left: 15px }
In my styles.css, I also tried-
#moveRight{
display: flex;
justify-content: flex-end;}
and also tried,
#moveRight{
grid-column-start: 5; }