[FEATURE] Fixing Navbar on Mobile to Stay in Place instead of Pushing Content Down [good first issue]

[Aadarsh805]

Description

Currently, whenever the navbar is opened on a mobile-sized screen, it pushes down the main page content down It'd be better to have it fixed and open above the content mobile-sized

Screenshots

Currently

After changes proposed

Additional information

If it's approved, it's a good first issue for beginners to work on

[github-actions[bot]]

It's great having you contribute to this project

Welcome to the community :nerd_face:

If you would like to continue contributing to open source and would like to do it with an awesome inclusive community, you should join our Discord chat and our GitHub Organisation - we help and encourage each other to contribute to open source little and often 🤓 . Any questions let us know.

[imtiazpy]

Hi @Aadarsh805 I would like to work on this.

Note: Do you want it to be transparent as well, so that the content underneath can be seen?

[Aadarsh805]

Hi @Aadarsh805 I would like to work on this.

Note: Do you want it to be transparent as well, so that the content underneath can be seen?

Let a maintainer have a look at this, they'll assign you as well I think making it transparent will disturb the color theme

[imtiazpy]

I understand your perspective, but recreating the design in the same way as before may result in the navigation bar covering up the content. This would make the content invisible again. @Aadarsh805

[ManishBisht777]

Hi @Aadarsh805 I would like to work on this.

Note: Do you want it to be transparent as well, so that the content underneath can be seen?

I think if someone is opening the menu then their focus will be on the menu itself, making the navbar transparent will make the background text and the nav links text blend a bit causing it difficult to read for users as well.

[rohinish404]

How about making this action a bit more smooth by adding transition?

[Aadarsh805]

Yes make sure to add the transition, whoever that is going to work on this

[Aadarsh805]

@Pradumnasaraf can you please review the issue and the suggestions which one to go for, also do assign imtiazpy if the issue is valid

[Aadarsh805]

I understand your perspective, but recreating the design in the same way as before may result in the navigation bar covering up the content. This would make the content invisible again. @Aadarsh805

The content being visible is not the issue that's being addressed, it's the shifting in the layout that should not happen like that for no reason

[imtiazpy]

I got it @Aadarsh805

Waiting for a maintainer to have a look into the issue and assign me.

[Pradumnasaraf]

@Pradumnasaraf can you please review the issue and the suggestions which one to go for, also do assign imtiazpy if the issue is valid

Hey, I am not sure about this UI addition. Tagging @eddiejaoude

[k99sharma]

Hey, @Aadarsh805 I added the PR a while back to make the navbar functional. In my opinion, you should add a transition to it making it look smoother, but the content pushing makes the UI cooler. What do you think? @eddiejaoude

[eddiejaoude]

Great discussion everyone, lots of great ideas 👍

I think we should do small steps so we can see and test the improvements. So I think the first and most simple step that adds value is making it transition first, then we can take it from there

[Aadarsh805]

@imtiazpy you can start with this, If you're free

[SaraJaoude]

This does not appear to be causing any challenges at the moment, so I will close this for now.