Venture theme adding the Logo next to the Navigation bar

Highlighted
New Member
1 0 0

So I am trying to add my logo next to my navigation bar or my navigation bar next to my logo. and I am not finding really anything online. someone help!

 

What I haveWhat I haveWhat I'm looking forWhat I'm looking for

0 Likes
Highlighted
Shopify Partner
1016 210 254

Hello 

To achieve this you have to do customization, if you are familiar with html you can do this
First you have to create space left of menu for logo.
Second you have to adjust right hand side menu 'Account' with icons
Third have to align logo in mobile devices.

Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Excursionist
32 6 12

Hello, 

Go to your header file code. 

look for

class="site-header__upper page-width"

 there is a grid inside with three items, one is hamburger icon, other two are logo and cart icon. 

change this item class 

grid__item small--one-half medium-up--two-thirds small--text-center 


TO 

grid__item small--one-half medium-up--one-quarter small--text-left

 

and 

grid__item small--one-quarter medium-up--one-third text-right

TO

grid__item small--one-quarter medium-up--one-quarter text-right


Now you have 50% of grid space FREE for nav menu.

You can add another div between those two items, and hide it on mobile.. something like this

<div class="grid__item small--hide medium-up--one-half text-center"> INSERT YOUR NAV CODE </div> 

 

After just remove that nav container or comment it out. 

<!-- 
<div id="StickNavWrapper" style="height: 59px;">
...
</div>
-->

 

Best,

 

Want to modify or custom changes on store hire me.
If my answer is helpful, Please Like and Accept Solution.
Buy me a coffee
1 Like
Highlighted
New Member
2 0 0

This worked until I got to nav code. I ended up moving the line starting with <nav class="nav-bar small--hide" role="navigation" id="StickyNav">.... to inside the div you mentioned. It works but I have a hamburger menu instead of nav bar I think im close..

 

<header class="site-header page-element is-moved-by-drawer" role="banner" data-section-id="{{ section.id }}" data-section-type="header">
  <div class="site-header__upper page-width">
    <div class="grid grid--table">
      <div class="grid__item small--one-quarter medium-up--hide">
        <button type="button" class="text-link site-header__link js-drawer-open-left">
          <span class="site-header__menu-toggle--open">
            {% include 'icon-hamburger' %}
          </span>
          <span class="site-header__menu-toggle--close">
            {% include 'icon-close' %}
          </span>
          <span class="icon__fallback-text">{{ 'general.drawers.navigation' | t }}</span>
        </button>
      </div>
      
      <div class="grid__item small--one-half medium-up--one-quarter small--text-left">
        {% if request.page_type == 'index' %}
          <h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
        {% else %}
          <div class="site-header__logo h1" itemscope itemtype="http://schema.org/Organization">
        {% endif %}
          {% if section.settings.logo != blank %}
            {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
            <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
              <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="{{ section.settings.logo.alt | default: shop.name }}"
                   itemprop="logo">
            </a>
          {% else %}
            {% assign shop_name_length = shop.name.size %}
            <a href="{{ routes.root_url }}" itemprop="url" {% if shop_name_length > 10 %} class="site-header__shop-name--small"{% endif %}>{{ shop.name }}</a>
          {% endif %}
        {% if request.page_type == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>

      <div class="grid__item small--hide medium-up--one-half text-center">
        <nav class="nav-bar small--hide" role="navigation" id="StickyNav">
          <div class="page-width">
            <div class="grid grid--table">
              <div class="grid__item {% if shop.customer_accounts_enabled %}four-fifths{% else%}seven-eighths{% endif %}" id="SiteNavParent">
                <button type="button" class="hide text-link site-nav__link site-nav__link--compressed js-drawer-open-left" id="SiteNavCompressed">
                  {% include 'icon-hamburger' %}
                  <span class="site-nav__link-menu-label">{{ 'general.drawers.menu' | t }}</span>
                  <span class="icon__fallback-text">{{ 'general.drawers.navigation' | t }}</span>
                </button>
                <ul class="site-nav list--inline" id="SiteNav">
                  {% for link in linklists[section.settings.main_linklist].links %}
                    {% assign child_list_handle = link.title | handleize %}

                    {% comment %}
                      Use full width layout if there are 7+ links or parent has products
                    {% endcomment %}
                    {% assign meganav_use_columns = false %}
                    {% assign nav_parent_product_count = link.object.products_count %}
                    {% unless nav_parent_product_count == blank or nav_parent_product_count == 0 %}
                      {% assign meganav_use_columns = true %}
                    {% endunless %}

                    {% if link.links.size > 7 %}
                      {% assign meganav_use_columns = true %}
                    {% endif %}

                    {% assign is_collection_with_products = false %}
                    {% if link.type == 'collection_link' and link.object.products_count > 0 %}
                      {% assign is_collection_with_products = true %}
                    {% endif %}

                    {% if link.links != blank %}
                      <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}{% unless meganav_use_columns %} site-nav__item--no-columns{% endunless %}" aria-haspopup="true">
                        <a href="{{ link.url }}" class="site-nav__link site-nav__link-toggle" id="SiteNavLabel-{{ child_list_handle }}" aria-controls="SiteNavLinklist-{{ child_list_handle }}" aria-expanded="false"{% if link.active %} aria-current="page"{% endif %}>
                          {{ link.title }}
                          {% include 'icon-arrow-down' %}
                        </a>

                        <div class="site-nav__dropdown meganav site-nav__dropdown--second-level" id="SiteNavLinklist-{{ child_list_handle }}" aria-labelledby="SiteNavLabel-{{ child_list_handle }}" role="navigation">
                          <ul class="meganav__nav{% if is_collection_with_products %} meganav__nav--collection{% endif %} page-width">
                            {% include 'site-nav' %}
                          </ul>
                        </div>
                      </li>
                    {% else %}
                      <li class="site-nav__item{% if link.active %} site-nav--active{% endif %}">
                        <a href="{{ link.url }}" class="site-nav__link"{% if link.active %} aria-current="page"{% endif %}>
                          {{ link.title }}
                        </a>
                      </li>
                    {% endif %}
                  {% endfor %}
                </ul>
              </div>
              <div class="grid__item {% if shop.customer_accounts_enabled %}one-fifth{% else%}one-eighth{% endif %} text-right">
                <div class="sticky-only" id="StickyNavSearchCart"></div>
                {% if shop.customer_accounts_enabled %}
                  <div class="customer-login-links sticky-hidden">
                    {% if customer %}
                      <a href="{{ routes.account_url }}">
                        {{ 'layout.customer.account' | t }}
                      </a>
                      {{ 'layout.customer.log_out' | t | customer_logout_link }}
                    {% else %}
                      {{ 'layout.customer.account' | t | customer_login_link }}
                    {% endif %}
                  </div>
                {% endif %}
              </div>
            </div>
          </div>
        </nav>
      </div>
      
      <div class="grid__item small--one-quarter medium-up--one-quarter text-right">
        <div id="SiteNavSearchCart" class="site-header__search-cart-wrapper">
          <form action="{{ routes.search_url }}" method="get" class="site-header__search small--hide" role="search">
            {% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
              <label for="SiteNavSearch" class="visually-hidden">{{ 'general.search.placeholder' | t }}</label>
              <input type="search" name="q" id="SiteNavSearch" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="site-header__search-input">

            <button type="submit" class="text-link site-header__link site-header__search-submit">
              {% include 'icon-search' %}
              <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
            </button>
          </form>

          <a href="{{ routes.cart_url }}" class="site-header__link site-header__cart">
            {% include 'icon-cart' %}
            <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
            <span class="site-header__cart-indicator {% if cart.item_count == 0 %}hide{% endif %}"></span>
          </a>
        </div>
      </div>
    </div>
  </div>

  
      <div id="NotificationSuccess" class="notification notification--success" aria-hidden="true">
        <div class="page-width notification__inner notification__inner--has-link">
          <a href="{{ routes.cart_url }}" class="notification__link">
            <span class="notification__message">{{ 'products.product.product_added_to_cart_html' | t }}</span>
          </a>
          <button type="button" class="text-link notification__close">
            {% include 'icon-close' %}
            <span class="icon__fallback-text">{{ 'cart.general.close_notification' | t }}</span>
          </button>
        </div>
      </div>
      <div id="NotificationError" class="notification notification--error" aria-hidden="true">
        <div class="page-width notification__inner">
          <span class="notification__message notification__message--error" aria-live="assertive" aria-atomic="true"></span>
          <button type="button" class="text-link notification__close">
            {% include 'icon-close' %}
            <span class="icon__fallback-text">{{ 'cart.general.close_notification' | t }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  {% if section.settings.promo_bar_enable and section.settings.promo_bar_text != blank %}
    <div id="NotificationPromo" class="notification notification--promo" data-text="{{ section.settings.promo_bar_text | strip_html | handle }}">
      <div class="page-width notification__inner {% if section.settings.promo_bar_link != blank %} notification__inner--has-link{% endif %}">
        {% if section.settings.promo_bar_link != blank %}
          <a href="{{ section.settings.promo_bar_link }}" class="notification__link">
            <span class="notification__message">{{ section.settings.promo_bar_text | escape }}</span>
          </a>
        {% else %}
          <span class="notification__message">{{ section.settings.promo_bar_text | escape }}</span>
        {% endif %}
        <button type="button" class="text-link notification__close" id="NotificationPromoClose">
          {% include 'icon-close' %}
          <span class="icon__fallback-text">{{ 'cart.general.close_notification' | t }}</span>
        </button>
      </div>
    </div>
  {% endif %}
</header>
0 Likes