Venture theme logo positioning

Tourist
6 0 2

Hi guys, cant find which settings to change to get logo to center in venture theme, thanks

2 Likes
Shopify Staff
Shopify Staff
45 0 9

Hi Ramunas!

There are a few changes that need to be made to center the logo on the Venture theme.

You'll want to start by opening up theme.liquid and searching site-header__upper

This will bring you to your header code. I've pasted the solution below. You'll want to take your current code and compare it with this and make the necessary changes. To explain the changes a bit, the header has 3 columns. The first column is the mobile menu which is hidden on laptops/desktop versions. I've changed the column sizes to 1/4, 1/2 and 1/4 and added a center class to the center column. We also later add some CSS to Assets/theme.scss.liquid to hide the mobile menu button when the device is not mobile.

Here is the code. Be sure to make a backup of your theme before implementing changes:

  <div id="PageContainer" class="page-container is-moved-by-drawer">
    <header class="site-header" role="banner">
      <div class="site-header__upper page-width">
        <div class="grid grid--table">
          <div class="grid__item small--one-quarter medium-up--one-quarter">
            <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-half small--text-center medium-u">
            {% comment %}
              Use the uploaded logo from theme settings if enabled.
              Site name gets precedence with H1 tag on homepage, div on other pages.
            {% endcomment %}
            {% if template == 'index' %}
              <h1 class="site-header__logo" itemscope itemtype=";
            {% else %}
              <div class="site-header__logo h1" itemscope itemtype=";
            {% endif %}
              {% if settings.logo_use_image %}
                <a href="/" itemprop="url" class="site-header__logo-link">
                  <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
                </a>
              {% else %}
                {% assign shop_name_length = shop.name.size %}
                <a href="/" itemprop="url" {% if shop_name_length > 10 %} class="site-header__shop-name--small"{% endif %}>{{ shop.name }}</a>
              {% endif %}
            {% if template == 'index' %}
              </h1>
            {% else %}
              </div>
            {% endif %}
          </div>

          <div class="grid__item small--one-quarter medium-up--one-quarter text-right">
            <div id="SiteNavSearchCart">
              <form action="/search" method="get" class="site-header__search small--hide" role="search">
                {% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
                <div class="site-header__search-inner">
                  <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">
                </div>

                <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="/cart" 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>

The 3 changes made were on these 3 lines:
<div class="grid__item small--one-quarter medium-up--one-quarter">
<div class="grid__item small--one-half medium-up--one-half small--text-center medium-up--text-center">
<div class="grid__item small--one-quarter medium-up--one-quarter text-right">

Once you've made those changes, there's just a couple lines of CSS to add in theme.scss.liquid.

Once you've opened the file, search .site-header__link {

You should see this:

/*================ Menu toggle, Cart, and Search icons ================*/
.site-header__link {
  display: inline-block;
  color: $color-header-links;
  padding: $gutter-site / 2;
  line-height: 1;
  
  .icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
  }

  &:hover,
  &:focus {
    color: $color-accent;
  }
}

Add the following directly underneath it:

.site-header__link.js-drawer-open-left {
  @include media-query($medium-up) {
  	display:none;
  }
}

That should do it!

All the best,
Justin.

0 Likes
New Member
5 0 0

Hi i have a question, i currently attempted to do the same but my logo was not centered on desktop it was to farl left. Is there a way to fix this?

Thaks In Advance! 

0 Likes
Shopify Partner
1 0 0

Hey,

 

Thanks the above worked but on desktop it doesn't look centered I think because of the shopping cart and search bar, please see screenshot. I did it for the menu by offsetting it from reading another post https://ecommerce.shopify.com/c/ecommerce-design/t/venture-theme-center-navigation-bar-353950

Update.....

Added margin-left: 25%; which did the trick :)

.site-header__logo {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  max-width: 100%;
  margin-left: 25%;

 

 

0 Likes
Tourist
9 0 1

Can we get an Up to date answer on this subject!

THANKS!

1 Like
Shopify Partner
2522 25 549

You should change your theme.liquid as instructed, but I suggest adding this CSS rule at the bottom of the theme.scss.liquid instead of the one above

@include media-query($medium-up) {
 header button.js-drawer-open-left  {
     visibility:hidden;
 }    
}

This will sort out centering issues.

The idea is to have a quarter of the header for the hamburger icon, half (and center align) for the logo and quarter for the search/cart (as it is said in the div classes), but instead of hiding the hamburger on the big screen by using display:none which squashes that section, just make it invisible preserving the section width intact.

The divs should have classes like this

<div class="grid__item small--one-quarter medium-up--one-quarter">
<div class="grid__item small--one-half medium-up--one-half text-center">
<div class="grid__item small--one-quarter medium-up--one-quarter text-right">

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
Tourist
9 0 1

Yea im still not having any luck...

 

0 Likes
Tourist
9 0 1

My code doesnt look like the above "solution" at the top of this....im using venture theme...

0 Likes
New Member
8 0 0

anyone could help with update information? thank you!

0 Likes
Shopify Partner
2522 25 549

Ok, guys, let's check the Doug's site -- here is the srtucture of the header (which is renedered by the header.liquid in Sections)

<header class="site-header page-element is-moved-by-drawer" role="banner" ...>
  <div class="site-header__upper page-width">
    <div class="grid grid--table">
      <div class="grid__item small--one-quarter medium-up--hide">
           ...
      <div class="grid__item small--one-half medium-up--two-thirds small--text-center">
          ...
      <div class="grid__item small--one-quarter medium-up--one-third text-right">

I intentionally removed all internal divs with liquid tags, leaving in this listing only ones that matter. We change those three lines like I wrote in my previous message:

<header class="site-header page-element is-moved-by-drawer" role="banner" ...>
  <div class="site-header__upper page-width">
    <div class="grid grid--table">
       <div class="grid__item small--one-quarter medium-up--one-quarter">
           ...
       <div class="grid__item small--one-half medium-up--one-half text-center">
           ...
       <div class="grid__item small--one-quarter medium-up--one-quarter text-right">
           ...

This piece of code goes to the  bottom of the theme.scss.css

@include media-query($medium-up) {
 header button.js-drawer-open-left  {
     visibility:hidden;
 }    
}

And we're done:

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
2 Likes