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

Overwrite top css to align active menu buttons #2954

Merged
merged 12 commits into from
Nov 30, 2023

Conversation

rmccar
Copy link
Contributor

@rmccar rmccar commented Nov 23, 2023

What is the context of this PR?

Fixes: #2953

Overwrites the top css property to set it at 0 when the button is in a header. This is something that is needed to happen in other cases buttons are used to give the impression of clicking a physical button so I have just overwritten it specifically when it is used in this way. This fixes all buttons in headers as they all have this issue.

Also fixed some code formatting in the header component and fixed extra spacing in the header class list.

How to review this PR

  • Using the example-header-external-with-navigation-and-search, example-header-external-with-service-links and example-header-external-with-sub-navigation
  • Decrease the width of the example till you reach the breakpoint where the menu button appears in the heading
  • Click the all buttons and see that the button drops slightly on the main branch and doesn't on this one

Checklist

This needs to be completed by the person raising the PR.

  • I have selected the correct Assignee
  • I have linked the correct Issue

@rmccar rmccar added the Bug Something isn't working label Nov 23, 2023
@rmccar rmccar self-assigned this Nov 23, 2023
Copy link

netlify bot commented Nov 23, 2023

Deploy Preview for ons-design-system-preview ready!

Name Link
🔨 Latest commit fcfb6d5
🔍 Latest deploy log https://app.netlify.com/sites/ons-design-system-preview/deploys/656869be69d7230008cb5473
😎 Deploy Preview https://deploy-preview-2954--ons-design-system-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@adi-unni
Copy link
Contributor

When clicking on the search button, it now drops down slightly.
Screenshot 2023-11-30 at 10 27 24

@rmccar
Copy link
Contributor Author

rmccar commented Nov 30, 2023

When clicking on the search button, it now drops down slightly. Screenshot 2023-11-30 at 10 27 24

Good spot, ill sort that

@rmccar rmccar merged commit a1a2a5d into main Nov 30, 2023
11 checks passed
@rmccar rmccar deleted the bug/2953/navigation-menu-button-not-aligned-when-active branch November 30, 2023 14:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation menu button not aligned when active
3 participants