top bar overflow issues [fixed]
So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one.
Quite a large bug caused by overflow issues in the main header, i think this can be resolved by changing the header to be a fixed height and scroll, or make it a dropdown toggle.
Not sure what is the most useful here.
Bug Status:
Pending
Demo Link
https://www.kruxor.com/view/nz_postcodes/lujBt/wray-street-brockville-dunedin/
Solution
Set a max height to one row on the top bar, and then add a toggle button that can show all the content if activated.
Add a transition to the element, as it will be moving when the toggle is clicked.
Then the toggle button will need to change the max-height:30px to max-height: fit-content which will probably need to be done with javascript. set max height js
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";
}
