top bar overflow issues [fixed]

HTML

<!-- Add a Toggle Button to the Nav -->
<a href="#!" id="second_nav_toggle" onclick="second_nav_toggle();" class="second_nav_toggle"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg></a>

CSS

/* Set a max height on this element and then hide all the content */
.nav-scroller {
    max-height:30px;
    overflow-x:hidden;
    overflow-y:hidden;
    transition: all 0.3s;
}

/* Design the Secondary Nav Toggle Button */
.second_nav_toggle {
  padding:3px 3px 0px 3px;
  border:1px solid;
  border-radius: 3px;
  height:23px;
  width:24px;
  text-align: center;
  display:inline-block;
  margin-top: 3px;
}
.light-mode .second_nav_toggle {
    color: #656565;
    border-color: #c9c9ca;
}
.light-mode .second_nav_toggle:hover {
    background: var(--light-mode-2);
}
.dark-mode .second_nav_toggle:hover {
  background:#2e3c50;
}
.dark-mode .second_nav_toggle {
    border-color: #2e3c50;
}

Javascript

function second_nav_toggle() {
		document.getElementsByClassName( "nav-scroller" )[0].style.maxHeight = "none";
	}