Skip to content

Conversation

@OmkarSonawane1230
Copy link
Contributor

This pull request addresses the issue of the side navigation bar disappearing when scrolling down the page. By making the my content height match window height and overflow of scroll, users can now access menu options without needing to scroll back to the top of the page

@chriscool
Copy link
Collaborator

@sivaraam could you take a look at this?

Copy link
Member

@sivaraamsivaraam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for the change. I have a suggestion. Kindly check the same.

css/main.css Outdated
Comment on lines 39 to 40
max-height:100svh;
overflow-y: scroll;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than making the a fixed-height for the whole page which might hurt accessibility a bit, could you try to make the sidebar sticky? 🤔

Copy link
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay I will do it that way

@OmkarSonawane1230
Copy link
ContributorAuthor

@sivaraam I change the navbar position to sticky, but in order to make it work I have to make the #wrapper height to window height and overflow scroll, now the position sticky will work when it is scrolled.

@OmkarSonawane1230
Copy link
ContributorAuthor

@sivaraam

I want to share some problems in the site

  • The .site container change its width according to its content, which create a horizontal scrollbar in some cases.
  • Inconsistencies in the font sizes used in .site
  • It is difficult to determine which menu item was selected after clicking on it. This lack of visual feedback made it challenging to navigate through the site.
  • The navbar shrinks when there is not enough space to fit the site which make it unreadable.

I have a solution for it

I think we should change the design for side navigation, I design a layout to solve the problem:

new design for git github io

This design not what I am building it is just for explaining my point, the actual design will be different and can be changed further.

In this layout the side navbar will hide on left side for small screen size, and it can be access by hamburger menu or side swap. Here it can will be easy to determine which menu is selected by the arrow in front of the menu item. there will be no horizontal scroll bar because we are using more horizontal space than before.

@chriscool
Copy link
Collaborator

@OmkarSonawane1230 This design looks good to me, but it should be discussed in a separate issue. Could you open a new issue with the above description? Thanks.

 modified: css/main.css new file: script/script.js
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@OmkarSonawane1230@chriscool@sivaraam