HELP!!! Fix Sticky header

ChelsieAnnMarie
New Member
4 0 0

Im trying to change the sticky header from showing my shops logo when scrolling down. I'm currently using the "ICON" theme

 

I want to show only the announcement bar and the main navigation bar

 

Can someone please help me with this! 

 

My shop url is: slimesbychelsie.com 

password: SBC-developer

 

Here is the header.liquid section

 

<header class="scrollheader"
data-section-id="{{ section.id }}"
data-section-type="header-section"
data-sticky="{{ section.settings.enable_sticky_header }}">

  {% if section.settings.top_nav != '' or section.settings.show_announcement or section.settings.cart_position == 'announcement-bar' %}
  {% assign top_bar = true %}
  {% endif %}

  {% unless top_bar == false %}
  <div class="topbar{% if section.settings.full_width_header %} gridlock-fluid{% endif %}">
    <div class="row">
      {% if section.settings.top_nav != blank %}
      <ul id="top_nav" class="desktop-3 tablet-6 mobile-3">
        {% for link in linklists[section.settings.top_nav].links %}
          <li><a href="{{ link.url }}">{{ link.title }}</a></li>
        {% endfor %}
      </ul>
      {% endif %}
      <div class="{% if section.settings.top_nav == blank %}desktop-push-3{% endif %} desktop-6 tablet-6 mobile-3" id="banner-message">
        {% if section.settings.show_announcement and section.settings.announcement_text != blank %}
          {{ section.settings.announcement_text }}
        {% endif %}
      </div>
      {% if section.settings.cart_position == 'announcement-bar' %}
        <ul id="cart" class="desktop-3 tablet-3 mobile-hide right">
          {% include 'shopping-cart-links' %}
        </ul>
      {% endif %}
    </div>
  </div>
  {% endunless %}
  <div id="navigation"{% if section.settings.full_width_header %} class="gridlock-fluid"{% endif %}>
    <div class="row">
      <div class="nav-container desktop-12 tablet-6 mobile-3 {{ section.settings.logo_position }}"><!-- start nav container -->

      <!-- Mobile menu trigger --> <div class="mobile-only span-1" style="text-align: left;"><span class="shifter-handle"><i class="la la-bars" aria-hidden="true"></i></span></div>

      {%- if section.settings.cart_position == 'header' -%}
        {% assign cart_position_header =  true %}
      {%- else -%}
        {% assign cart_position_topbar =  true %}
      {%- endif -%}
      {%- if section.settings.logo_align == 'center' -%}
        {% assign logo_align_center = true %}
      {%- else -%}
        {% assign logo_align_left = true %}
      {%- endif -%}
      {%- if section.settings.logo_position == 'inline' -%}
        {% assign logo_position_inline = true %}
      {%- else -%}
        {% assign logo_position_above = true %}
      {%- endif -%}

      {% assign logo_width = '' %}
      {% assign nav_width = '' %}
      {% assign spacer_width = '' %}
      {% assign header_cart_links_width = '' %}

      {% if cart_position_topbar and logo_align_center and logo_position_inline %}
        {% assign logo_width = 'desktop-2 span-2' %}
        {% assign nav_width = 'desktop-5 span-5' %}
        {% assign spacer_width = 'desktop-5 span-5' %}
      {% elsif cart_position_topbar and logo_align_left and logo_position_inline %}
        {% assign logo_width = 'desktop-2 span-2' %}
        {% assign nav_width = 'desktop-10 span-10' %}
      {% elsif cart_position_topbar and logo_align_left and logo_position_above %}
        {% assign logo_width = 'desktop-12 span-12' %}
        {% assign nav_width = 'desktop-12 span-12' %}
      {% elsif cart_position_topbar and logo_align_center and logo_position_above %}
        {% assign logo_width = 'desktop-12 span-12' %}
        {% assign nav_width = 'desktop-12 span-12' %}
      {% elsif cart_position_header and logo_align_center and logo_position_inline %}
        {% assign logo_width = 'desktop-2 span-2' %}
        {% assign nav_width = 'desktop-5 span-5' %}
        {% assign header_cart_links_width = 'span-5' %}
      {% elsif cart_position_header and logo_align_left and logo_position_inline %}
        {% assign logo_width = 'deskop-2 span-2' %}
        {% assign nav_width = 'desktop-5 span-5' %}
        {% assign header_cart_links_width = 'span-5' %}
      {% elsif cart_position_header and logo_align_left and logo_position_above %}
        {% assign logo_width = 'desktop-12 span-12' %}
        {% assign nav_width = 'desktop-6 span-6' %}
        {% assign header_cart_links_width = 'span-6' %}
      {% elsif cart_position_header and logo_align_center and logo_position_above %}
        {% assign logo_width = 'desktop-12 span-12' %}
        {% assign nav_width = 'desktop-6 span-6' %}
        {% assign header_cart_links_width = 'desktop-6 span-6' %}
      {% endif %}

      {% if logo_align_left or logo_position_above %}
        {% include 'logo' %}
      {% endif %}

      <nav class="header-navigation {{ nav_width }}">
        <ul id="main-nav">
          {% for link in linklists[section.settings.main_nav].links %}
            {% include 'navigation' %}
          {% endfor %}
        </ul>
      </nav>

      {% if logo_align_center and logo_position_inline %}
        {% include 'logo' %}
      {% endif %}

      {% if cart_position_header %}
        <ul id="cart" class="{{ header_cart_links_width }}">
            {% include 'shopping-cart-links' %}
        </ul>
      {% elsif cart_position_topbar and logo_align_center %}
        <div class="{{ spacer_width }}" id="logo-spacer">
        </div>
      {% endif %}

      {% include 'mobile-cart' %}
      </div><!-- end nav container -->

    </div>
  </div>
  <div class="clear"></div>
  <div id="search_reveal" style="display: none">
      <form action="/search" method="get">
        <input type="hidden" name="type" value="product">
        <input type="text" name="q" id="q" placeholder="{{ 'general.search.placeholder' | t }}"/>
        <input value="{{ 'general.search.submit' | t }}" name="submit" id="search_button" class="button" type="submit">
      </form>
  </div>
</header>
<div id="phantom"{% if section.settings.header_cover and template == 'index' %} class="ignore-this"{% endif %}></div>
<div class="clear"></div>
<style>
  {% if section.settings.logo != blank %}
    @media screen and ( min-width: 740px ) {
      #logo img { max-width: {{ section.settings.logo_max_width }}px; }
    }
  {% endif %}

  {% if section.settings.header_border %}
    .nav-container { border-bottom: 1px solid {{ settings.nav_border_color }}; }
  {% endif %}

  {% if section.settings.logo_align == 'center' %}
    #logo { text-align: center !important; }
    #logo a { float: none; }
  {% endif %}

  {% unless section.settings.logo_align == 'center' %}
    #logo { margin-right: 20px; }
  {% endunless  %}

  {% if section.settings.logo_align == 'left' and section.settings.nav_style == 'mobile' %}
    .shifter-handle { margin-left: 20px; }
  {% endif %}

  .topbar {
    font-size: {{ section.settings.announcement_text_size }}px;
    text-align: center !important;
  }
  .topbar,
  .topbar a {
    color: {{ settings.announcement_bar_text_color }};
  }
  .topbar ul#cart li a {
    font-size: {{ section.settings.announcement_text_size }}px;
  }
  .topbar select.currency-picker {
    font-size: {{ section.settings.announcement_text_size }}px;
  }
  .nav-container { grid-template-columns: repeat(12, 1fr); }

  {%- if logo_align_left and logo_position_inline -%}
    ul#main-nav { padding-left: 20px;}
  {% endif %}

  .nav-container ul#cart li a { padding: 0;}
  {%- if logo_position_above and logo_align_center -%}
    ul#main-nav li a,
    .nav-container ul#cart li {
      padding: 0 10px;
    }
  {%- endif -%}
  {% if logo_position_above and logo_align_center and cart_position_header %}
    ul#main-nav { text-align: left; }
  {% elsif logo_align_center and logo_position_inline %}
  	ul#main-nav { text-align: left; }
  {% else %}
    ul#main-nav {text-align: {{ section.settings.logo_align }}; }
  {% endif %}

  @media screen and (max-width: 980px) {
    div#logo {
      grid-column: auto / span 1;
    }
  }

  .topbar p { font-size: {{ section.settings.announcement_text_size }}px; }

  body.index .scrollheader .nav-container .shifter-handle,
  body.index .scrollheader ul#main-nav li a,
  body.index .scrollheader .nav-container ul#cart li a,
  body.index .scrollheader .nav-container ul#cart li select.currency-picker {
  color: {{ settings.homepage_pre_scroll_color }};
  }

  body.index .scrollheader {
    background: {{ settings.homepage_pre_scroll_background }};
  }

  body.index .coverheader .nav-container .shifter-handle,
  body.index .coverheader ul#main-nav li a,
  body.index .coverheader .nav-container ul#cart li a,
  body.index .coverheader .nav-container ul#cart li select.currency-picker {
  color: {{ settings.homepage_scroll_color }};
  }

  body.index .coverheader {
  background: {{ settings.homepage_scroll_background }};
  }

  {% if section.settings.logo_alt !=  blank %}
    .scrollheader .second_logo { display: none; }
    .coverheader .first_logo { display: none; }
  {% endif %}

  {% if section.settings.header_cover and template == 'index' %}
    header.scrollheader {
      position: absolute;
      z-index: 20;
      width: 100%;
      top: 0;
    }
  {% endif %}
</style>

{% schema %}
  {
    "name": "Header",
    "settings": [
      {
        "type": "checkbox",
        "id": "full_width_header",
        "label": "Full width header"
      },
      {
        "type": "checkbox",
        "id": "enable_sticky_header",
        "label": "Enable sticky header",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "header_cover",
        "label": "Float header over slideshow"
      },
      {
        "type": "checkbox",
        "id": "header_border",
        "label": "Add bottom border"
      },
      {
        "type": "header",
        "content": "Announcement Bar"
      },
      {
        "type": "checkbox",
        "id": "show_announcement",
        "label": "Show announcement",
        "default": true
      },
      {
        "type": "richtext",
        "id": "announcement_text",
        "label": "Text",
        "default": "<p>Share a shop announcement or message</p>"
      },
      {
        "type": "range",
        "id": "announcement_text_size",
        "min": 12,
        "max": 24,
        "step": 1,
        "unit": "px",
        "label": "Text size",
        "default": 13
      },
      {
        "type": "link_list",
        "id": "top_nav",
        "label": "Add additional links with a menu"
      },
      {
        "type": "header",
        "content": "Cart Icon"
      },
      {
        "type": "select",
        "id": "cart_position",
        "label": "Cart icon position",
        "options": [
          {
            "value": "announcement-bar",
            "label": "Announcement Bar"
          },
          {
            "value": "header",
            "label": "Header"
          }
        ]
      },
      {
        "type": "header",
        "content": "Header Logo"
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo image"
      },
      {
        "type": "image_picker",
        "id": "logo_alt",
        "label": "Alternative logo image",
        "info": "You can switch to an alternative logo when scrolling."
      },
      {
        "type": "range",
        "id": "logo_max_width",
        "min": 100,
        "max": 250,
        "step": 5,
        "unit": "px",
        "label": "Custom logo width",
        "default": 200
      },
      {
        "type": "select",
        "id": "logo_position",
        "label": "Logo position",
        "options": [
          {
            "value": "above",
            "label": "Above navigation"
          },
          {
            "value": "inline",
            "label": "Inline with navigation"
          }
        ]
      },
        {
        "type": "select",
        "id": "logo_align",
        "label": "Logo alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ]
      },
      {
        "type": "header",
        "content": "Navigation"
      },
      {
        "type": "link_list",
        "id": "main_nav",
        "label": "Choose navigation menu",
        "default":"main-menu"
      },
      {
        "type": "checkbox",
        "id": "product_menu",
        "label": "Show products in drop downs",
        "info": "When your main nav item links to a collection, products from that are shown in any drop down menus"
      }
    ],
    "blocks": [
    {
      "type": "submenu_with_image",
      "name": "Submenu with image",
      "settings": [
        {
          "type":"text",
          "id":"menu_item",
          "label":"Menu item",
          "info":"Enter menu item to add image to submenu (case-sensitive)"
        },
        {
         "type": "image_picker",
         "id": "nav_image",
         "label": "Image"
        },
        {
          "type": "select",
          "id": "nav_image_position",
          "label": "Image position",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ]
        },
        {
         "type": "url",
         "id": "link",
         "label": "Link"
        }
      ]
    },
      {
        "type": "mega_menu",
        "name": "Mega menu",
        "settings": [
          {
            "type":"text",
            "id":"menu_item",
            "label":"Menu item",
            "info":"Enter menu item to apply a mega menu"
          },
          {
            "type": "image_picker",
            "id": "nav_image",
            "label": "Featured image"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Slide link"
          }
        ]
      }
    ]
  }
{% endschema %}

and here is the theme.js.liquid

theme.Header = (function() {
  function Header(container) {

   (function searchPopup() {
     $('a#search_trigger').click(function(event){
         event.stopPropagation();
          $("#search_reveal").slideToggle("500");
          return false;
     });
     $("#search_reveal").on("click", function (event) {
         event.stopPropagation();
     });
     $(document).on("click", function () {
       $("#search_reveal").slideUp('500');
     });
   })();

   (function menuEdge() {
     /* Ensure that sub nav menus open to the left if any chance of offscreen overflow */
     $("ul.submenu li").on('mouseenter mouseleave', function (e) {
       if ($('ul', this).length) {
         var elm = $('ul:first', this);
         var off = elm.offset();
         var l = off.left;
         var w = elm.width();
         var docH = $("#PageContainer").height();
         var docW = $("#PageContainer").width();

         var isEntirelyVisible = (l + w <= docW);

         if (!isEntirelyVisible) {
             $(this).addClass('edge');
         } else {
             $(this).removeClass('edge');
         }
       }
     });
   })();

   (function enableStickyHeader() {
     var Heightcalculate = $('header').height();
     var stickyHeader = document.querySelector('header').dataset.sticky;
     var scrollHeader = $("header.scrollheader");

     $(window).scroll(function() {
       var scroll = $(window).scrollTop();
       if (scroll >= 1 && stickyHeader == 'true') {
         scrollHeader.removeClass('scrollheader').addClass("coverheader");
         $('#phantom').show();
         $('#phantom').css('height', Heightcalculate+'px');
       } else {
         scrollHeader.removeClass("coverheader").addClass('scrollheader');
         $('#phantom').hide();
       }
     });
   })();

    $(".has_sub_menu").hover(function(){
      $(this).attr('aria-expanded', function(index, attr){
        return attr == 'false' ? true : 'false';
      });
    });

    jQuery(window).trigger('resize').trigger('scroll');

    $("nav.header-navigation ").doubleTapToGo();

    $(document).ready( function() {
      $('.shopify-currency-form select').on('change', function() {
        $(this)
          .parents('form')
          .submit();
      });
    });
  }
  Header.prototype = _.assignIn({}, Header.prototype, {});

  return Header;
})();

 

 

0 Likes
ChelsieAnnMarie
New Member
4 0 0

needing help with my sticky header for on desktop screens.

 

i only want to show the main navigation menu when scrolling. 

 

I'm currently using the icon theme

 

can someone please help me.

 

my shop url is 

slimes-by-chelsie.myshopify.com

0 Likes
amandaj
Tourist
37 0 1

Hello Chelsie,

 

I can help. Please get in touch with me over email amanda@cisinlabs.com to discuss this further in detail. Or skype me: live:amanda_17153

Thanks,
Amanda

0 Likes

Hello @ChelsieAnnMarie 

 

Went through your requirement and would like to assist you for the same. Please drop me email at - ecommercewebguru@gmail.com  so that we can discuss this further.

 

Thanks 

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

Dear ChelsieAnnMarie,

 

Can you please share your details here: https://www.task4store.com/pages/contact-us

 

Thanks & Regards

MS Web Designer

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes