Full Screen vs. Desktop Header alignment

[visitor1231]

I’m having issues with getting my header on the full screen version to be the same as the desktop version. My layout that I want to have is Shop, About, Learn on the left hand side. The logo in the middle and then for it to say Search, Account, and Cart on the right hand side. I will provide screenshots with the correct version and the version that is messed up. I will also provide the code in my header. Can someone help me figure out how to get them to match?

{% assign transparent_header_rgb = section.settings.transparent_header_color | color_to_rgb %}

:root{ --logo-width: {{ section.settings.mobile_screen_logo_width }}px; --logo-width-mobile: {{ section.settings.mobile_screen_logo_width }}px; --logo-width-desk: {{ section.settings.large_screen_logo_width }}px; } {% if transparent_header_rgb != 'rgba(0, 0, 0, 0.0)' %} header[id="shopify-section-{{ section.id }}"]{ --color-transparent-header: {{ section.settings.transparent_header_color }}; } {% endif %} {% if section.settings.header_bg_opacity != 100 %} header[id="shopify-section-{{ section.id }}"]{ --header-bg-opacity: {{ section.settings.header_bg_opacity | divided_by: 100.0 }}; } {% endif %} {% if section.settings.header_bg_blur != 0 %} header[id="shopify-section-{{ section.id }}"]{ --header-bg-blur: {{ section.settings.header_bg_blur }}px; } {% endif %}

{% comment %}Check layout of header{% endcomment %}
{% comment %}Remove ‘mobile-nav’ class from the body if layout is not option_3 or option_4{% endcomment %}
{% assign layout_options = ‘option_3,option_4’ | split: ‘,’ %}
{% unless layout_options contains section.settings.layout %}

{% endunless %}

<page-header
role=“banner”
id=“header”
class="
wt-header
{% if settings.always_mobile_navigation or section.settings.layout == ‘option_3’ or section.settings.layout == ‘option_4’ %}mobile-nav{% endif %}
{% if section.settings.layout == ‘option_1’ %} wt-header–v1 wt-header–search{% endif %}
{% if section.settings.layout == ‘option_2’ %} wt-header–v2{% endif %}
{% if section.settings.layout == ‘option_3’ or section.settings.layout == ‘option_4’ %} wt-header–v3 wt-header–fashion{% endif %}
{% if section.settings.layout == ‘option_4’ %} wt-header–transparent {% endif %}
{% if section.settings.transparent_logo != blank %} wt-header–transparent-logo {% endif %}
{% if section.settings.show_shadow %} wt-header–shadow{% endif %}
{% if section.settings.show_line_separator %} wt-header–separator{% endif %}
{% if section.settings.sticky_header %} wt-header–sticky{% endif %}
{% if section.settings.sticky_header_always %} wt-header–sticky-always{% endif %}
{% if section.settings.header_always_blurred %} wt-header–always-blurred{% endif %}
"
{% if section.settings.layout == ‘option_3’ or section.settings.layout == ‘option_4’ %}
data-always-mobile-menu=“true”
{% endif %}
{% if section.settings.layout == ‘option_4’ %}
data-transparent=“true”
{% endif %}
{% if section.settings.sticky_header %}
data-sticky=“true”
{% endif %}
{% if section.settings.sticky_header_always %}
data-sticky-always=“true”
{% endif %}

{% if section.settings.layout == 'option_3' or section.settings.layout == 'option_4' %}

{%- if section.settings.teaser_menu != blank -%}

{%- for link in section.settings.teaser_menu.links -%} {% if forloop.index <= 3 %} {% assign is_parent = false %} {% if link.links != blank %} {% assign is_parent = true %} {% endif %}
• {{- link.title | escape -}}
{% endif %} {%- endfor -%}

{%- endif -%}

{% endif %}

{%- if section.settings.layout != 'option_1' -%} SHOP ABOUT LEARN

{% endif %}
{%- if section.settings.layout == ‘option_2’ and section.settings.sticky_header -%}
<a
href=“#”
class=“wt-header__icon wt-header__sticky-menu-trigger wt-icon”
rel=“toggle-menu”
aria-label=“{{ ‘aria-label.page-header-toggle-menu’ | t }}”

{% render ‘icons’, id: ‘bars’ %}
{% render ‘icons’, id: ‘close’ %}

{% endif %}

{%- if section.settings.layout == ‘option_1’ and section.settings.sticky_header -%}
<a
href=“#”
class=“wt-header__icon wt-header__sticky-menu-trigger wt-header__sticky-menu-trigger–v1 wt-icon”
rel=“toggle-menu”
role=“button”
aria-label=“{{ ‘aria-label.page-header-toggle-menu’ | t }}”
aria-controls=“wt-drawer-nav”
aria-expanded=“false”

{% render ‘icons’, id: ‘bars’ %}
{% render ‘icons’, id: ‘close’ %}

{% endif %}

{%- if section.settings.layout == 'option_1' -%} {% render 'icons', id: 'bars' %} {%- endif -%}

{%- if request.page_type == ‘index’ -%}

{% else %}

{% endif %}

<a
href=“{{ routes.root_url }}”
class=“wt-header__logo__link”
style="
{% if section.settings.logo %}
–logo-width: {{ section.settings.mobile_screen_logo_width }}px;
–logo-width-desk: {{ section.settings.large_screen_logo_width }}px;
{% else %}
–logo-width: auto;
–logo-width-desk: auto;
{% endif %}
"

{%- if section.settings.logo != blank or section.settings.transparent_logo != blank -%}
{% if section.settings.logo != blank %}
{%- assign large_image_size = section.settings.large_screen_logo_width -%}
{%- assign large_image_size_double = large_image_size | times: 2 -%}

<img
srcset=“{{ section.settings.logo | image_url: width: large_image_size }} 1x, {{ section.settings.logo | image_url: width: large_image_size_double }} 2x”
src=“{{ section.settings.logo | image_url: width: large_image_size }}”
loading=“lazy”
width=“{{ section.settings.logo.width }}”
height=“{{ section.settings.logo.height }}”
class=“wt-header__logo__img”
alt=“{{ section.settings.logo.alt | default: shop.name | escape }}”

{%- assign mobile_image_size = section.settings.mobile_screen_logo_width -%}
{%- assign mobile_image_size_double = mobile_image_size | times: 2 -%}
<img
srcset=“{{ section.settings.logo | image_url: width: mobile_image_size }} 1x, {{ section.settings.logo | image_url: width: mobile_image_size_double }} 2x”
src=“{{ section.settings.logo | image_url: width: mobile_image_size }}”
loading=“lazy”
width=“{{ section.settings.logo.width }}”
height=“{{ section.settings.logo.height }}”
class=“wt-header__logo__img wt-header__logo__img–mobile”
alt=“{{ section.settings.logo.alt | default: shop.name | escape }}”

{% endif %}

{% assign transp_logo = section.settings.transparent_logo %}
{% if transp_logo != blank %}
<img
srcset=“{{ transp_logo | image_url: width: large_image_size }} 1x, {{ transp_logo | image_url: width: large_image_size_double }} 2x”
src=“{{ transp_logo | image_url: width: large_image_size }}”
loading=“lazy”
width=“{{ section.settings.logo.width }}”
height=“{{ section.settings.logo.height }}”
class=“wt-header__logo__img wt-header__logo__img–transparent”
alt=“{{ section.settings.logo.alt | default: shop.name | escape }}”

{% endif %}
{%- else -%}
{{ shop.name }}
{%- endif -%}

{%- if request.page_type == ‘index’ -%}

{% else %}

{% endif %}

• {% render 'icons', id: 'search' %}
  {% render 'icons', id: 'search' %} {{ 'aria-label.page-header-search' | t }}

  {% render 'icons', id: 'close' %} {{ 'aria-label.page-header-toggle-menu' | t }}

  {% render 'icons', id: 'search' %} {{ 'aria-label.page-header-search' | t }} {% render 'icons', id: 'close' %}
  {% render 'search-top' %}

  {% render 'loader' %}

{% if shop.customer_accounts_enabled %}

• {% if customer %} ACCOUNT {% else %} ACCOUNT {% endif %}
{% endif %}
• CART {% if cart.item_count != 0 %} {{ cart.item_count }} {% endif %}

{% if section.settings.show_line_separator %}

{% endif %}

{%- if request.page_type != ‘cart’ -%}
{%- render ‘cart-notification’ -%}
{%- endif -%}

<drawer-nav
class=“wt-drawer wt-drawer–nav{% if settings.always_mobile_navigation or section.settings.layout == ‘option_3’ or section.settings.layout == ‘option_4’ %} wt-drawer–mobile-nav{% endif %}”
id=“wt-drawer-nav”

{{ section.settings.drawer_title }}

{% render 'icons', id: 'close' %}

{%- if section.settings.menu != blank -%} {% render 'mega-menu', menu: section.settings.menu, blocks: section.blocks %} {%- endif -%}

{% if shop.customer_accounts_enabled or section.settings.mobile_footer_menu != null %}

• {%- if shop.customer_accounts_enabled -%} {%- liquid if customer echo 'customer.account_fallback' | t else echo 'customer.log_in' | t endif -%} {%- endif -%}
{%- for link in section.settings.mobile_footer_menu.links -%}
• {{- link.title | escape -}}
{%- endfor -%}

{% endif %}

{% comment %}{% if section.settings.sticky_header %}{% endcomment %}
{% comment %}{% endcomment %}
{% comment %}{% endif %}{% endcomment %}

{% schema %}
{
“name”: “t:sections.header.name”,
“tag”: “header”,
“class”: “page-header”,
“settings”: [
{
“type”: “select”,
“id”: “layout”,
“options”: [
{
“value”: “option_1”,
“label”: “t:settings_schema.layout.settings.input_type__2_1.option_1.label”
},
{
“value”: “option_2”,
“label”: “t:settings_schema.layout.settings.input_type__2_1.option_2.label”
},
{
“value”: “option_3”,
“label”: “t:settings_schema.layout.settings.input_type__2_1.option_3.label”
},
{
“value”: “option_4”,
“label”: “t:settings_schema.layout.settings.input_type__2_1.option_4.label”
}
],
“default”: “option_3”,
“label”: “t:settings_schema.layout.settings.input_type__2_1.label”,
“info”: “t:settings_schema.layout.settings.input_type__2_1.info”
},
{
“type”: “checkbox”,
“id”: “sticky_header”,
“default”: false,
“label”: “t:settings_schema.layout.settings.sticky_header.label”
},
{
“type”: “checkbox”,
“id”: “sticky_header_always”,
“default”: false,
“label”: “t:settings_schema.layout.settings.sticky_header_always.label”,
“info”: “t:settings_schema.layout.settings.sticky_header_always.info”
},
{
“type”: “range”,
“id”: “header_bg_opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“default”: 100,
“unit”: “%”,
“label”: “t:sections.header.settings.header_bg_opacity.label”,
“info”: “t:sections.header.settings.header_bg_opacity.info”
},
{
“type”: “range”,
“id”: “header_bg_blur”,
“min”: 0,
“max”: 35,
“step”: 1,
“default”: 0,
“unit”: “px”,
“label”: “t:sections.header.settings.header_bg_blur.label”,
“info”: “t:sections.header.settings.header_bg_blur.info”
},
{
“type”: “checkbox”,
“id”: “header_always_blurred”,
“default”: false,
“label”: “t:sections.header.settings.header_always_blurred.label”,
“info”: “t:sections.header.settings.header_always_blurred.info”
},
{
“type”: “checkbox”,
“id”: “show_line_separator”,
“label”: “t:sections.header.settings.show_line_separator.label”,
“info”: “t:sections.header.settings.show_line_separator.info”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_shadow”,
“label”: “t:sections.header.settings.show_shadow.label”,
“info”: “t:sections.header.settings.show_shadow.info”,
“default”: false
},
{
“type”: “header”,
“content”: “t:settings_schema.layout.settings.header_logo.label”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “t:sections.header.settings.logo.label”
},
{
“type”: “range”,
“id”: “large_screen_logo_width”,
“min”: 50,
“max”: 250,
“step”: 10,
“default”: 90,
“unit”: “t:sections.header.settings.large_screen_logo_width.unit”,
“label”: “t:sections.header.settings.large_screen_logo_width.label”
},
{
“type”: “range”,
“id”: “mobile_screen_logo_width”,
“min”: 50,
“max”: 250,
“step”: 10,
“default”: 90,
“unit”: “t:sections.header.settings.mobile_screen_logo_width.unit”,
“label”: “t:sections.header.settings.mobile_screen_logo_width.label”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.menu.label”
},
{
“type”: “link_list”,
“id”: “teaser_menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.teaser_menu.label”,
“info”: “t:sections.header.settings.teaser_menu.info”
},
{
“type”: “link_list”,
“id”: “mobile_footer_menu”,
“label”: “t:sections.header.settings.mobile_footer_menu.label”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.transparent_header.label”,
“info”: “t:sections.header.settings.transparent_header.info”
},
{
“type”: “image_picker”,
“id”: “transparent_logo”,
“label”: “t:sections.header.settings.transparent_logo.label”,
“info”: “t:sections.header.settings.transparent_logo.info”
},
{
“type”: “color”,
“id”: “transparent_header_color”,
“label”: “t:sections.header.settings.custom-color.label”,
“default”: “transparent”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.drawer.label”
},
{
“type”: “text”,
“id”: “drawer_title”,
“label”: “t:sections.header.settings.drawer_title.label”,
“info”: “t:sections.header.settings.drawer_title.info”,
“default”: “Shop by”
},
{
“type”: “header”,
“content”: “t:sections.global.search”
},
{
“type”: “text”,
“id”: “typing_search”,
“label”: “t:sections.header.settings.typing_search.label”
},
{
“type”: “text”,
“id”: “suggestions_title”,
“label”: “t:sections.header.settings.suggestions_title.label”,
“info”: “t:sections.header.settings.suggestions_title.info”
},
{
“type”: “link_list”,
“id”: “suggestions_menu”,
“default”: “main-menu”,
“label”: “t:sections.header.settings.suggestions_menu.label”,
“info”: “t:sections.header.settings.suggestions_menu.info”
}
],
“blocks”: [
{
“type”: “column”,
“name”: “t:sections.header.blocks.column.name”,
“settings”: [
{
“id”: “title”,
“type”: “text”,
“label”: “t:sections.header.blocks.column.settings.menu_item.label”,
“info”: “t:sections.header.blocks.column.settings.menu_item.info”
},
{
“type”: “range”,
“id”: “promo_section_width”,
“min”: 2,
“max”: 6,
“step”: 1,
“default”: 4,
“label”: “t:sections.header.blocks.column.settings.reserved_columns.label”
},
{
“type”: “header”,
“content”: “t:sections.global.image_1”
},
{
“type”: “image_picker”,
“id”: “desktop_image_1”,
“label”: “t:sections.settings.settings.image.label”,
“info”: “t:sections.settings.settings.image.info”
},
{
“id”: “heading_1”,
“type”: “text”,
“label”: “t:sections.settings.settings.heading.label”
},
{
“id”: “text_1”,
“type”: “text”,
“label”: “t:sections.settings.settings.text.label”
},
{
“id”: “link_1”,
“type”: “url”,
“label”: “t:sections.settings.settings.link.label”
},
{
“type”: “header”,
“content”: “t:sections.global.image_2”
},
{
“type”: “image_picker”,
“id”: “desktop_image_2”,
“label”: “t:sections.settings.settings.image.label”,
“info”: “t:sections.settings.settings.image.info”
},
{
“id”: “heading_2”,
“type”: “text”,
“label”: “t:sections.settings.settings.heading.label”
},
{
“id”: “text_2”,
“type”: “text”,
“label”: “t:sections.settings.settings.text.label”
},
{
“id”: “link_2”,
“type”: “url”,
“label”: “t:sections.settings.settings.link.label”
},
{
“type”: “header”,
“content”: “t:sections.global.image_3”
},
{
“type”: “image_picker”,
“id”: “desktop_image_3”,
“label”: “t:sections.settings.settings.image.label”,
“info”: “t:sections.settings.settings.image.info”
},
{
“id”: “heading_3”,
“type”: “text”,
“label”: “t:sections.settings.settings.heading.label”
},
{
“id”: “text_3”,
“type”: “text”,
“label”: “t:sections.settings.settings.text.label”
},
{
“id”: “link_3”,
“type”: “url”,
“label”: “t:sections.settings.settings.link.label”
},
{
“type”: “header”,
“content”: “t:sections.global.image_4”
},
{
“type”: “image_picker”,
“id”: “desktop_image_4”,
“label”: “t:sections.settings.settings.image.label”,
“info”: “t:sections.settings.settings.image.info”
},
{
“id”: “heading_4”,
“type”: “text”,
“label”: “t:sections.settings.settings.heading.label”
},
{
“id”: “text_4”,
“type”: “text”,
“label”: “t:sections.settings.settings.text.label”
},
{
“id”: “link_4”,
“type”: “url”,
“label”: “t:sections.settings.settings.link.label”
},
{
“type”: “header”,
“content”: “t:sections.global.image_5”
},
{
“type”: “image_picker”,
“id”: “desktop_image_5”,
“label”: “t:sections.settings.settings.image.label”,
“info”: “t:sections.settings.settings.image.info”
},
{
“id”: “heading_5”,
“type”: “text”,
“label”: “t:sections.settings.settings.heading.label”
},
{
“id”: “text_5”,
“type”: “text”,
“label”: “t:sections.settings.settings.text.label”
},
{
“id”: “link_5”,
“type”: “url”,
“label”: “t:sections.settings.settings.link.label”
},
{
“type”: “header”,
“content”: “t:sections.global.image_6”
},
{
“type”: “image_picker”,
“id”: “desktop_image_6”,
“label”: “t:sections.settings.settings.image.label”,
“info”: “t:sections.settings.settings.image.info”
},
{
“id”: “heading_6”,
“type”: “text”,
“label”: “t:sections.settings.settings.heading.label”
},
{
“id”: “text_6”,
“type”: “text”,
“label”: “t:sections.settings.settings.text.label”
},
{
“id”: “link_6”,
“type”: “url”,
“label”: “t:sections.settings.settings.link.label”
}
]
}
]
}
{% endschema %}

[visitor1231]

Does anyone have any suggestions to fix the code?