The 3 center elements of my navbar have all merged within one another . I have tried giving margin between the contents but nothing seems to workthis is how it looks
@import url('https://fonts.googleapis.com/css2?family=Great Vibes&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav-item {
margin-left: 10rem;
}
.nav-link {
font-size: 1.6rem;
font-weight: 400;
color: #475569;
}
.nav-link:hover {
color: #482ff7;
}
.topnav {
position: relative;
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: black;
text-decoration: none;
}
.topnav a.active {
color: white;
}
.topnav-centered a {
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
}
.topnav-right {
float: right;
}
.nav-logo {
font-size: 4.1rem;
font-weight: 400;
color: #a9a9a9;
font-family: "Great Vibes", Georgia, serif, system-ui;
text-decoration: none;
padding-top: 2rem;
padding-bottom: 3rem;
}<!doctype html>
<html lang="en">
<head>
<title>Mercantilism Services LLP</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
<div class="topnav">
<a href="#" class="nav-logo">Mercantilism Services LLP</a>
<div class="topnav-centered">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">CONTACT Us</a></li>
<li class="nav-item"><a href="#" class="nav-link">BLOG</a></li>
</div>
<div class="topnav-right">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg></a>
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</body>
</html>Any help would be appreciated. Also the font size dosent seem to chnage for the logo no matter how hard i try. Please if any one has any suggestions......
CodePudding user response：
You are using position: absolute; for a element. Remove it (also left, top and transform will not be necessary). And add display: flex; to .topnav-centered element, consider changing to ul tag, this is correct parent for li tag. Also In code snipped you provided font in logo is working.
CodePudding user response：
Here's the correct css. You can change it if you want to.
@import url('https://fonts.googleapis.com/css2?family=Great Vibes&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.nav-link {
font-size: 1.6rem;
font-weight: 400;
color: #475569;
}
.nav-link:hover {
color: #482ff7;
}
.topnav {
background-color: #333;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: black;
text-decoration: none;
}
.topnav a.active {
color: white;
}
.topnav-centered li{
float:left;
}
.nav-logo {
font-size: 4.1rem;
font-weight: 400;
color: #a9a9a9;
font-family: "Great Vibes", Georgia, serif, system-ui;
text-decoration: none;
padding-top: 2rem;
padding-bottom: 3rem;
}
@media only screen and (min-width: 480px){
.topnav{
flex-direction: row;
}
}
I removed the entire .topnav-centered a and .nav-item blocks and replaced it with
.topnav-centered li{
float:left;
}
And changed .topnav into a flex container to align everything and with some minor tweaks your good to go.