site bugs
Posted in
9435
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
266
This Month
1048
This Year
1125
Add Comment
Other Items in site bugs
making the search page nicer
add hero title to category listing page [not done]
category listing not working on categories with spaces [not fixed]
Changing the default hero image based on the category name [not yet done]
still more comment spam
search bug Above
weird search results being recorded
this is a weird one table underline appearing and dissapearing on mouse over
change images to upload file also to imgur [reported]
install codemirror for textareas [added]
add a youtube video preloader function, lazy load youtube [fixed]
spin rotate an element on mouse over [css]
add a comment recording system for posts [idea]
fix view page for search links [reported]
should have a different menu colour [reported]
style page numbers [fixed]
linking search results to view pages [finished] 🤣
badge border colour is too dark or light on number badges [fixed]
badge placement is offset in list pages [fixed]
top bar overflow issues [fixed]
Related Search Terms
Other Categories in Code
alpine js apps c css factorio font awesome images linux quick modals sqlite site bugs site updates slick slider sliders testing windows apps apache api apps asp bat bootstrap bootstrap templates charts cookies core css css filters css grid design elements docker domains emoji fancybox fonts foundation framework gimp git html icons ideas image formatting images javascript javascript functions jquery js linux mac misc modals mysql nginx node php php errors php function php functions php simple html dom pi400 python react regex sections simple_html_dom simplepie php site bugs site documentation slick slider sql sqlite ssh sublime svg svg css templates tools virtual box vscode vue webdev windows windows 11 windows commands wordpress
