After fixing the position of my navbar with the class "top," I noticed that the transform property scale does not work on the div element I applied. The hover effect on the box only works when I remove the position from the navbar.
This is the HTML code:
<header>
<div class="container">
<div class="top">
<div class="logo">Lower Usuma Dam</div>
<div class="nav">
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#photos">Photos</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
These are the CSS styles:
.box-1:hover,
.box-2:hover,
.box-3:hover,
.box-4:hover {
transform: scale(1.1);
transition: 0.9s;
}
.top {
/* position: fixed;
left: 0;
top: 0;
z-index: 1; */
display: flex;
justify-content: space-between;
align-content: center;
width: 100%;
height: 100%;
line-height: 4em;
}