Skip to content

Instantly share code, notes, and snippets.

@milehighthemes
Last active Nov 30, 2020
Embed
What would you like to do?
Bug fix for ShowTime 6.4 and 6.4.1 logo resize issue
{% if section.settings.show_announcement != blank and section.settings.promo_bar_text != blank %}
{% render 'promo-bar' %}
{% endif %}
{% assign logo_scale_width = section.settings.logo_max_width | times: 2 | append: 'x' %}
<div id="header" data-section-id="{{ section.id }}" data-section-type="header-section">
{% if section.settings.header_style == 'header2' %}
{% render 'header-top-logo', logo_scale_width: logo_scale_width %}
{% else %}
{% render 'header-top', logo_scale_width: logo_scale_width %}
{% endif %}
<div class="header_bot {% if section.settings.sticky_menu %} enabled-sticky-menu {% endif %}">
<div class="header_content">
<div class="container">
{% if section.settings.navigation_type == 'simple' %}
{% render 'main-menu-simple', logo_scale_width: logo_scale_width %}
{% else %}
{% render 'main-menu', logo_scale_width: logo_scale_width %}
{% endif %}
{% if section.settings.show_search_bar_mobile %}
<div class="visible-mobile-xs mobile-portrait-search">
{% render 'menu-search'%}
</div>
{% endif %}
</div>
</div>
</div>
</div><!-- /header -->
{% assign logo_height_math = section.settings.logo_height | escape %}
{% assign navbar_padding = logo_height_math | minus: 12 | divided_by: 2 %}
{% if navbar_padding >= 0 %}
{% assign navbar_padding = navbar_padding| append: 'px' %}
{% else %}
{% assign navbar_padding = 0 %}
{% endif %}
{% assign top_menu_padding = logo_height_math | minus: 44 | divided_by: 2 | append: 'px' %}
{% assign top_menu_padding_plus10 = logo_height_math | minus: 44 | divided_by: 2 | plus: 10 | append: 'px' %}
{% assign fixed_search_padding = logo_height_math | minus: 18 | divided_by: 2 | append: 'px' %}
{% assign logo_height = section.settings.logo_height | append: 'px'%}
<style>
/* This code is used to center logo vertically on different devices */
{% if section.settings.header_style == 'header1' %}
#header #nav .navbar-nav > li > a, #header .navbar-toggle{
{% if section.settings.logo != blank and section.settings.logo_height != blank %}
padding-top: {{navbar_padding}};
padding-bottom: {{navbar_padding}};
{% else %}
padding-top:15px;
padding-bottom:15px;
{% endif %}
}
#header #nav .navbar-nav > li > .fixed-search
{
{% if section.settings.logo != blank and section.settings.logo_height != blank %}
padding-top: {{fixed_search_padding}};
padding-bottom: {{fixed_search_padding}};
padding-left:5px;
{% else %}
padding-top:12px;
padding-bottom:12px;
padding-left:5px;
{% endif %}
}
@media (min-width: 769px) {
#header #nav .wsmenu > ul > li > a {
{% if section.settings.logo != blank and section.settings.logo_height != blank %}
padding-top: {{navbar_padding}};
padding-bottom: {{navbar_padding}};
{% else %}
padding-top:15px;
padding-bottom:15px;
{% endif %}
}
}
{% elsif section.settings.header_style == 'header2' %}
#header .hed_right {
{% if section.settings.logo != blank and section.settings.logo_height != blank %}
{% if section.settings.show_header_phone or section.settings.show_header_email %}
padding-top: {{top_menu_padding}};
padding-bottom: {{navbar_padding}};
{% else %}
padding-top: {{top_menu_padding_plus10}};
{% endif %}
{% else %}
{% if section.settings.show_header_phone or section.settings.show_header_email %}
padding-top:10px;
padding-bottom:10px;
{% else %}
padding-top:20px;
padding-bottom:20px;
{% endif %}
{% endif %}
}
{% else %}
.logo-centered {
width:100%;
background:{{ settings.header_bg_color }};
border-top:1px solid {{ settings.header_border_color }};
}
.logo-centered a {
font-size:26px;
padding:0;
display: block;
margin: 0 auto;
}
.logo-centered img {
margin:0 auto;
text-align: center;
padding:10px 0;
max-width:100%;
}
#header .logo-text {
display: block;
text-align: center;
padding:20px 0;
}
{% endif %}
#header .navbar-toggle, #header .navbar-cart {
{% if section.settings.logo != blank and section.settings.logo_height != blank %}
padding-top: {{navbar_padding}};
padding-bottom: {{navbar_padding}};
{% else %}
padding-top:15px;
padding-bottom:15px;
{% endif %}
}
#header a.navbar-brand {
height:auto;
}
/* @media (max-width: 600px) {
#header .navbar-brand > img {
max-width: 158px;
}
} */
@media (max-width: 600px) {
#header .navbar-toggle, #header .navbar-cart {
{% if section.settings.logo != blank and section.settings.logo_height != blank and section.settings.mobile_padding != blank %}
padding-top: {{ section.settings.mobile_padding | escape }}px;
padding-bottom: {{ section.settings.mobile_padding | escape }}px;
{% else %}
padding-top:15px;
padding-bottom:15px;
{% endif %}
}
}
{% if section.settings.header_style == 'header2' %}
#header .hed_right .header-contact {
clear:both;
float:right;
margin-top:10px;
}
@media (max-width: 989px) {
#header .hed_right ul li {
padding:0 10px;
}
}
@media (max-width: 768px) {
#header .hed_right, #header .hed_right .header-contact {
padding:0;
float:none;
text-align: center;
}
}
@media (min-width: 769px) and (max-width: 800px) {
#header .hed_right ul {
float:left !important;
}
}
{% endif %}
@media (max-width: 900px) {
#header #nav .navbar-nav > li > a {
font-size: 12px;
line-height: 32px;
padding-left:7px;
padding-right:7px;
}
#header .navbar-brand {
font-size: 22px;
line-height: 20px;
{% if section.settings.logo != blank %}
padding:0 15px 0 0;
{% else %}
padding:20px 10px 15px 0;
{% endif %}
}
#header .right_menu > ul > li > a {
margin: 0 0 0 5px;
}
#header #nav .navbar:not(.caret-bootstrap) .navbar-nav:not(.caret-bootstrap) li:not(.caret-bootstrap) > a.dropdown-toggle:not(.caret-bootstrap) > span.caret:not(.caret-bootstrap) {
margin-left: 3px;
}
}
@media (min-width: 769px) and (max-width: 800px) {
#header .hed_right, #header .top_menu {
padding:0 !important;
}
#header .hed_right ul {
display:block !important;
{% if section.settings.header_style != 'header2' %}
float:right !important;
{% endif %}
}
#header .hed_right .header-contact {
margin-top:0 !important;
}
#header .top_menu {
float:left !important;
}
}
@media (max-width: 480px) {
#header .hed_right ul li {
margin: 0;
padding: 0 5px;
border: none;
display: inline-block;
}
}
.navbar:not(.no-border) .navbar-nav.dropdown-onhover>li:hover>a {
margin-bottom:0;
}
figure.effect-chico img {
-webkit-transform: scale(1) !important;
transform: scale(1) !important;
}
figure.effect-chico:hover img {
-webkit-transform: scale(1.2) !important;
transform: scale(1.2) !important;
}
{% if section.settings.header_style != 'header1' %}
@media (min-width: 769px)
{
#header #nav .wsmenu > ul > li > a {
padding-top:15px;
padding-bottom:15px;
}
}
{% endif %}
{% unless section.settings.header_style == 'header1' %}
#header .nav > li:first-child > a {
padding-left:0;
}
{% endunless %}
.promo-bar {
font-size:{{ section.settings.head_promobar | append: 'px' }};
}
.promo-bar p{
font-size:{{ section.settings.head_promobar | append: 'px' }};
}
#header .top_menu ul li {
font-size:{{ section.settings.head_font_size | append: 'px'}};
}
#header .hed_right ul li, #header span.header-top-text p {
font-size:{{ section.settings.head_font_size | append: 'px'}};
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{% if section.settings.logo %}
{% assign image_size = section.settings.logo_max_width | append:'x' %}
"logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
{% endif %}
"sameAs": [
{{ settings.twitter_link | json }},
{{ settings.facebook_link | json }},
{{ settings.pinterest_link | json }},
{{ settings.instagram_link | json }},
{{ settings.tumblr_link | json }},
{{ settings.youtube_link | json }},
{{ settings.vimeo_link | json }}
],
"url": {{ shop.url | append: page.url | json }}
}
</script>
{% if template.name == 'index' %}
{% assign potential_action_target = shop.url | append: "/search?q={search_term_string}" %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ shop.url | append: page.url | json }}
},
</script>
{% endif %}
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "header",
"content": "Announcement bar"
},
{
"type": "checkbox",
"id": "show_announcement",
"label": "Show announcement"
},
{
"type": "text",
"id": "promo_bar_text",
"label": "Text"
},
{
"type": "url",
"id": "promo_bar_link",
"label": "Link"
},
{
"type": "range",
"id": "head_promobar",
"label": "Font size",
"default": 14,
"min": 12,
"max": 20,
"step": 1,
"unit": "px"
},
{
"type": "header",
"content": "Logo"
},
{
"type": "select",
"id": "header_style",
"label": "Choose layout",
"info": "[Learn more](https:\/\/support.milehighthemes.com\/hc\/en-us\/articles\/360020278233-Setting-up-header-and-navigation-styles)",
"options": [
{
"value": "header1",
"label": "Logo left, navigation right"
},
{
"value": "header2",
"label": "Logo and links top, navigation below"
},
{
"value": "header3",
"label": "Logo centered top, navigation below"
}
]
},
{
"type": "image_picker",
"id": "logo",
"label": "Image",
"info": "350 x 120px max"
},
{
"type": "range",
"id": "logo_max_width",
"min": 60,
"max": 350,
"step": 10,
"unit": "px",
"label": "Custom logo width (in pixels)",
"default": 200
},
{
"type": "range",
"id": "logo_height",
"label": "Navigation bar height",
"info": "Vertically align your menu by choosing the pixel height of your logo.",
"min": 10,
"max": 150,
"step": 2,
"unit": "px",
"default": 30
},
{
"type": "range",
"id": "mobile_padding",
"label": "Mobile nav button padding",
"min": 10,
"max": 100,
"step": 5,
"unit": "px",
"default": 15,
"info": "Adjusts positioning of navigation icons on mobile devices. [Learn more](https:\/\/support.milehighthemes.com\/hc\/en-us/articles\/360020084294-What-do-the-navigation-bar-height-and-mobile-nav-padding-settings-do-)"
},
{
"type": "select",
"id": "search_style",
"label": "Search style",
"options": [
{
"value": "icon",
"label": "Icon"
},
{
"value": "bar",
"label": "Search bar"
}
],
"default": "icon"
},
{
"type": "checkbox",
"id": "show_search_bar_mobile",
"label": "Show search bar on mobile"
},
{
"type": "header",
"content": "Main navigation"
},
{
"type": "radio",
"id": "navigation_type",
"label": "Choose type",
"info": "[Learn more](https:\/\/support.milehighthemes.com\/hc\/en-us\/articles\/360020278233-Setting-up-header-and-navigation-styles)",
"options": [
{
"value": "simple",
"label": "Simple"
},
{
"value": "advanced",
"label": "Mega menu"
}
]
},
{
"type": "link_list",
"id": "header_main_linklist",
"label": "Choose menu"
},
{
"type": "checkbox",
"id": "sticky_menu",
"label": "Enable sticky menu"
},
{
"type": "header",
"content": "Subnavigation"
},
{
"type": "select",
"id": "heading_content",
"label": "Choose content",
"options": [
{
"value": "links",
"label": "Links"
},
{
"value": "text",
"label": "Text"
},
{
"value": "none",
"label": "None"
}
],
"default": "links"
},
{
"type": "range",
"id": "head_font_size",
"label": "Font size",
"default": 14,
"min": 12,
"max": 20,
"step": 1,
"unit": "px"
},
{
"type": "link_list",
"id": "header_top_linklist",
"label": "Choose menu",
"info": "This menu won't show dropdown items"
},
{
"type": "richtext",
"id": "header_top_text",
"label": "Text"
},
{
"type": "text",
"id": "header_phone",
"label": "Phone number",
"default": "800.555.5555"
},
{
"type": "text",
"id": "header_email",
"label": "Email address",
"default": "example@cooktime.com"
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment