Minimal-mistakes: Dropdown Button - Navigation bar

[taherbs]

Description

Having troubles setting CSS for a drop-down button in the navigation bar.

Environment

• Minimal Mistakes version: v4.12.1
• Jekyll version: 3.8.3
• Git repository URL: https://github.com/taherbs/taherbs.github.io
  

  - GitHub Pages hosted (if yes provide URL to site): https://taherbs.github.io

Issue

To start, THANK YOU for this amazing template.

So my issue: I'm having troubles setting the correct CSS code for a drop-down button by trying to modify the _navidation.scss/.greedy-nav file.
This is how far I was able to go with the feature Commit.
Could please propose me a simple way to modify "_navidation.scss/.greedy-nav" or build a new css class so we get that done.
I have already looked into #1524 but didn't find what I really needed.

PS: My experience with HTML/CSS is really limited.
Thank you in advance for your help.

[mmistakes]

You'll likely need to throw away the greedy nav CSS and replace it with styles that match a dropdown nav pattern.

Have you looked through sites like Codepen or just Googling around? There are so many dropdown examples out there it shouldn't be too hard to adapt. You've done the hard part of getting the HTML to render, it just needs to be styled now.

[taherbs]

@mmistakes, thank you for the direction.
After many tries I was able to have that working and added some SCSS de get the drop box (Commit), still I'm having not too pretty result (I think that I'm not made to be a web designer).
So this is the result I have got: https://taherbs.github.io/
You can notice that their is ugly gaps between the top links, could you please advice me on fixing that.

Thanks,

[taherbs]

@mmistakes, I have finally been able to get a good result after hours of trying multiple combination.
The result is not perfect but still, I will pin my changes here so it my be helpful for other people.
Changes:
Navigation.yaml
Masterhead.html
_navigation.scss

Please let me know if you think we do some improvement's to this.
Else we can close this issue.
Thanks

[mmistakes]

One area for improvement would be for smaller screens. If you reduce the width of the browser window to hide a dropdown item, it doesn't work as expected. It's child links are missing on hover or click.

[taherbs]

Yep, totally right! I have noticed that, I will need to dig further into the code to understand how to hide those links. (I'm not a HTML/CSS expert), please let me know if you know how to fix that (code side).

[mmistakes]

Don't know of anything that will easily fix it. That's part of the reason why I didn't mix dropdowns in with the greedy navigation pattern. It can get complicated really fast.

[taherbs]

I will try to play with it a little and if I get to something I will post it here in the issue.
Thank you for help.