677399 - Navigation menu is too narrow for locales

Status: VERIFIED FIXED

(Websites :: webifyme.org, defect, P2)

Description

[William Reynolds [:williamr]]

Attachment: screenshot

The navigation menu at the top of the page isn't wide enough to show the menu on one line when viewed in other locales. Please increase the width so the menu can be shown on one line.

Example: https://webifyme-dev.allizom.org/fr/

Comment 1

[Chris More [:cmore]]

This can easily be fixed by changing the CSS #header .nav from 455px to 550px and adding a margin-right: 180px. Not perfect, but better then what exists now with the wrapping of navigation elements that are longer then en-US. Other ideas are welcome too.

Comment 2

[Stewart McKinney]

Hi,

I've changed the width to 716px, and left the margin at auto. This aligns the left side of the text with the beginning of the Firefox logo. I felt 716px would be enough for nearly any language.

I think it looks OK, but then again, I'm no designer. Centering the text for all languages would require a little "domready" javascript (due to the variable width), which is another option to explore if this doesn't feel right.

https://github.com/mozilla/webifyme/commit/2ddebaa3c314cc8ad790277756b118e317f3a543

Let me know on this one.

Comment 3

[Chris More [:cmore]]

Stewart: I would add margin-left: 150px and it should be fine. That will push it over closer to the middle since we don't want to use the center attribute.

Comment 4

[Stewart McKinney]

Done!

https://github.com/mozilla/webifyme/commit/a4ad73cf0351b986396a4ecd5b0eaf8438b4f3db

Comment 5

[Chris More [:cmore]]

Stewart:

The top menu looks good. Can you do the same with the bottom menu?

#footer.main_links width=600px

#footer.legal width=300px

It should make those menus width enough for other languages.

Comment 7

[Stewart McKinney]

Done!

https://github.com/mozilla/webifyme/commit/9d0ca26e7eda114e93231d611500e6dfc746b6e1

Comment 8

[krupa raj[:krupa]]

verified fixed at http://screencast.com/t/OcgWKn29J1g