Currently, I have successfully implemented a sticky top navbar. The issue arises when I try to add a 15vw margin to the right side of the logo image, similar to what I have done on the left side. Despite my attempts, it doesn't seem to work and I'm unsure why. As a newcomer to this field, I believe there must be a straightforward solution that I am overlooking!
Here is the HTML code:
<!-- Navigation Bar -->
<nav class="navbar">
<a class="nav-logo" href="index.html"><img src="https://i.imgur.com/1LnAM3W.png" title="Home" height="50px"></a>
<b class="filler"></b>
<a id="about-us" class="nav-link" href="about_us.html">About Us</a>
<a id="our-mentors" class="nav-link active" href="our_mentors.html">Our Mentors<a/>
<a id="bookings" class="nav-link" href="bookings.html">Bookings</a>
<a id="contact" class="nav-link" href="contact_us.html">Contact</a>
</nav>
Additionally, here is the corresponding CSS code:
/* Styling for the navigation bar */
.navbar {
display: grid;
grid-template-rows: 55px;
grid-template-columns: max-content 1fr max-content max-content max-content max-content;
grid-template-areas: "nav-logo filler about-us our-mentors bookings contact-us";
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
}
.nav-logo {
grid-area: "nav-logo";
position: fixed;
margin-left: 15vw;
}
.filler { grid-area: filler;
background: white }
#about-us { grid-area: about-us }
#our-mentors { grid-area: our-mentors }
#bookings { grid-area: bookings }
#contact-us { grid-area: contact-us;
margin-right: 15vw }
I continue to face issues with applying the margin to the "contact-us" grid item located on the far right. Unfortunately, even after following a non-bootstrap approach, the problem persists. Any insights or suggestions would be greatly appreciated.