How to blend navigation bar and background picture in html css-CodePudding

I have been trying to create a website using HTML and CSS by watching a tutorial. As in the tutorial they have their Navigation bar and background blended in I did everything the same as their code except for a few pictures but my nav bar has a sharp outline which is pretty visible

my website

tutorial's website

I'm just learning HTML and CSS so any help is appreciated. Thanks!



*{
    margin: 0;
    padding: 0;

}

.navbar{
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    cursor: pointer;
  
 
}
.nav-list{
   width: 50%;
  
   align-items: center;
   display: flex;
}

.nav-list li{
    list-style: none;
    padding: 20px 30px;

}

.nav-list li a{
text-decoration: none;
color: white;
}
.nav-list li a:hover{
    text-decoration: none;
    color: blue;
    }

.rightNav{
   
    width: 50%;
    text-align: right;
}


.logo{
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.logo img
{
    width: 35%;
    border: 3px solid white;
    border-radius: 50px;
}


#search{
    padding: 5px;
    font-size: 17px;
    border: 2px solid goldenrod;
    border-radius: 9px;
}


.background{
    background: rgba(0, 0, 0, 0.7) url(/img//back.jpg) ;
   
    background-size: cover;
    background-blend-mode: darken;
}

.box-main{
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
max-width: 50%;
margin: auto;
height: 80%;
}




.firsthalf{
    width: 80%;
    display: flex;
    justify-content: center;
    flex-direction: column;

}

.sndhalf{
    width: 30%;
    
}


.firstsection{
    height: 100vh;  
}

.sndhalf img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    /* width: 60%;

    border: 4px white;
    border-radius: 150px; */
    display: block;
    margin: auto;
}


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>ABCD</title>
</head>

<body>
    <nav >
        <ul >
            <div ><img src="img/logo" alt="logo"></div>
            <li><a href="#home">home</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#Services">Services</a></li>
            <li><a href="#Contact_us">contact Us</a></li>
        </ul>
        <div >
            <input type="text" name="search" id="search">
            <button >search</button>
        </div>
    </nav>
    <section >
        <div >
            <div >
                <p >big text</p>
                <p >small text</p>

CodePudding user response：

Try change your navbar's position to absolute (it's sticky at the moment), then remove the .background class from <nav > - you're repeating the background in the navbar, that's why you're getting the line.

You'll need to add some margin-top to the first section that follows the navbar, or it'll sit underneath the navbar.

CodePudding user response：

Please put navbar inside first section and remove .background class from <nav> element.

Like:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>ABCD</title>
</head>

<body>
        <section >
          <nav >
            <ul >
                <div ><img src="img/logo" alt="logo"></div>
                <li><a href="#home">home</a></li>
                <li><a href="#about">about</a></li>
                <li><a href="#Services">Services</a></li>
                <li><a href="#Contact_us">contact Us</a></li>
            </ul>
            <div >
                <input type="text" name="search" id="search">
                <button >search</button>
            </div>
           </nav>
           <div >
             <div >
               <p >big text</p>
               <p >small text</p>
             </div>
           </div>
         </section>
      </body>
    </html>