Change size of logo Mr Parker Theme

New Member
4 0 0

Hi Everyone,

Is anyone able to help me resize my store's logo? It looks way too small on the mobile site and too narrow on the PC as well. I have looked at previous community posts which suggests that I add code to theme.spss.liquid (i think I wrote that right), I searched my theme and it doesn't have it. I feel like the solution is in header.liquid/logo_max_width somewhere but I am having no luck. Can anyone help me? I really want to customize my logo settings.

 

0 Likes
New Member
4 0 0
Here is my header.theme bellow:

<div class="header-section" data-section-id="{{ section.id }}" data-section-type="header-section">
<header {% if section.settings.absolute_header %} class="wrapper-is-absolute"{% endif %}>
{% if section.settings.full_width %}<div class="gridlock-fluid"><div class="row">{% endif %}
<div class="row">
<div class="header-inner">
<div id="header-search" class="desktop-3 tablet-hide mobile-hide">
<form action="/search" method="get">
<input type="text" name="q" id="q" placeholder="{{ 'general.search.placeholder' | t }}" />
</form>
</div>

<div id="message" class="announcement-bar desktop-6 tablet-6 mobile-3">
{% unless section.settings.show_announcement_text == false %}
{{ section.settings.announcement_text }}
{% endunless %}
</div>

<div class="mobile-trigger mobile-1 tablet-2">
<span class="shifter-handle">
<i class="fas fa-bars"></i>
</span>
</div>

<div id="mobile-logo" class="desktop-hide mobile-1 tablet-2">
{% if section.settings.logo != blank %}
{% assign image_size = '600x' %}
<a href="/">
<img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">
</a>
{% else %}
<a href="/" style="line-height: 36px;">{{ shop.name }}</a>
{% endif %}
</div>

<ul id="cart" class="desktop-3 tablet-2 mobile-1">
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="customer-account">
<a href="/account">
<i class="fas fa-user" aria-hidden="true"></i>&nbsp;&nbsp;{{ 'layout.customer.my_account' | t }}
</a>&nbsp;&nbsp;<i class="fas fa-user-times" aria-hidden="true"></i>&nbsp;&nbsp;{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li class="customer-login"><a href="/account/login"><i class="fas fa-user" aria-hidden="true"></i>&nbsp;&nbsp;{{ 'layout.customer.log_in' | t }}/{{ 'layout.customer.create_account' | t }}</a></li>
{% endif %}
{% endif %}
{% if settings.show_multiple_currencies %}
<li class="currency-selector">{% include 'currency-selector' %}</li>
{% endif %}
<li>
<a href="/cart"{% if settings.ajax_cart_method == 'drawer' %} class="site-header__cart-toggle js-drawer-open-right" aria-controls="CartDrawer" aria-expanded="false"{% endif %}>
<i class="fas fa-shopping-cart" aria-hidden="true"></i><span class="cart-name">&nbsp;{{ 'layout.cart.my_cart' | t }}</span> <span class="cart-count">{{ cart.item_count }}</span>
</a>
</li>
</ul>
</div>
</div>
{% if section.settings.full_width %}</div></div>{% endif %}
<div class="clear"></div>
</header>
<div class="clear"></div>
{% if settings.show_notfication and settings.notification_position == 'above-header' -%}
{% include 'notification' %}
{% endif %}
<div class="header-wrapper{% if section.settings.absolute_header %} absolute{% endif %}">
{% if section.settings.full_width %}<div class="gridlock-fluid"><div class="row">{% endif %}
<div class="row">
{% comment %}Capture the logo as we will use it again in the navigation snippet{% endcomment %}
{% capture logo %}
<div id="logo" class="{% if section.settings.logo_position == 'inline' %}inline{% elsif section.settings.logo_position == 'above' %}above{% endif %}{% if section.settings.logo_alignment == 'center' %} logo-center{% else %} logo-left{% endif %}">
{% if section.settings.logo != blank %}
{% assign image_size = '600x' %}
<a href="/">
<img src="{{ section.settings.logo | img_url: image_size }}" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">
</a>
{% else %}
<a href="/">{{ shop.name }}</a>
{% endif %}
</div>
{% endcapture %}

{% comment %}If the logo is not inline and centered{% endcomment %}
{% unless section.settings.logo_position == 'inline' and section.settings.logo_alignment == 'center' %}
{{ logo }}
{% endunless %}

{% case section.settings.nav_alignment %}
{% when 'left' %}
{% assign nav_align = 'left' %}
{% when 'center' %}
{% assign nav_align = 'center' %}
{% when 'right' %}
{% assign nav_align = 'right' %}
{% endcase %}

{% if section.settings.logo_position == 'inline' and section.settings.logo_alignment == 'center' %}
{% assign split = section.settings.nav_split | plus:0 %}
{% assign inline_centered = true %}
{% endif %}

<nav class="{% if section.settings.logo_position == 'inline' and section.settings.logo_alignment == 'left' %}nav-inline{% else %}nav-block{% endif %} nav-{{ nav_align }}">

{% comment %}If the logo is NOT inline and centered show the full nav as normal{% endcomment %}
{% unless section.settings.logo_position == 'inline' and section.settings.logo_alignment == 'center' %}
{% include 'navigation' %}
{% endunless %}

{% comment %}If the logo is inline and centered split it to either side of the logo{% endcomment %}
{% if inline_centered == true %}
{% include 'navigation', start:split, offset:0, position: 'left-side' %}
{{ logo }}
{% include 'navigation', start:, offset:split, position: 'right-side' %}
{% endif %}
</nav>
</div>
{% if section.settings.full_width %}</div></div>{% endif %}
</div>

<div class="clear"></div>

</div>
<style>
/* Nav Header Over Content */
{% if section.settings.absolute_header == true %}
@media screen and ( min-width: 981px ) {
body.index .header-section {
position: absolute;
width: 100%;
z-index: 8;
}
body.index header.wrapper-is-absolute {
background-color: transparent;
color: {{ section.settings.homepage_nav_color }};
}
body.index header.wrapper-is-absolute #header-search input#q,
body.index header.wrapper-is-absolute a,
body.index header.wrapper-is-absolute select#currencies,
body.index .header-wrapper.absolute ul.nav li a.d-link,
body.index .header-wrapper.absolute ul.nav li a.d-link:after {
color: {{ section.settings.homepage_nav_color }};
}
body.index header.wrapper-is-absolute #header-search input#q::-webkit-input-placeholder {
color: {{ section.settings.homepage_nav_color }};
}

body.index header.wrapper-is-absolute #header-search input#q::-moz-placeholder {
color: {{ section.settings.homepage_nav_color }};
}

body.index header.wrapper-is-absolute #header-search input#q:-moz-placeholder { /* Older versions of Firefox */
color: {{ section.settings.homepage_nav_color }};
}

body.index header.wrapper-is-absolute #header-search input#q:-ms-input-placeholder {
color: {{ section.settings.homepage_nav_color }};
}
}
@media screen and ( min-width: 741px ) {
body.index .header-wrapper.absolute.stuckMenu ul.nav li.dropdown > a,
body.index .header-wrapper.absolute.stuckMenu ul.nav li.no-dropdown > a,
body.index .header-wrapper.absolute.stuckMenu #logo a,
body.index .header-wrapper.absolute.stuckMenu ul.nav li.dropdown > a.dlink:after {
color: {{ section.settings.homepage_nav_color }};
}

body.index .header-wrapper.absolute.stuckMenu,
body.index .header-wrapper.absolute.stuckMenu #navigation,
body.index .header-wrapper.absolute.stuckMenu ul.nav {
background-color: transparent;
}

body.index .header-wrapper.absolute.stuckMenu.isStuck ul.nav li.dropdown > a,
body.index .header-wrapper.absolute.stuckMenu.isStuck ul.nav li.no-dropdown > a,
body.index .header-wrapper.absolute.stuckMenu.isStuck #logo a,
body.index .header-wrapper.absolute.stuckMenu.isStuck ul.nav li.dropdown > a.dlink:after {
color: {{ settings.nav_color }} !important;
}

body.index .header-wrapper.absolute.stuckMenu.isStuck {
background-color: {{ settings.header_wrapper_background }};
}
}
{% else %}
.header-wrapper {
background: {{ settings.header_wrapper_background }};
}
.header-wrapper ul.nav {
background: {{ settings.header_wrapper_background }};
}
{% endif %}

/* Nav Text Logo */
{% if section.settings.logo != blank %}
#logo {
line-height: 0;
}
#logo img {
max-width: {{ section.settings.logo_max_width }}px;
}
{% endif %}

#logo a {
font-size: {% if section.settings.logo != blank %}inherit{% else %}{{ section.settings.logo_size }}px{% endif %};
font-weight: {{ settings.heading_weight }};
line-height: {% if section.settings.logo != blank %}inherit{% else %}calc({{ section.settings.logo_size }}px * 1.25){% endif %}
}
#mobile-logo {
{% unless section.settings.logo %}line-height: 17px; {% endunless %}
}

/* Nav Search */
header #header-search input#q::-webkit-input-placeholder {
line-height: {{ section.settings.announcement_bar_height }}px;
height: {{ section.settings.announcement_bar_height }}px;
}
header #header-search input#q::-moz-placeholder {
line-height: {{ section.settings.announcement_bar_height }}px;
height: {{ section.settings.announcement_bar_height }}px;
}
header #header-search input#q:-moz-placeholder {
line-height: {{ section.settings.announcement_bar_height }}px;
height: {{ section.settings.announcement_bar_height }}px;
}
header #header-search input#q:-ms-input-placeholder {
line-height: {{ section.settings.announcement_bar_height }}px;
height: {{ section.settings.announcement_bar_height }}px;
}
.searchbox form #q {
font-size: {{ section.settings.header_size }}px;
font-family: {{ section.settings.header_font }};
}

.announcement-bar p {
font-size: {{ section.settings.announcement_text_size }}px;
margin-bottom: 0;
}
.cart-name, .cart-count, header #header-search input#q {
font-size: {{ section.settings.announcement_text_size }}px;
}
select#currencies, header {
line-height: {{ section.settings.announcement_bar_height }}px;
}

select#currencies {
height: {{ section.settings.announcement_bar_height }}px;
}

{%- case section.settings.nav_height -%}
{%- when 40 -%}
{% assign nav-height = 0 %}
{%- when 42 -%}
{% assign nav-height = 1 %}
{%- when 44 -%}
{% assign nav-height = 2 %}
{%- when 46 -%}
{% assign nav-height = 3 %}
{%- when 48 -%}
{% assign nav-height = 4 %}
{%- when 48 -%}
{% assign nav-height = 5 %}
{%- when 50 -%}
{% assign nav-height = 6 %}
{%- when 52 -%}
{% assign nav-height = 7 %}
{%- when 54 -%}
{% assign nav-height = 8 %}
{%- when 56 -%}
{% assign nav-height = 9 %}
{%- when 58 -%}
{% assign nav-height = 10 %}
{%- when 60 -%}
{% assign nav-height = 11 %}
{%- when 62 -%}
{% assign nav-height = 12 %}
{%- when 64 -%}
{% assign nav-height = 13 %}
{%- when 66 -%}
{% assign nav-height = 14 %}
{%- when 68 -%}
{% assign nav-height = 15 %}
{%- when 70 -%}
{% assign nav-height = 16 %}
{%- endcase -%}

.header-wrapper ul.nav li a {
padding: {{ nav-height }}px 15px;
}

/* Logo Settings */
{% if section.settings.logo_position == 'inline' %}
@media screen and ( min-width: 981px ) {
#logo {
display: inline-block;
{% if inline_centered != true %}
float: none;
{% endif %}
vertical-align: middle;
}
#logo img {
display: inline-block;
vertical-align: middle;
}
nav.nav-inline {
display: inline-block;
float: none !important;
vertical-align: middle;
margin: 0 !important;
}
}
{% elsif section.settings.logo_position == 'above' %}
.header-wrapper #logo {
padding: 10px 0;
}
{% endif %}

/* Position Center Align Logo Inline Nav */
{% if inline_centered == true %}
.header-wrapper ul.nav.inline-centered {
width: calc((99% * 0.5) - ({{ section.settings.logo_max_width }}px / 2 ));
}
{% endif %}

/* Nav Hover Effects */
{% if section.settings.nav_hover_effect == 'bottom-border' %}
.header-wrapper ul.nav li.first-level:hover a.first-level:after {
content: "";
background-color: {{ settings.nav_hover_accent_color }};
height: 3px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
{% elsif section.settings.nav_hover_effect == 'underline-box' %}
.header-wrapper ul.nav > li.first-level a.first-level {
position: relative;
}
.header-wrapper ul.nav > li.first-level a.first-level:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: {{ settings.nav_hover_link_color }};
height: 2px;
}
.header-wrapper ul.nav > li.first-level:hover a.first-level:after {
width: 100%;
}

.header-wrapper ul.nav > li.first-level a.first-level {
transition: all .24s;
}

.header-wrapper ul.nav > li.first-level a.first-level:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
.header-wrapper ul.nav > li.first-level:hover a.first-level {
color: {{ settings.nav_hover_link_color }};
z-index: 1;
}
.header-wrapper ul.nav > li.first-level:hover a.first-level:after {
z-index: -10;
animation: fill .65s forwards;
-webkit-animation: fill .65s forwards;
-moz-animation: fill .65s forwards;
opacity: 1;
}

/* Keyframes */
@-webkit-keyframes fill {
0% {
width: 0%;
height: 2px;
}
50% {
width: 100%;
height: 2px;
}
100% {
width: 100%;
height: 100%;
background: {{ settings.nav_hover_accent_color }};
}
}
{% elsif section.settings.nav_hover_effect == 'shift-box' %}
.header-wrapper ul.nav > li.first-level a.first-level,
.header-wrapper ul.nav > li.first-level a.first-level:after,
.header-wrapper ul.nav > li.first-level a.first-level:before {
transition: all .5s;
}

.header-wrapper ul.nav > li.first-level a.first-level {
position:relative;
z-index: 1;
}
.header-wrapper ul.nav > li.first-level:hover a.first-level {
color: {{ settings.nav_hover_link_color }};
}
.header-wrapper ul.nav > li.first-level a.first-level:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 1px;
content: '.';
color: transparent;
background: {{ settings.nav_hover_accent_color }};
visibility: none;
opacity: 0;
z-index: -1;
}
.header-wrapper ul.nav > li:hover a.first-level:after {
opacity: 1;
visibility: visible;
height: 100%;
}
{% endif %}

/* Position Left Align Logo Inline Nav Aligned Right */
{% if section.settings.logo_position == 'inline' and section.settings.logo_alignment == 'left' and section.settings.nav_alignment == 'right' %}
.header-wrapper ul.nav li ul.submenu {
right: 0;
left: unset;
width: 1000px;
}
{% endif %}

/* Nav Borders */
{% if section.settings.nav_top_border %}
nav:before {
content:"";
border-top: 1px solid {{ section.settings.nav_border_color }};
position: absolute;
top: 0;
left: 1%;
width: 98%;
}
{% endif %}
{% if section.settings.nav_bottom_border %}
nav:after {
content:"";
border-bottom: 1px solid {{ section.settings.nav_border_color }};
position: absolute;
bottom: 0;
left: 1%;
width: 98%;
}
{% endif %}

/* Position Left Align Logo Inline Nav */
{% if section.settings.logo_position == 'inline' and section.settings.logo_alignment == 'left' %}
.header-wrapper .inline.logo-left {
width: calc({{ section.settings.logo_max_width }}px + 100x);
padding-left: 15px;
}

.header-wrapper .nav-inline {
width: calc(95% - {{ section.settings.logo_max_width }}px);
}
{% endif %}

/* Position Left Align Logo Above Nav */
{% if section.settings.logo_position == 'above' and section.settings.logo_alignment == 'left' %}
.header-wrapper .above.logo-left {
width: 100%;
padding-left: 15px !important;
}
{% endif %}
</style>
0 Likes
Shopify Partner
1657 278 347

Hi @Vatsal17 

Send  your store url so we can check. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
4 0 0
Hi Jasoliya,

Here’s our store www.vibesbeunique.com. I really hope you can help us 🙏
0 Likes
New Member
4 0 0
Hi Jasoliya,
Here’s our store URL https://vibesbeunique.com/. I really hope you can help us 🙏
0 Likes
Highlighted
Shopify Partner
1657 278 347

Hi @Vatsal17 

Add this css in Asset->theme.scss or any main css file 

#logo img { max-width: 200px; }

Note: You can play with 200 as you want.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes