Smaller mobile logo on minimal theme

Solved
Sky228
Excursionist
32 0 6

Hi

Can someone please help me? The logo size on desktop version is perfect size ( 450 x 200px ) but on the mobile version its huge.

this is my preview link

https://skybluetique.com/?_ab=0&_fd=0&_sc=1&key=2c5e1b9bc97e59949bd0fe39339af6d2bb57a2d2605e08e6e3c9...

KetanKumar
Shopify Partner
20651 2142 7820

This is an accepted solution.

@Sky228 

Thank for post 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 769px) {
.site-header {padding: 10px 0;}
.logo__image-wrapper { max-width: 200px !important; margin: 0px auto;}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Sky228
Excursionist
32 0 6

Thank you! Is their a code to have my logo stretch across the top of my checkout page?

KetanKumar
Shopify Partner
20651 2142 7820

@Sky228 

Thanks for your feedback and support. checkout page allows on basic theme setting doesn't more for Shopify basic plan only Shopify plus plan

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
luisu5
Tourist
6 0 1

Hi there, I've tried the same and the logo still looks blurry. Can you please have a look?

KetanKumar
Shopify Partner
20651 2142 7820

@luisu5 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
luisu5
Tourist
6 0 1
Thanks a lot

Here is the website

www.arcandles.com.au

Thanks
Louise
0 Likes
KetanKumar
Shopify Partner
20651 2142 7820

@luisu5 

thanks for store url 

can you please share header section code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
luisu5
Tourist
6 0 1

Hope it is correct. I got it from header.liquid

 

Thanks again

 

<style>
.site-header__logo {
a {
max-width: {{ section.settings.logo_max_width }}px;
}
}

/*================= If logo is above navigation ================== */
{% if section.settings.nav_below_logo %}
.site-nav {
{% if section.settings.show_header_lines %}
border-top: 1px solid {{ settings.color_borders }};
border-bottom: 1px solid {{ settings.color_borders }};
{% endif %}
margin-top: 30px;
}
{% endif %}

/*============ If logo is on the same line as navigation ============ */
{% unless section.settings.nav_below_logo or section.settings.show_header_lines == false %}
.site-header .grid--full {
border-bottom: 1px solid {{ settings.color_borders }};
padding-bottom: 30px;
}
{% endunless %}


{% unless section.settings.nav_below_logo %}
@media screen and (min-width: 769px) {
.site-nav {
text-align: right!important;
}
}
{% endunless %}
</style>

<div data-section-id="{{ section.id }}" data-section-type="header-section">
<div class="header-bar">
<div class="wrapper medium-down--hide">
<div class="post-large--display-table">

{% if section.settings.header_text != blank or section.settings.header_search_enable %}
<div class="header-bar__left post-large--display-table-cell">

{% comment %}
Add social links to header
{% endcomment %}

{% comment %}
<div class="header-bar__module header-bar__module--list">
{% include 'social-links' %}
</div>
{% endcomment %}

{% if section.settings.header_text != blank %}
<div class="header-bar__module header-bar__message">
{{ section.settings.header_text }}
</div>
{% elsif section.settings.header_search_enable %}
<div class="header-bar__module header-bar__search">
{% include 'search-bar' with 'header' %}
</div>
{% endif %}

</div>
{% endif %}

<div class="header-bar__right post-large--display-table-cell">

{% if shop.customer_accounts_enabled %}
<ul class="header-bar__module header-bar__module--list">
{% if customer %}
<li>
<a href="/account">{{ 'layout.customer.account' | t }}</a>
</li>
<li>
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li>
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li>{{ 'layout.customer.or' | t }}</li>
<li>
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
</ul>
{% endif %}

<div class="header-bar__module">
<span class="header-bar__sep" aria-hidden="true"></span>
<a href="/cart" class="cart-page-link">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
</a>
</div>

<div class="header-bar__module">
<a href="/cart" class="cart-page-link">
{{ 'layout.cart.title' | t }}{% unless cart.item_count == 0 %}:{% endunless %}
<span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>

{% if section.settings.header_search_enable %}
{% unless section.settings.header_text == blank %}
<div class="header-bar__module header-bar__search">
{% include 'search-bar' with 'header' %}
</div>
{% endunless %}
{% endif %}

</div>
</div>
</div>
<div class="wrapper post-large--hide">
<button type="button" class="mobile-nav-trigger" id="MobileNavTrigger" data-menu-state="close">
<span class="icon icon-hamburger" aria-hidden="true"></span>
{{ 'layout.navigation.menu' | t }}
</button>
<a href="/cart" class="cart-page-link mobile-cart-page-link">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
{{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
</div>
{% include 'mobile-nav' with linklists[section.settings.nav_menu] %}
</div>

<header class="site-header" role="banner">
<div class="wrapper">

{% if section.settings.nav_below_logo %}

<div class="grid--full">
<div class="grid__item">
{% if template == 'index' %}
<h1 class="site-header__logo{% if section.settings.left_aligned_logo %} post-large--left{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 site-header__logo{% if section.settings.left_aligned_logo %} post-large--left{% endif %}" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
<a href="/" itemprop="url">
<img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ shop.name }}" itemprop="logo">
</a>
{% else %}
<a href="/" itemprop="url">{{ shop.name }}</a>
{% endif %}
{% if template == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
{% if section.settings.header_text != blank %}
<p class="header-message post-large--hide">
<small>{{ section.settings.header_text }}</small>
</p>
{% endif %}
</div>
</div>
<div class="grid--full medium-down--hide">
<div class="grid__item">
{% include 'site-nav' with linklists[section.settings.nav_menu] %}
</div>
</div>

{% else %}

<div class="grid--full post-large--display-table">
<div class="grid__item post-large--one-third post-large--display-table-cell">
{% if template == 'index' %}
<h1 class="site-header__logo post-large--left" itemscope itemtype="http://schema.org/Organization">
{% else %}
<div class="h1 site-header__logo post-large--left" itemscope itemtype="http://schema.org/Organization">
{% endif %}
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
<a href="/" itemprop="url">
<img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ shop.name }}" itemprop="logo">
</a>
{% else %}
<a href="/" itemprop="url">{{ shop.name }}</a>
{% endif %}
{% if template == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
{% if section.settings.header_text != blank %}
<p class="header-message post-large--hide">
<small>{{ section.settings.header_text }}</small>
</p>
{% endif %}
</div>
<div class="grid__item post-large--two-thirds post-large--display-table-cell medium-down--hide">
{% include 'site-nav' with linklists[section.settings.nav_menu] %}
</div>
</div>

{% endif %}

</div>
</header>
</div>

{% schema %}
{
"name": "Header",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo",
"info": "450 x 200px recommended"
},
{
"type": "text",
"id": "logo_max_width",
"label": "Custom logo width (in pixels)",
"default": "450"
},
{
"type": "header",
"content": "Main menu"
},
{
"type": "link_list",
"id": "nav_menu",
"label": "Menu",
"default": "main-menu"
},
{
"type": "checkbox",
"id": "nav_below_logo",
"label": "Center main menu below logo"
},
{
"type": "checkbox",
"id": "left_aligned_logo",
"label": "Left-align logo"
},
{
"type": "checkbox",
"id": "show_header_lines",
"label": "Show divider lines in header"
},
{
"type": "header",
"content": "Top bar"
},
{
"type": "text",
"id": "header_text",
"label": "Top bar text",
"info": "Max 55 characters"
},
{
"type": "checkbox",
"id": "header_search_enable",
"label": "Show search bar"
}
]
}
{% endschema %}

0 Likes
KetanKumar
Shopify Partner
20651 2142 7820

@luisu5 

thanks but something is missing this code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes