Can you please just make the current nav bar look like the one in the photo and just give code? Please I have been trying forever...thank you so much... Please just replace menu nothing else and list code thats it thanks

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 home
 
 About
 
 Services
 
 Projects
 
 Contact
 
 
 
 
 
 En
 
 
 
 
 
 
 
 
 
 
Hello!
 
 
 
 
I'm namelast name
 
 
 
 
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.
 
 
 
 
 
 
 
 
 
 
 
 
About us
 
 
I am a dev
 
 
 
 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.
 
 
 
 
 
 
 
 
 
  
 alt="student submitted image, transcription available below"
 
 src="about-me-alt.jpg"
 
 width="600"
 
 height="490"
 
 id="image"/>
 
 
 
js:
 
function toggleFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive_nav"; } else {x.className = "topnav"; }} css:
 
#about { width: 100%; height: 100vh; background-color: #010b0a; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 50px 5% 0px 5%; position: relative; } .about-text { font-family: calibri; width: 50%; } .about-text h1 { font-size: 5rem; color: #0ee4cc; } .about-text h2 { font-size: 3rem; color: #FFFFFF; font-weight: 400; } .about-text h1, h2 { margin: 0px; padding: 0px; } .about-text p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.90); } .about-text button { width: 180px; height: 40px; border-radius: 20px; border: none; outline: none; background-color: #0ee4cc; } .about-text button:hover { background-color: #FFFFFF; transition: all ease 0.3s; } #main { overflow: auto; padding: 30px 50px; width: 100%; height: 100vh; box-sizing: border-box; background-image: url("background.jpeg"); background-repeat: no-repeat; /*background-size: cover;background-position: center; /* added this */ /*background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; /*parallax*/ /*background-attachment: fixed;*/ background-position: center; /*use this*/ background-repeat: no-repeat; /*use this*/ background-size: cover; /*use this */ } #main::-webkit-scrollbar { display: none; } @media screen and (max-width: 900px) { #home { margin-top: 100px; } .topnav a { display: none; } .topnav a.icon { float: right; display: block; } .topnav.responsive_nav { position: relative; } .topnav.responsive_nav a.icon { position: absolute; right: 0; top: 0; left: 15px; } .topnav.responsive_nav a:not(:first-child) { float: none; display: block; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.10); color: #4feadb!important; margin: 10px 0 0 0; padding: 10px 0 !important; background-color: #0F0F0F; transition: 0.5s; border: 3px solid #1F1F1F; } .topnav.responsive_nav a:hover { /*background-color:rgba(27,29,32,0.15);*/ background-color: rgb(14 228 204 / 26%); } .lang { align-self: flex-start; padding-top: 10px; } } @media(max-width:900px) { .toggle span { display: block; width: 25px; height: 3px; background-color: black; margin: 6px 0; } .toggle:before { font-family: calibri; line-height: 0px; margin-left: -30px; } .active-menu { display: block !important; } .p-container { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-gap: 10px; height: auto; } .c-b-heading { font-size: 1.4rem; text-align: center; } #contact-form { padding: 20px; height: auto; box-sizing: border-box; } #contact-form form { flex-direction: column; height: auto; padding: 20px; width: 90% !important; } .contact-left, .contact-right { width: 100%; border: none; } .f-name, .f-email { width: 100%; } .f-name input, .f-email input { width: 100%; border: none; background-color: #262626 !important; padding: 10px; box-sizing: border-box; height: 40px; } textarea { background-color: #262626 !important; margin: 10px 0px; padding: 10px; height: 200px !important; width: 100% !important; } .message { margin: 0px; } #contact-form form h1 { margin: 5px 0px; } } .name { width: 50%; margin-top: 40vh; /*updated*/ margin-left: 10vw; /*updated*/ } .name p { font-family: calibri; line-height: 150%; padding: 15px 0; /* has beed added */ text-align: justify; /* has beed added */ } .name h1 { font-family: calibri; font-size: 4vw; margin: 0px; letter-spacing: 3px; color: #f4f7ff; } .name p:nth-child(1), .name .details { color: #f4f7ff; font-size: 20px; /* modified */ } nav { display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; font-weight: 600; letter-spacing: 0.2vw; /*updated*/ font-family: calibri; position: fixed; top: 0; left: 0; width: 100%; box-sizing: border-box; padding: 0.3vw 2vw; /*updated*/ background-color: #F4F7FF; box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.05); z-index: 10; } nav a { text-decoration: none; color: #010b0a } nav div a { float: left; padding: 5px 10px; } nav div a:hover { background-color: #0ee4cc; /*added*/ } nav div a:hover { color: #F4F7FF; /*added*/ } .responsive { width: 20%; height: 20%; align-self: flex-start; padding-top: 5px; } @media only screen and (max-width: 638px) { .responsive { width: 50%; height: 20%; align-self: flex-start; padding-top: 5px; } } } @media(max-width:970px) { .about-model { display: none; } #about { justify-content: center; padding-top: 0px; } .about-text { width: 90%; } .about-text h1 { font-size: 4rem; } .p-container { width: 100%; } } @media(max-width:1190px) { .about-model img { height: 400px; } #services { height: auto; } .b-container { flex-wrap: wrap; } .s-box { flex-grow: 1; } .s-b-img img { object-fit: cover; } #contact-form form { width: 95% !important; } } @media (max-width: 1200px) { .about-model { width: 100%; padding-left: 20px; } #image { height: 400px; width: 520px; } #about { justify-content: center; padding-top: 0px; } .about-text { width: 100%; } .about-text h1 { font-size: 4rem; } .about-text h2 { font-size: 3rem; } .p-container { width: 100%; } } @media (max-width: 960px) { .about-model { width: 100%; padding-left: 20px; } #image { width: 400px; } .about-text h1 { font-size: 3.5rem; } .about-text h2 { font-size: 2.5rem; } } @media (max-width: 768px) { .about-model { width: 100%; padding-left: 20px; } #image { width: 300px; height: 300px; } .about-text h1 { font-size: 3.2rem; } .about-text h2 { font-size: 2.2rem; } .about-text p { font-size: 1rem; color: rgba(255, 255, 255, 0.9); } } 
   HOME ABOUT SERVICES PROJECTS CONTACT