Site Navigation

[monicapatel21]

Quick Fixes

• [ ] Decrease font for this issue with Microsoft Edge https://github.com/wri/wri-espanol/issues/2#issuecomment-1775915838
• [ ] Investigate moving down to a second row if logo size reduction absolutely won't work: https://github.com/wri/wri-espanol/issues/2#issuecomment-1775915838

Hold for future ticket

More comprehensive overhaul / audit

• [ ] Audit navigation options, including new options from Paying for Paris
• [ ] Propose potential redesign of home hero/navigation -- before sending this over to design on our side

[mariacha]

Looking at the option to just decrease the font size for that awkward tablet screen size -- I don't see a problem it going down from 20px to something like 16 or 18. I could throw something like that together on a multidev using asset injector for quick prototyping.

[mariacha]

For discussion tomorrow, I went with the suggestion to make the logo smaller and slightly decrease the font size on the home page. See: https://test-wriflagship.pantheonsite.io/

I just used Asset injector to do it for the prototyping level:

@media (min-width: 56.25rem) {
    header nav.menu--main .menu-wrapper>ul.menu li a {
        font-size: .9rem;   
    }
    header .site-logo img {
        height: 36px;
    }
    .path-frontpage header nav.menu--main {
        display: block;
    }
}

@media (min-width: 79.6875rem) {
  header nav.menu--main .menu-wrapper>ul.menu li a {
        font-size: .9375rem;    
    }
    header .site-logo img {
        height: auto;
    }
}

@shannon-paton or @wthomaswri what do you think? Any concern over the logo being smaller like that? It matches what happens when you scroll.

[shannon-paton]

I think ideally we need to show all the menu items somehow (including "Our Work" and "Our Approach"), will come back to you with some suggestions. But the left-hand menu items look good to me.

[monicapatel21]

Interim fix ASAP works:

• Move image in hero (so menu breakpoint)
• wrap around to new row
• try smaller text

[mariacha]

I think there's some potential around sending the links to a second line that doesn't look too bad. I'll test it out on test

[mariacha]

@shannon-paton @wthomaswri

How does this proof of concept seem? https://test-wriflagship.pantheonsite.io/

That is only applying to the home page, but it could be applied more broadly if the concept seems sound:

To me it's pretty close, but the links could use a slight adjustment in some way that I can't put my finger on. I think someone with more of a designer background would be able to suggest small tweaks to improve it.

[wthomaswri]

Looks good @mariacha. Wondering if maybe the logo should stay as-is or would that still create the space issue. Was thinking something like this but obviously with better spacing between the utility nav items and also the Our Approach/Work link.

[mariacha]

When you say "as-is" for the logo -- do you mean the smaller size or the larger size? And at what screen size? That looks like a desktop screenshot, and on desktop for me, the log is already large, so I'm confused!

[wthomaswri]

Positioning of it, so yeah the size would be smaller but logo above is fine too if that'll complicate the nav items showing up when zoomed in even if it's smaller. I think it'd be good if we run it by Bill to see what he thinks also

[mariacha]

Agreed!

[mariacha]

@wthomaswri I've pushed this up to WRI: https://www.wri.org/

If there's an issue, all the code changes are in https://www.wri.org/admin/config/development/asset-injector/css/homepage_menu

It's only set to show up on the home page, so if you need to disable it, you can set it so it only shows up on some nonexistent page.

It's also back on test if you want to compare or make any changes: https://test-wriflagship.pantheonsite.io/

[wthomaswri]

This looks great @mariacha. Thanks for implementing so quickly.

[mariacha]

Great! Do you think we'll want to apply this to IOs as well, or wait for a more robust solution?

Either way, I'm moving this to the backlog!

[wthomaswri]

Hm, let me check with the team. I think main wri is the priority for now.

[mariacha]

I'm going to close this ticket since the greater Navigation work is moving forward in https://github.com/wri/WRIN/issues/431