unicef
As a reader, I want the top navigation to be tighter so that there is less noise when scrolling in an article/page.
Summary
Related to #157. The layout would better mimic the approach used on UNICEF sites like the CryptoFund. The logo would disappear when scrolling, and the top navigation bar would persist on screen. But we need to figure out what to do with the breadcrumb bar. Having too many different bars could be confusing for the user interface.
Priority
secondary
Category
front-end
Type
business
@jwflory I think this is something not that necessary because in our navigation we have grouped both the logo's( the main brand logo and the repo logo) so won't affect the navbar height much.
We want similar UI/UX to the CryptoFund/Juniper website to have a common user experience across Office of Innovation web resources. This user story is less about navbar height as it is about organizing the navbar in a cleaner way. This likely means refactoring of the navigation code. We'll keep this open on the backlog, but I've flagged it as a good first issue for a new contributor to work on.
Hi @jwflory, I am new to the project and have set it up on my local machine recently. I have some experience working with Hugo and would like to contribute. Could I take up this issue? 😊
Hi @BhavyaT-135, welcome to our project! 👋🏻 Nice to have you here.
Yes, this issue is in our backlog so it would be a great one to tackle at your own pace. 👍🏻 Some additional notes about this issue:
- The majority of the top navigation bar code is in
/layouts/partials/navigation.html. - Do your best to avoid making new custom classes and use Bootstrap 4 classes when possible.
Before handing this issue over to you, I have a couple of questions to understand how I can best to support you on the task:
- Have you used a digital prototyping tool like Penpot, Figma, Canva, or Adobe XD? If so, could you make the first step of creating a prototype of the change using one of these tools? If not, let me know and we'll figure something else out.
- Are there any resources or guidance you need to know about the theme or code base?
Hey @jwflory thanks! Sure, I'll begin by creating a prototype using Figma and then start implementing the code for it 😊
Sounds good @BhavyaT-135, over to you for the prototype! 🙌🏻
Are you comfortable setting a deadline to share back the prototype in this GH Issue? 🎯 Is Monday morning, 10 October acceptable? Let me know if you need more time. 👍🏻
Hi @jwflory, I first thought of replicating the template that's used in CryptoFund. However, in our case, the logo is included in the navbar itself. What I suggest is, while scrolling, we let the navbar remain at the top and replace the logo with the breadcrumb.
I've come up with the following prototype using Figma to demonstrate what I have in mind. Kindly take a look and let me know your thoughts 😊
Before Scrolling:
After Scrolling:
@BhavyaT-135 I like where you are going with this! I think bringing the breadcrumb bar to the persistent navbar is a good move. Since our site is a living collection of content, the breadcrumb bar is probably more important for our site than it would be for others like a blogging site.
You are good to continue to the coding implementation for this change. 👍🏻 One suggestion when you write your commit message, you can write "Closes unicef/inventory-hugo-theme#164" in your git commit message, and this issue would be closed as complete once the commit is merged into main.
Great @jwflory! I'll look into the coding implementation from here on. And I'll keep the commit message in mind! 😊
Excellent!
One thing I realized after thinking more about this is what you think the mobile view would look like. I think it would be worth doing a responsive prototype too if you have a chance @BhavyaT-135! 🙏🏻
Sure @jwflory I'll look into it once I implement the code for this one! 😊
Hey @jwflory! I've been trying a bunch of stuff with the navigation and breadcrumb bar. Yet to find an optimal solution. Might take a few more days. Hope you don't mind.😊