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";
	}

Page Views

This page has been viewed 94 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
You want to be the best, you MUST put the long yards in! Nothing comes easy in life so stop wishing and start DOING! So many people would rather bitch and moan than help themselves. Dont be one of those negative drainers, start today, make a small change and keep going forwards with this attitude!
Unknown