diff --git a/app/assets/stylesheets/darkswarm/embedded_shopfront.scss b/app/assets/stylesheets/darkswarm/embedded_shopfront.scss index 2db5181cdd..dc250f72f4 100644 --- a/app/assets/stylesheets/darkswarm/embedded_shopfront.scss +++ b/app/assets/stylesheets/darkswarm/embedded_shopfront.scss @@ -5,7 +5,7 @@ $large-menu-height: 4.6875rem; $medium-menu-height: 3rem; $gutter-width: 0.9375rem; -nav.top-bar ul.left li.powered-by { +nav.top-bar .powered-by { display: none; } diff --git a/app/assets/stylesheets/darkswarm/menu.scss b/app/assets/stylesheets/darkswarm/menu.scss index bd195cbb0e..1fa3c3393d 100644 --- a/app/assets/stylesheets/darkswarm/menu.scss +++ b/app/assets/stylesheets/darkswarm/menu.scss @@ -44,6 +44,13 @@ nav.top-bar { .top-bar-section { border-bottom: 1px solid $light-grey-transparency; + display: flex; + justify-content: space-between; + + .nav-main-menu, + .nav-icons-menu { + flex-shrink: 0; + } a.icon { &:hover { @@ -99,21 +106,12 @@ nav.top-bar { } } - ul.center { - display: inline-block; - - // By default, we center between the left and right uls, but we want to be centered - // relative to the whole page. The difference in width between the other uls is 74px, - // so we offset by that amount here. - margin-left: -74px; - } - ul.dropdown { border: 1px solid $smoke; border-top: none; } - ul.right { + .nav-icons-menu { > li { border-left: 1px solid #ddd; padding: 0 14px; @@ -244,7 +242,7 @@ nav.top-bar { .top-bar .ofn-logo img { height: auto; - width: auto; + width: 100%; max-height: 44px; max-width: 250px; } @@ -289,10 +287,6 @@ nav.top-bar { .has-dropdown > a { padding: 0 ($topbar-height / 8) !important; } - - ul.center { - margin-left: -24px; - } } } diff --git a/app/views/shared/menu/_large_menu.html.haml b/app/views/shared/menu/_large_menu.html.haml index fefdcadefe..8403fd7300 100644 --- a/app/views/shared/menu/_large_menu.html.haml +++ b/app/views/shared/menu/_large_menu.html.haml @@ -1,6 +1,6 @@ %nav.top-bar.show-for-large-up{'data-topbar' => true} %section.top-bar-section - %ul.left + %ul.nav-logo %li.ofn-logo %a{href: main_app.root_path} %img{src: ContentConfig.logo.url} @@ -10,7 +10,7 @@ = t 'powered_by' %a{href: '/'} = t 'title' - %ul.center + %ul.nav-main-menu - [*1..7].each do |menu_number| - menu_name = "menu_#{menu_number}" - if ContentConfig[menu_name].present? @@ -18,7 +18,7 @@ %a{href: t("#{menu_name}_url") } %span.nav-primary = t "#{menu_name}_title" - %ul.menu.icons.right + %ul.nav-icons-menu - if OpenFoodNetwork::I18nConfig.selectable_locales.count > 1 = render 'shared/menu/language_selector' diff --git a/spec/features/consumer/multilingual_spec.rb b/spec/features/consumer/multilingual_spec.rb index 1a54a813d3..c70b2168e4 100644 --- a/spec/features/consumer/multilingual_spec.rb +++ b/spec/features/consumer/multilingual_spec.rb @@ -124,8 +124,8 @@ feature 'Multilingual', js: true do expect(page).to have_content 'SHOPS' - find('ul.right li.language-switcher').click - within 'ul.right li.language-switcher ul.dropdown' do + find('.language-switcher').click + within '.language-switcher .dropdown' do expect(page).to have_link I18n.t('language_name', locale: :en), href: '?locale=en' expect(page).to have_link I18n.t('language_name', locale: :es, default: 'Language Name'), href: '?locale=es'