M _includes/masthead.html => _includes/masthead.html +28 -30
@@ 1,35 1,33 @@
{% capture logo_path %}{{ site.logo }}{% endcapture %}
<div class="masthead">
- <div class="masthead__inner-wrap">
- <div class="masthead__menu">
- <nav id="site-nav" class="greedy-nav">
- {% unless logo_path == empty %}
- <a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt=""></a>
- {% endunless %}
- <a class="site-title" href="{{ '/' | relative_url }}">
- {{ site.masthead_title | default: site.title }}
- {% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
- </a>
- <ul class="visible-links">
- {%- for link in site.data.navigation.main -%}
- <li class="masthead__menu-item">
- <a href="{{ link.url | relative_url }}"{% if link.description %} title="{{ link.description }}"{% endif %}>{{ link.title }}</a>
- </li>
- {%- endfor -%}
- </ul>
- {% if site.search == true %}
- <button class="search__toggle" type="button">
- <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
- <i class="icon fas fa-fw fa-search"></i>
- </button>
- {% endif %}
- <button class="greedy-nav__toggle hidden" type="button">
- <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
- <div class="navicon"></div>
- </button>
- <ul class="hidden-links hidden"></ul>
- </nav>
- </div>
+ <div class="masthead__menu">
+ <nav id="site-nav" class="greedy-nav">
+ {% unless logo_path == empty %}
+ <a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}" alt=""></a>
+ {% endunless %}
+ <a class="site-title" href="{{ '/' | relative_url }}">
+ {{ site.masthead_title | default: site.title }}
+ {% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
+ </a>
+ <ul class="visible-links">
+ {%- for link in site.data.navigation.main -%}
+ <li class="masthead__menu-item">
+ <a href="{{ link.url | relative_url }}"{% if link.description %} title="{{ link.description }}"{% endif %}>{{ link.title }}</a>
+ </li>
+ {%- endfor -%}
+ </ul>
+ {% if site.search == true %}
+ <button class="search__toggle" type="button">
+ <span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search" }}</span>
+ <i class="icon fas fa-fw fa-search"></i>
+ </button>
+ {% endif %}
+ <button class="greedy-nav__toggle hidden" type="button">
+ <span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu" }}</span>
+ <div class="navicon"></div>
+ </button>
+ <ul class="hidden-links hidden"></ul>
+ </nav>
</div>
</div>
M _sass/minimal-mistakes/_masthead.scss => _sass/minimal-mistakes/_masthead.scss +15 -18
@@ 10,27 10,24 @@
z-index: 20;
position: sticky;
top: 0;
+ @include clearfix;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 0.625em 0 0.625em 1em;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
- &__inner-wrap {
- @include clearfix;
- margin-left: auto;
- margin-right: auto;
- padding: 0.625em 0 0.625em 1em;
- max-width: 100%;
- display: flex;
- justify-content: space-between;
-
- @include breakpoint($x-large) {
- max-width: $max-width;
- }
+ @include breakpoint($x-large) {
+ max-width: $max-width;
+ }
- nav {
- z-index: 10;
- }
+ nav {
+ z-index: 10;
+ }
- a {
- text-decoration: none;
- }
+ a {
+ text-decoration: none;
}
}