Venture theme adding the Logo next to the Navigation bar

[DrawWiffWhitney]

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'm looking for

[Developer-G]

Hello DrawWiffWhitney,

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

[amaisbajwa]

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,

[lporter]

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>

[BlakeSmith]

Hello!

Thank you for the help on this. I was following your directions until "INSERT YOUR NAVO CODE" .... Where do you find that to insert?

Any help you can give would be great! Thank you! 

Blake 

[carnagmus]

NIce, that worked, just gotta tweak the "Account" text, it doesn't match the size of the other menu items. If anyone else is stuck let me know, I was able to get this worked out. 

Thanks,

[nicolay]

yes, me. can you help me?

[FriendlyRemind]

@carnagmus yes I would appreciate help can we get in touch?