Posted in site bugs
9187
2:36 am, January 1, 2021
 

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

View Statistics
This Week
275
This Month
1017
This Year
877

No Items Found.

Add Comment
Type in a Nick Name here
 
Related Search Terms
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Ever tried. Ever failed. No matter. Try again. Fail again. Fail better. You won't believe what you can accomplish by attempting the impossible with the courage to repeatedly fail better.
Unknown
Random CSS Property

border-inline-style

The border-inline-style CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation.
border-inline-style css reference