Supply theme: Logo in navbar

Highlighted
New Member
1 0 0

Hi there,

I'm trying to put my logo into the navbar, without succes. Can someone tell me how to edit my code into liquid? Please find below my CSS

Website: https://timnoel.myshopify.com/

Password: trawpa

Tnx in advance. 

 

 

<header class="site-header" role="banner" data-section-id="{{ section.id }}" data-section-type="header-section">
<div class="wrapper">

<div class="grid--full">
<div class="grid-item large--one-half">
{% if request.page_type == 'index' %}
<h1 class="header-logo" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 header-logo" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo %}
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<a href="{{ routes.root_url }}" itemprop="url">
<div class="lazyload__image-wrapper no-js header-logo__image" style="max-width:{{ section.settings.logo_max_width }}px;">
<div style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
<img class="lazyload js"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
style="width:{{ section.settings.logo_max_width }}px;">
</div>
</div>
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ logo_alt | escape }}"
itemprop="logo"
style="max-width:{{ section.settings.logo_max_width }}px;">
</noscript>
</a>
{% else %}
<a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
{% endif %}
{% if request.page_type == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>

<div class="grid-item large--one-half text-center large--text-right">
{% if section.settings.show_announcement or shop.customer_accounts_enabled %}
<div class="site-header--text-links{% if section.settings.announcement_text == blank %} medium-down--hide{% endif %}">
{% if section.settings.show_announcement %}
{% if section.settings.announcement_link != blank %}
<a href="{{ section.settings.announcement_link }}">
{% endif %}

<p>{{ section.settings.announcement_text | escape }}</p>

{% if section.settings.announcement_link != blank %}
</a>
{% endif %}
{% endif %}

{% if shop.customer_accounts_enabled %}
<span class="site-header--meta-links medium-down--hide">
{% if customer %}
{% capture first_name %}<a href="{{ routes.account_url }}">{{ customer.first_name }}</a>{% endcapture %}
{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }} &middot; {{ 'layout.customer.log_out' | t | customer_logout_link }}
{% else %}
{{ 'layout.customer.sign_in' | t | customer_login_link }}
<span class="site-header--spacer">{{ 'layout.customer.or' | t }}</span>
{{ 'layout.customer.create_account' | t | customer_register_link }}
{% endif %}
</span>
{% endif %}
</div>

<br class="medium-down--hide">
{% endif %}


<a href="{{ routes.cart_url }}" class="header-cart-btn cart-toggle">
<span class="icon icon-cart"></span>
{{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
</div>

</div>
</header>

<div id="mobileNavBar">
<div class="display-table-cell">
<button class="menu-toggle mobileNavBar-link" aria-controls="navBar" aria-expanded="false"><span class="icon icon-hamburger" aria-hidden="true"></span>{{ 'layout.navigation.mobile_menu' | t }}</button>
</div>
<div class="display-table-cell">
<a href="{{ routes.cart_url }}" class="cart-toggle mobileNavBar-link">
<span class="icon icon-cart"></span>
{{ 'layout.cart.cart' | t }} <span class="cart-count {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
</div>

<nav class="nav-bar" id="navBar" role="navigation">
<div class="wrapper">
{% include 'search-bar' %}
{% include 'mobile-nav' %}
{% include 'site-nav' %}
</div>
</nav>

0 Likes