WD-18199-change-get-ubuntu-to-download-ubuntu-in-the-top-navigation-on-ubuntu-com

[abhigyanghosh30]

Done

• Changed Get Ubuntu to Download Ubuntu on the nav

QA

• Check out this feature branch
• Run the site using the command ./run serve or dotrun
• View the site locally in your web browser at: http://0.0.0.0:8001/
  • Be sure to test on mobile, tablet and desktop screen sizes
• The nav item should say Download Ubuntu instead of Get Ubuntu

Issue / Card

Fixes #WD-18199

Screenshots

Help

QA steps - Commit guidelines

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

This makes the navbar wrap from about 1212px width to 1250px width, cutting off the search icon slightly and breaking horizontal alignment:

I wonder if there is a way to avoid that. @lyubomir-popov any ideas?

[lyubomir-popov]

I wonder if there is a way to avoid that. @lyubomir-popov any ideas?

move the breakpoint where we switch to mobile... not ideal but the only choice if the item has to that long.

[jmuzina]

I wonder if there is a way to avoid that. @lyubomir-popov any ideas?

move the breakpoint where we switch to mobile... not ideal but the only choice if the item has to that long.

Yes, we do have a navigation-specific variable $breakpoint-navigation-threshold that could be adjusted to only apply this breakpoint change for navigation, and not change the mobile breakpoint across the entire site. Overriding that should help.

u.com already overrides that breakpoint; it binds it to $viewport-threshold, which is set to 1212px, lining up with the starting point of the problematic width range noted in my previous message.

ubuntu.com/static/sass/_global-settings.scss

Line 2 in 686a424

$viewport-threshold: 1212px;

If that variable is set higher (perhaps around 1250px), this behavior can be mitigated.