Resolved: Need assistance with structuring a navbar

Question:

I recently started developing my own website and I require some help from people who are more advanced in CSS and HTML. I am struggling with navbar alignment. I want my middle part as in “beginning” “about me” and “statistics” to be exactly in the middle. “Objectives” and “contact” to the right, logo to the left. Main problem is that I can’t figure out how to perfectly align everything so the distance between left and right remains the same, as well as the middle part of the navbar. And yes, I am trying to make the website responsive so it looks good on every device. My end goal is to make an awesome portfolio site that also showcases my skill a little. I also haven’t used bootstrap but I included it in my code. Sorry for a long text, I am very new to this so it’s hard for me to describe the problem. My code is also very messy so if anyone has time to correct/give feedback, I would really really appreciate that.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
    <meta charset="UTF-8">
    <title>Live like legends</title><link rel="preload" as="font" href="https://devsfix.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v2.2" type="font/woff2" crossorigin="anonymous" />
    <link rel="stylesheet" href="./css/style.css">
    <script src="javakood.js"></script>
</head>
<body>
    <nav class="navbar">
    <!-- <input type="checkbox" id="check"> 
        <label for="check">
        <i class="fas fa-bars"></i>
        </label>
                                                -->
        <div class="logo">
            <img decoding="async" src="./veebipilt.png" width="128" height="56">
        </div>
            <ul class="menu">
                <li><a href="#">Beginning</a></li>
                <li><a href="#">About me</a></li>
                <li><a href="#">Statistics</a></li>
            </ul>

            <ul class="menu2">
                <li><a href="#">Objectives</a></li>
                <li><a class="special" href="#">Contact</a></li>
            </ul>   
    </nav>
<! Esimene vahemik veebilehes kus on tekst ja pilt korvuti---->
    <section class="home">      
        <div class="rida">
            <div class="tekstall">
                <h1>Tere tulemast minu lehele!</h1>
                <p>siia tuleb veel midagi lahedat veel ei tea</p>
            </div>
            <div class="piltnext">
                <img decoding="async" loading="lazy" src="./12345.jpg" width="500" height="300">
            </div>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <section class="about">
        <div class="tekstabout">
            <h1><mark>Veidi</mark> minust</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar{
    background: #cbcca3;
    position: fixed;
    width: 100%;
    padding: 15px 0;
    display: flex;
}
.home{
    background: url("./sigma.gif") no-repeat center;
    background-size: cover;
    height: 100vh;
}

.logo {
    float: left;
    line-height: 70px;
    margin-left: 30px;
    margin-right: 20px;
}
.menu{
    text-align: center;
    padding: 0;
    margin: 0;
    justify-content: space-between;
}

.menu2{
    padding: 0;
    margin: 0px 30px 0px 0px;
    list-style-type: none;
    text-align: center;
}

.navbar .menu li{
    display: inline-block;
    list-style-type: none;
    margin: 0px 20px 0px 20px;
}

.navbar .menu li a{
    font-size: 17px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    border-radius: 3px;

}
.navbar .menu2 li{
    display: inline-block;
    margin: 0px 20px 0px 20px;
}
.navbar .menu2 li a{
    font-size: 17px;
    text-transform: uppercase;
    line-height: 70px;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    border-radius: 3px;
}

a.special,a:hover{
    background-color: paleturquoise;
    transition: .5s;
}


p{
    color: floralwhite;
    
}

.rida{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tekstall{
    flex-basis: auto;
    min-width: 300px;
    margin-left: 20px;
    padding-left: 30px;

}

.piltnext{
    max-width: 100%;
    padding: 20px;
    height: auto;
    margin-top: 0px;
}

Answer:

Currently I’m working in laptop so my screen isn’t big. But, I made some adjustments to your code and I think it’s what you want.
You just need to define the width values for everything and make sure it all works in mobile to.
Regards

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar {
    background: #cbcca3;
    position: fixed;
    width: 100%;
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home {
    background: url("./sigma.gif") no-repeat center;
    background-size: cover;
    height: 100vh;
}

.logo {
    line-height: 70px;
    margin-left: 30px;
    margin-right: 20px;
    max-width: 20px;
  }
    
.menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 20px;
}

.menu a {
  margin: 0 5px;
  font-size: 17px;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
    border-radius: 3px;
}

.menu2{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 20px;
}

.menu2 a {
  margin: 0 5px;
  font-size: 17px;
    text-transform: uppercase;
    line-height: 70px;
    letter-spacing: 2px;
    text-shadow: -1px -1px blue;
    color: blueviolet;
    text-decoration: initial;
    padding: 5px 5px;
}


a.special,a:hover{
    background-color: paleturquoise;
    transition: .5s;
}


p{
    color: floralwhite;
    
}

.rida{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

<nav class="navbar">

        <div class="logo">
            <img decoding="async" src="./veebipilt.png" width="128" height="56">
        </div>
        
        <div class="menu">
          <div><a href="#">Beginning</a></div>
          <div><a href="#">About me</a></div>
          <div><a href="#">Statistics</a></div>
        </div>
        
        <div class="menu2">
            <div><a href="#">Objectives</a></div>
            <div><a class="special" href="#">Contact</a></div>
        </div>

    </nav>

If you have better answer, please add a comment about this, thank you!

Resolved: Need assistance with structuring a navbar

Resolved: How to convert Java bytecode to Webassembly using CheerpJ compiler

Resolved: Is pandas groupby() function always produce a DataFrame with the same order respect to the column we group by?

Resolved: Kivy widget hierarchy not behaving as expected

Leave A Reply