Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OpenSource.org | Fix menu/header issues #104

Closed
toncijajic opened this issue Jul 10, 2024 · 8 comments
Closed

OpenSource.org | Fix menu/header issues #104

toncijajic opened this issue Jul 10, 2024 · 8 comments

Comments

@toncijajic
Copy link

While working on some other issues, we found several menu display issues across viewports which we want to resolve.

Details

Please see @geoffguillain findings when sorting some other mobile menu issues:

1- Some breakpoints do not show the menu:

image

2- the icons are not centered with the logo

image

3- There is no padding on the large and minimized header on mobile. I would suggest something more elegant like this:

image

4- The header disappears after scrolling on large devices

Was investigated here: #92 (comment)

It should be all fairly self-explanatory, but please ping us if any additional info is needed.

@geoffguillain
Copy link
Collaborator

Hey @toncijajic

I have fixed the issue mentioned above.
I had to revamp quite a lot of the header and nav styles as it seems that many styles were added over time and sometimes colliding with each other.

Demo: https://open-source-initiative-development.mystagingwebsite.com/

Please take a look at my proposed solution and let me know if you have any questions.

@toncijajic
Copy link
Author

@geoffguillain neat, thank you!

Two quick questions, captured in this screencast: https://d.pr/v/jJ5oLl

  • There's a bit of movement between the menu icon and menu label across the widths, are we able to fix that?
  • The search icon isn't working (links to #), is that a develop-only thing (or is missing some class/identifier)?

@geoffguillain
Copy link
Collaborator

geoffguillain commented Aug 6, 2024

Hey @toncijajic

There's a bit of movement between the menu icon and menu label across the widths, are we able to fix that?

Thanks for your screencast it is helpful, there are some pixels between different screen sizes and the "slow" animation (ease) makes it obvious when resizing. It is pretty uncommon that people will see this movement as it is happening on small screens and people won't resize their mobile screens but I will remove/fix it! ;)

The search icon isn't working (links to #), is that a develop-only thing (or is missing some class/identifier)?

The link on the search icon is triggering Jetpack Search but it is not activated on the develop server. I have not touched this part of the code and the link is set up correctly and should work as expected on prod.

@toncijajic
Copy link
Author

@geoffguillain got it!

Feel free to deploy when ready!

@geoffguillain
Copy link
Collaborator

Hey @toncijajic

I have changed the units on the menu button from em to px so the size doesn't change when you resize.

I have then pushed everything to production
https://opensource.org/

Please take a look at my proposed solution and let me know if you have any questions.

@toncijajic
Copy link
Author

@geoffguillain thanks!

Comparing the production site to the staging, the menu doesn't seem to stick to the top.
Could you check if anything went wrong?

@geoffguillain
Copy link
Collaborator

geoffguillain commented Aug 14, 2024

Hey @toncijajic

Thanks for catching this!
I have found the culprit, there was some legacy CSS in the site customizer colliding with the new styles.

The header is sticky now on production.

@toncijajic
Copy link
Author

@geoffguillain looks great!

Closing.

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

No branches or pull requests

2 participants