Home > Blockchain >  My navbar contents are merged within one another
My navbar contents are merged within one another

Time:10-21

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.

  • Related