Navbar Word Wrap on Small Screens

[RudraSen2]

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.
• [X] I have read the console error message carefully (if applicable).

Description

Names on the Navbar Wrap when using website on smaller screens (i.e. 13" Laptop, Tablet, iPad)

Screenshot below:

Reproducible demo

https://github.com/Comp-Labs/comp-labs-website

Steps to reproduce

1. Run the website on a smaller screen (13" Laptop, Tablet, iPad).
2. See the Navbar.

Expected behavior

The Navbar should look the same whether it is Small Laptop or a Big 24" Desktop.

Actual behavior

Navbar Items Wrap up on small screens as in the screenshot below.

Your environment

• Public source code: https://github.com/Comp-Labs/comp-labs-website
• Public site URL: https://complabs.in
• Docusaurus version used: 2.0.0-beta.21 (latest)
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome Version 102.0.5005.115 (Official Build) (64-bit) | Node v17.2.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11 Pro Dev Insider Build 25140.2000

Self-service

• [ ] I'd be willing to fix this bug myself.

[Josh-Cena]

Somehow duplicates of https://github.com/facebook/docusaurus/issues/3820 and https://github.com/facebook/docusaurus/issues/3958. For now, the only solution is to reduce the number of navbar items. One possible fix is to allow you to declare an icon to be used on medium-sized screens (#7566). Another one is to simply make it scrollable horizontally.

Do you have a good UX in mind?

[RudraSen2]

I thought of an idea: When Navbar items Excess, create an arrow slider automatically.

By the time this issue is fixed, I'll use the workaround of minifying navbar items.

[slorber]

Expected behavior: The Navbar should look the same whether it is Small Laptop or a Big 24" Desktop.

Hmmmm, no? Conceptually it seems perfectly reasonable to change the display according to the available space.

How can you expect us to "look the same" here?

Can you fix it manually and post a screenshot of your visual expectation?

---

Now I understand that your navbar looks ugly on small, non-mobile widths. And most likely it is because we actually don't change the design according to the available space (ie for example reducing font size or paddings for small widths or whatever). Ultimately, if you use 100th navbar items, we can't do much for you, and you'll have to consider using a shorter navbar or hiding yourself some items for small devices.

I thought of an idea: When Navbar items Excess, create an arrow slider automatically.

We have to support progressive enhancement and avoid hydration FOUC. Detecting "excess" probably requires JS, that might not be easy. Also not sur what you mean by "arrow slider", do you have any example site implementing a similar UX in a navbar?

[Josh-Cena]

Just an overflow-x: scroll or something similar, maybe? I'm not sure what "arrow slider" is either.

[RudraSen2]

Just an overflow-x: scroll or something similar, maybe? I'm not sure what "arrow slider" is either.

I think so similar to this

[RudraSen2]

I tested overflow-x: scroll and it works but in * CSS class. Does anyone know the CSS class for the navbar?

[RudraSen2]

How can I set CSS classes for the navbar? If there is a class for the navbar, I'll put an overflow-x: scroll below the navbar.

[RudraSen2]

I need a scrollbar automatically below the navbar if on a laptop or a smaller screen. Can anyone tell me how to do that?

[slorber]

I don't understand the question. It's impossible to help you: please invest some time to help us help you.

Which DOM element can't you target with custom CSS and you would like to?

The navbar has a class, you can easily see it by inspecting the DOM, and it can be targetted with nav.navbar

Now adding overflow-x: scroll doesn't seem to work well for me, so I'm not sure why you concludes it's the solution to your problems 🤷‍♂️ this looks more complex to me.

[RudraSen2]

I don't understand the question. It's impossible to help you: please invest some time to help us help you.

Which DOM element can't you target with custom CSS and you would like to?

The navbar has a class, you can easily see it by inspecting the DOM, and it can be targetted with nav.navbar

Now adding overflow-x: scroll doesn't seem to work well for me, so I'm not sure why you concludes it's the solution to your problems 🤷‍♂️ this looks more complex to me.

Can you tell me how to add scrollbar below the navbar and in a way that it looks good?

[slorber]

Can you tell me how to add scrollbar below the navbar and in a way that it looks good?

No: this seems more complex than just adding a single CSS rule and requires investigation. I can't dedicate time to this right now. Please try to investigate what is the CSS required to make it look good, using DevTools or custom stylesheets locally.

[RudraSen2]

I am now trying to mess up with the React Native website navbar. When I tested it on smaller screens, it automatically shows an option to scroll using the mouse. Will find out how it does that. Please tell me if anyone gets it.

[RudraSen2]

Can anyone help with making my navbar like React Native Site navbar? It looks like this on smaller screens:

TL;DR, I want to make a touch slider navbar like in picture above.

[RudraSen2]

I know this is off-topic, but How do I Put a Button or a component or something on every bottom of blog posts or docs?

[slorber]

@RudraSen2 please don't use issues as a support forum. I deleted your unrelated comment.

---

Thanks for referencing the ReactJS website UX: this would definitively be useful to implement it on Docusaurus.

However, we don't know yet how to implement it

You have 3 choices here:

• Implement the solution you want, on your own (we can't spend our time to help you specifically)
• Help us implement a generic solution for Docusaurus (it may take time until we prioritize this feature)
• Submit a PR with a generic solution that works for all Docusaurus sites (not just yours)

[RudraSen2]

Got better with this:

* {
  white-space: nowrap;
}

[RudraSen2]

Got better with this:

* {
  white-space: nowrap;
}

Navbar is almost fixed, but the other stuff on my website is not looking good. Can you tell me the CSS class for the navbar, like for the table, we use table {css-class: value;}. Is there something like this for the navbar?

[slorber]

Whenever you look for a class, open the dev tools and inspect the DOM to find it

[anniepauline]

I am a new bie to open source. What is the last task in this issue! I am up to work on it