Skip to content

updated navbar styles and added home link#131

Open
ChrisDietrich405 wants to merge 3 commits intocivictechdc:mainfrom
ChrisDietrich405:main
Open

updated navbar styles and added home link#131
ChrisDietrich405 wants to merge 3 commits intocivictechdc:mainfrom
ChrisDietrich405:main

Conversation

@ChrisDietrich405
Copy link

This PR introduces a few improvements focused on improving the user experience and accessibility of the site. The changes include:

Logo Size Reduction: Reduced the logo size to improve overall page aesthetics

Added Home Link for Accessibility: Introduced a home link to improve navigation for users relying on screen readers, ensuring better accessibility.

Margin Adjustment for Mobile Hamburger Menu: Added a small margin-right to the hamburger menu on mobile to create better spacing and improve touch usability.

@sheldon-b
Copy link
Member

Hey @ChrisDietrich405 -- sorry that I'm just now seeing this PR. I'll add it to my list to review it <3

@ChrisDietrich405
Copy link
Author

ChrisDietrich405 commented Jan 19, 2025 via email

Copy link
Member

@sheldon-b sheldon-b left a comment

Choose a reason for hiding this comment

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

I like the addition of the hero image but I have questions/feedback on the other changes

Can you please merge in latest main, run npm run lint to normalize the formatting, and address the comments I made? Thanks!

<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="{{ site.baseurl }}/">
<span>Home</span>
Copy link
Member

Choose a reason for hiding this comment

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

I like the addition of the home page to the menu 👍

</a>
</div>
<button type="button" class="usa-menu-btn">Menu</button>
<button type="button" id="navbar-hamburger-menu" class="usa-menu-btn">Menu</button>
Copy link
Member

Choose a reason for hiding this comment

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

Can you please explain what the intention here is and how to test it? I checked out this branch and couldn't visually see the 10px right margin. Perhaps a before/after screenshot?

Comment on lines +18 to +19
.ctdc_logo>img {
max-height: 4rem;
Copy link
Member

Choose a reason for hiding this comment

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

This makes the too small. I prefer to keep it at 8rem

Perhaps we should align the menu lower with the top of the hero image instead of centered between the top of the screen and the hero image

Sign up for free to 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.

2 participants