Website tab-line scaling switch points

[Finii]

🎯 Subject of the issue

On the website www.nerdfonts.com the tab bar has a strange behavior when the screen width changes...

When decreasing the width from 'very wide' at some point the tab bar will wrap to a second line, and with further width decrease it will switch to shorter tab-titles and the to a smaller font.

The switchover points seem to be wrong. Maybe they are font dependent?

Experienced behavior:

full width

smaller wraps tab-line into second line

smaller wraps more

smaller switches to short titles, but still to long

smaller, now a smaller font is used

[Ayush-gupta-dev]

I have gone through your readme.md file, and i would like to contribute in this repository, please assign this issue to me @Finii .

[Finii]

Assigned ;) The website is in the gh-pages branch. You can check your changes locally by running jekyll s on your machine and pointing your browser to the URL given by jekyll

[Ayush-gupta-dev]

@Finii confirming, in this image you basically want to display all short titles in one line?

[Finii]

Yes.

The tab line should be one line, always (as far as I think tab lines should work).

We have several switchover points. Obviously the switchover points (depending on SCREEN width) do not match the actual font used or something.

Switching to short-tab-titles ("CHEAT CHEAT" -> "ICONS", etc) must come earlier (i.e. with wider widths already), to avoid two lined tab-line.

Switching to the smaller font also is too late.

In the upper image switch to the short titles should come when the tab-line starts to overflow. Now we overflow two items before it switches to short titles.

And then, the lower image: The tab lines is now too short already for short titles with big font, here it should already be short-titles small font.

[Ayush-gupta-dev]

okay i understood your problem, you basically want a better responsive navbar for your website.

There are bugs too in the navbar.

since links are lot do you want me to add collapse navigation feature for smaller screens? @Finii

[Finii]

Hmm, why are there the tab titles in long-form and short-form, both? From the code that should be impossible? What browser is that?

add collapse navigation feature

Not sure what that is. I guess when the width is too small for even the short titles with small font we could dispense of some tabs, but cheat-sheet/icons and fonts-downloads/fonts should always be there I guess

[Finii]

In fact we have these 'zoom levels':

/*
 super tiny size (phones)
 point at which nav wraps
 without decrease font size
 */
@media only screen and (max-width: 326px) {
}

/* tiny size (phones) */
@media only screen and (max-width: 380px) {
}

/* mid size (tablets, landscapes) */
@media only screen and (max-width: 679px) {
}

/* anything not desktop */
@media only screen and (max-width: 767px) {
}

Nav should only wrap at 'super tiny size', as commented. I guess the pixel widths given here are just slightly off.

[Finii]

This fixes the first wrong switchover point, i.e. long-title to short-title:

diff --git a/_includes/css/skeleton.scss b/_includes/css/skeleton.scss
index 46bc86e37..3eb15b1d0 100644
--- a/_includes/css/skeleton.scss
+++ b/_includes/css/skeleton.scss
@@ -91,14 +91,14 @@
   }

 /* top nav tweaks */
-@media(min-width:768px) {
+@media(min-width:940px) {
        .hide-on-larger-view {
                display: none !important;
        }

 }

-@media(max-width:767px) {
+@media(max-width:939px) {
        .hide-on-smaller-view {
                display: none !important;
        }

[Finii]

And this fixes the second switchover point

index 64f2c3814..4585a0066 100644
--- a/_includes/css/nerd-font-tweaks.scss
+++ b/_includes/css/nerd-font-tweaks.scss
@@ -679,6 +679,13 @@ a.nerd-font-button:before {
        }
 }

+@media only screen and (max-width: 785px) {
+       nav ul li {
+               min-width: 50px;
+               line-height: 40px;
+       }
+}
+
 /* anything not desktop */
 @media only screen and (max-width: 767px) {
        .container h1 {

[Finii]

That was so easy that even me who does never do any web programming, could finally manage it, after you pointed me in the right direction! Thanks for the input!

[Ayush-gupta-dev]

nice!

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity (i.e. last half year) after it was closed. It helps our maintainers focus on the active issues. If you have found a problem that seems similar, please open a new issue, complete the issue template with all the details necessary to reproduce, and mention this issue as reference.