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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
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.