* @link https://developer.wordpress.org/reference/functions/register_nav_menus/
*/
register_nav_menus([
- 'primary_navigation' => __('Primary Navigation', 'sage')
+ 'primary_navigation' => __('Primary Navigation', 'sage'),
+ 'secondary_navigation' => __('Header Buttons', 'cube'),
]);
/**
--- /dev/null
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 397 372" xml:space="preserve">
+ <g fill="none" stroke="#fff" stroke-width="22" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="66.667">
+ <path d="M36 11h325c13.81 0 25 11.19 25 25v225c0 13.81-11.19 25-25 25H36c-13.81 0-25-11.19-25-25V36c0-13.81 11.19-25 25-25zM261 361H136l12.5-75h100zM98.5 361h200M311 117.5V155"/>
+ <path d="M261 139.73V205a94.715 94.715 0 01-62.38 25A95.78 95.78 0 01136 205v-65.27"/>
+ <path d="M86 117.5l112.5 50 112.5-50-112.5-50z"/>
+ </g>
+</svg>
--- /dev/null
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 435 397" xml:space="preserve">
+ <g fill="none" stroke="#fff" stroke-width="22" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="66.667">
+ <path d="M111 327.99c-3.45 0-6.25 2.8-6.25 6.25s2.8 6.25 6.25 6.25 6.25-2.8 6.25-6.25-2.8-6.25-6.25-6.25M61 264.83h0c0-27.61 22.39-50 50-50s50 22.39 50 50"/>
+ <circle cx="111" cy="177.33" r="37.5"/>
+ <path d="M211 288.83V361c0 13.81-11.19 25-25 25H36c-13.81 0-25-11.19-25-25V61c0-13.81 11.19-25 25-25h132M324.31 211c-14.49 0-28.68-3.11-41.69-9.08-31.85 11.08-73.9 24.67-73.9 24.67s16.01-49.25 24.54-74.18c-5.89-12.93-8.95-27.01-8.95-41.4 0-55.14 44.86-100 100-100s100 44.86 100 100c0 55.13-44.86 99.99-100 99.99z"/>
+ <path d="M368.09 93.87h-26.65V67.22c0-4.21-3.41-7.61-7.61-7.61H314.8c-4.21 0-7.61 3.41-7.61 7.61v26.65h-26.65c-4.2 0-7.61 3.41-7.61 7.61v19.03c0 4.21 3.41 7.61 7.61 7.61h26.65v26.65c0 4.2 3.41 7.61 7.61 7.61h19.03c4.21 0 7.61-3.41 7.61-7.61v-26.65h26.65c4.2 0 7.61-3.41 7.61-7.61v-19.03c0-4.2-3.41-7.61-7.61-7.61z"/>
+ </g>
+</svg>
var menu = $('#mobileMenu'),
menuOpener = $('#menuOpener');
- // Copy main menu
+ // Copy main menu + secondary nav + locales
$('.nav-primary').clone().appendTo(menu);
+ $('.nav-buttons li').each(function() {
+ let item = $(this).clone();
+ item.addClass('secondary-item'); // Add extra class so these items can be styled differently
+ $(menu).find('.nav').append(item);
+ });
+ $('.navigation .locales').clone().appendTo(menu);
menuOpener.on('click', function() {
$(this).toggleClass('open');
display: block
text-align: center
padding: 20px 5%
+ margin: 0
li
display: block
padding: 0.5em 0
margin: 0
+ // Links from the secondary button nav get a different colour
+ &.secondary-item
+ color: $colors.light-blue
+
+ a:hover
+ color: #fff
+
a
border: none
.nav
inline-list()
-.menu-item //:not(:last-child)
- margin-right: 2.5em
+.menu-item
position: relative
padding-bottom: 1em // To give space between menu and dropdown but keep them touching
padding-top: @padding-bottom // Matches bottom padding so menu stays vertically aligned in the centre
+ &:not(:last-child)
+ margin-right: 2.5em
+
&:hover, &.current_page_parent, &.current_page_item, &.current-page-ancestor
a
border-color: currentColor
.locales
list-style-type: none
padding: 0
- margin: 0
+ margin: 1rem 0
display: flex
color: #1888ca
font-size: 14px
+ font-weight: 600
text-transform: capitalize
a, span
box-sizing: content-box
display: inline-block
- width: r(35px)
+ width: 2.5em
line-height: @width
text-align: center
.locale-active
border-radius: 50%
border: 2px solid currentColor
+
+
+// Secondary header nav (buttons)
+.nav-buttons
+ inline-list()
+ margin-right: 1em
+
+ li
+ &:not(:last-child)
+ margin-right: 0.8em
+
+ a
+ font-smoothing-reset()
+ display: flex
+ align-items: center
+ background-color: $colors.blue
+ color: #fff
+ text-transform: uppercase
+ font-size: 12px
+ font-weight: 600
+ padding: 0.75em 1.75em
+ border: none
+ border-radius: 999px
+ transition: background-color 0.15s ease-out
+
+ &:hover
+ background-color: $colors.dark-blue
+
+ li.icon
+ a
+ line-height: 2
+
+ &:before
+ content: ''
+ display: inline-block
+ background-size: contain
+ background-repeat: no-repeat
+ background-position: center
+ height: 2em
+ width: @height
+ margin-right: 0.75em
+
+ &.icon-academy
+ a:before
+ background-image: url('../images/icons/academy.svg');
+
+ &.icon-teleconsultation
+ a:before
+ background-image: url('../images/icons/teleconsultation.svg');
+
.inner
center()
- horizontal-spacing()
+ constrain(padding-left, 5vw)
+ padding-right: 1rem
+ display: flex
+ justify-content: space-between
+ align-items: flex-end
position: relative !important
height: 100%
.navigation
- position: absolute
- constrain(right, $horizontal-gutter)
- bottom: 50%
- transform: translateY(50%)
+ overflow: hidden
+below($breakpoint-menu)
display: none
+// Main menu
+.nav-primary
+ margin-right: 72px // Space for phone icon
+
+ // Once we go above the max width, the phone icon will sit
+ // in the gutter so we don't need to reserve space for it
+ +above($content-max-width + 72px)
+ margin-right: 0.5em
+
+// CTA buttons + locale switcher (only visible on hero headers)
+.nav-secondary
+ opacity: 0
+ margin-top: -74px // Pull out of view + remove space taken by element (animated by transition)
+ display: flex
+ align-items: center
+ justify-content: flex-end
+ transition: all 0.2s linear
+
+ .template-transparent-header &
+ opacity: 1
+ margin-top: 0
//==== Phone widget
$phone-widget-width = 3.5em // 1em padding + 1.5em icon width + 1em padding
height: 100%
.template-transparent-header &
- bottom: 0.5em
height: auto
+below($breakpoint-menu)
white-space: nowrap
transition: transform 0.5s ease
transform: translateX(- $phone-widget-width)
+ border-radius: 999px 0 0 999px // Rounded only on the left side
&:hover
transform: translateX(-100%)
<div class="inner">
@include('partials/logo')
<div class="navigation">
- <nav class="nav-primary">
- @if (has_nav_menu('primary_navigation'))
- {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav']) !!}
+
+ {{-- First row navigation with CTA buttons + locale switcher --}}
+ <div class="nav-secondary">
+
+ @if (has_nav_menu('secondary_navigation'))
+ {!! wp_nav_menu(['theme_location' => 'secondary_navigation', 'menu_class' => 'nav-buttons']) !!}
@endif
<ul class="locales">
</li>
@endforeach
</ul>
+
+ </div>
+
+ {{-- Second row navigation - main menu --}}
+ <nav class="nav-primary">
+ @if (has_nav_menu('primary_navigation'))
+ {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav']) !!}
+ @endif
</nav>
+
</div>
</div>
projects / physioassist-wordpress.git / commitdiff
