Greetings, everyone. I am new to CSS and HTML, embarking on my very first project.
Currently, my focus is on creating a navigation menu where I aim to move two items ("SIGN IN" and "CART") to the right side, separate from the rest of the navbar elements. However, despite multiple attempts, I am unable to achieve this desired positioning. The class 'navbar-right' did not yield the desired outcome. Additionally, enclosing the items within a container with relative positioning disrupted the responsiveness of the navbar upon screen size reduction. Moreover, there seems to be an issue with displaying the shopping cart glyphicon.
The code snippet from my main.css file is as follows -
<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a667a65">[email protected]</a>/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>
...
In my styles.css, the relevant sections include -
#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;
}
/* For attempting relative positioning which affected responsiveness */
#moveRight{
position:relative; left:200px;
}
li { margin-left: 15px }
...