HubSpot CMS

SUF Header 2

This is one of the free modules that you can use among other Startup-Framework ( SUF ) modules. The framework allows marketers, designers and developers to create HubSpot pages and websites quickly and easily.

Created by: il-hubspot

Tags:

Unverified
?

After receiving a minimum of 25 recommendations, an entry earns the "Community Approved" badge.

Please keep in mind, all entries are community created and may not be fully supported by HubSpot.

1 Recommendation

View on:

GitHub

HubSpot Marketplace

HTML + HUBL

{{ require_css("http://cdn2.hubspot.net/hubfs/346178/designmodo/flat-ui/bootstrap/css/bootstrap.css") }}
{{ require_css("//cdn2.hubspot.net/hubfs/346178/designmodo/ui-kit/ui-kit-header/css/ui-kit-styles.css") }}
<div class="page-wrapper">
  <!-- header-2 -->
  {% if module.enable_menu %}
  <header class="header-2 header-2-v2">
    <div class="container">
      <div class="row">
        <nav class="navbar col-sm-12" role="navigation">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle">
              <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
            {% set link = page_by_id(module.header.company_link).absolute_url %}

            {% if module.header.use_custom_link %}
            {% set link = module.header.company_custom_link %}
            {% endif %}

            <a class="brand" href="{{ link }}" style="color: {{ module.header.company_name_color.color }};">
              {% if module.header.company_logo.src %}
              <img src="{{ module.header.company_logo.src }}" alt="{{ module.header.company_logo.alt }}" width="{{ module.header.company_logo.width }}" height="{{ module.header.company_logo.height }}">
              {% endif %}
              {{ module.header.company_name }}
            </a>
          </div>
          <div class="collapse navbar-collapse js-nav-styles" 
               data-nav-parent-color="{{ module.header.parent_menu_text_color.color }}"
               data-nav-parent-hover-color="{{ module.header.parent_menu_text_hover_color.color }}"
               data-nav-child-color="{{ module.header.child_menu_text_color.color }}" 
               data-nav-child-hover-color="{{ module.header.child_menu_text_hover_color.color }}" 
               data-nav-child-bg="{{ module.header.child_menu_background_color.color }}">
            {% menu id="{{ module.header.menu_field }}" overrideable=False %}
          </div>
        </nav>
      </div>
    </div>
  </header>
  {% else %}
  <header class="header-2 header-2-v2" style="display: none;"></header>
  {% endif %}


  <section class="header-2-sub header-2-sub-v2 {% if module.enable_menu %}has-menu{% endif %}" style="background-color: {{ module.background_color }};">
    <div class="background" style="background-image: url('{{ module.background_image.src }}'); opacity: {{ module.background_opacity }};">&nbsp;</div>
    <div class="container">
      <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
          <div class="hero-unit">
            {{ module.text }}
          </div>
          <div class="btns">
            {% for item in module.buttons %}
            {% if item.choose_cta_button %}
            <div class="btn-cta">{% cta guid="{{ item.cta_button }}" %}</div>
            {% else %}
            {% set styles = 'background-color: {{ item.button.button_color.color }}; color: #ffffff;' %}
            {% set link = page_by_id(item.button.link).absolute_url %}

            {% if item.button.use_custom_link %}
            {% set link = item.button.custom_link %}
            {% endif %}

            {% if item.button.button_type == 'clear' %}
            {% set styles = 'background-color: transparent; border: 2px solid {{ item.button.button_color.color }}; color: {{ item.button.button_color.color }};' %}
            {% endif %}

            <a class="btn btn-large js-btn-color" href="{{ link }}" style="{{ styles }}" data-btn-type="{{ item.button.button_type }}" data-btn-color="{{ item.button.button_color.color }}" data-btn-hover-color="{{ item.button.button_hover_color.color }}">{{ item.button.button_text }}</a>
            {% endif %}

            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
          
        
CSS
          
            .body-container.container-fluid{
  padding: 0;
}

/*--- HEADERS ---*/
/* Default Styles */

.row-fluid [class*="span"].dm-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 51;
  background-color: #ffffff;
  padding: 15px;
  min-height: 70px;
  -webkit-box-shadow: 0px 1px 13px 0px rgba(0,0,0,0.09);
  -moz-box-shadow: 0px 1px 13px 0px rgba(0,0,0,0.09);
  box-shadow: 0px 1px 13px 0px rgba(0,0,0,0.09);
}

.row-fluid [class*="span"].dm-company-name {
  font-size: 20px;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

.row-fluid [class*="span"].dm-company-name a {
  color: #7f8c8d;
}

.row-fluid [class*="span"].dm-navigation .hs-menu-wrapper.hs-menu-flow-horizontal{
  text-align: right;
}

.row-fluid [class*="span"].dm-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul > li.hs-menu-depth-1 {
  display: inline-block;
}

.row-fluid [class*="span"].dm-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul > li.hs-menu-depth-1 a {
  font-size: 16px;
  padding: 10px 15px;
}

.burger-nav {
  display: none;
}

@media (max-width: 767px) {    
  .row-fluid [class*="span"].dm-navigation {
    position: fixed;
    width: 280px;
    height: 100%;
    background-color: #ffffff;
    top: 0;
    right: -280px;
    padding: 70px 0 15px;
    -webkit-transition: right 0.4s ease;
    -moz-transition: right 0.4s ease;
    -o-transition: right 0.4s ease;
    transition: right 0.4s ease;
  }

  .row-fluid [class*="span"].dm-navigation.open {
    right: 0;
  }

  .row-fluid [class*="span"].dm-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul > li.hs-menu-depth-1 {
    display: block;
    text-align: right;
    border-bottom: 1px solid #363940;
    margin: 0 15px;
  }

  .row-fluid [class*="span"].dm-navigation .hs-menu-wrapper.hs-menu-flow-horizontal > ul > li.hs-menu-depth-1 a {
    padding: 15px 0;
  }

  .burger-nav {
    position: absolute;
    z-index: 2;
    top: 22px;
    right: 15px;
    display: block;
  }
  body .header-10 .row-fluid .widget-type-linked_image {
    margin-top: 13px;
    float: left;
  }

  .header-10 {
    z-index: 100;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    height: 74px;
    color: white;
  }

  .burger-nav .burger-line {
    display: block;
    background-color: #363940;
    width: 28px;
    height: 5px;
    margin: 4px 0;
    position: relative;
    top: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0);
  }

  .burger-nav.open .burger-line:first-child {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 9px;
  }

  .burger-nav.open .burger-line:nth-child(2) {
    opacity: 0;
  }

  .burger-nav.open .burger-line:last-child {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: -9px;
  }
}


.hs-menu-wrapper.hs-menu-flow-horizontal > ul li a {
  display: block;
  padding: initial;
  white-space: initial;
  max-width: initial;
  overflow: initial;
  text-overflow: initial;
  text-decoration: initial;
}


.hs-menu-wrapper > ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

.hs-menu-wrapper > ul > li {
  position: relative;
  display: block;
}

.hs-menu-wrapper > ul > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}

.hs-menu-wrapper > ul > li > a:hover, .hs-menu-wrapper > ul > li > a:focus {
  background: none;
  text-decoration: none;
}

@media (max-width: 568px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1 {
    width: auto;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1 {
    float: none;
  }
}



/* Burger */

.navbar-toggle .icon-bar {
  display: block;
  margin: 0 auto;
  background-color: #ffffff;
}


/* Mobile Nav */

body > .navbar-collapse .hs-menu-wrapper > ul > li {
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
  border-bottom: 1px solid #444444;
}

body > .navbar-collapse .hs-menu-wrapper > ul > li a {
  display: block;
  padding: 12px 35px;
  border-bottom: 2px solid #24292d;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 1px;
  color: #ffffff;
  text-transform: uppercase;
}

body > .navbar-collapse .hs-menu-wrapper > ul > li > .hs-menu-children-wrapper {
  list-style-type: none;
  padding-left: 0;
}

body > .navbar-collapse .hs-menu-wrapper > ul > li > .hs-menu-children-wrapper li a {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 11px;
  color: #d0cdcd;
}

body > .navbar-collapse .navbar-form .btn {
  height: auto;
  line-height: 22px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 26px;
  padding-right: 26px;
}



/* Header 2 V2 */

.header-2-sub-v2 .btns .btn, .header-2-sub-v2 .btns .btn-cta {
  margin-top: 5px;
  margin-bottom: 5px;
}

.header-2-sub-v2 .btns .btn-cta {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

.header-2-v2 .navbar .brand img:first-child {
  width: auto;
}

.header-2-v2 .navbar ul {
  float: right;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none
}

.header-2-v2 .navbar ul > li {
  position: relative;
  display: block;
  float: left;
  margin-left: 20px;
}

.header-2-v2 .navbar ul > li:first-child {
  margin-left: 0;
}

.header-2-v2 .navbar ul > li > a {
  padding: 32px 0 10px;
  font-size: 17px;
  font-weight: normal;
  font-weight: 500;
  letter-spacing: 1px;
  color: #ffffff;
  max-width: none;
}

.header-2-v2 .navbar ul > li > .hs-menu-children-wrapper {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .4s;
  -moz-transition: opacity .4s;
  -o-transition: opacity .4s;
  transition: opacity .4s;
  background-color: #ffffff;
  padding: 20px;
  position: absolute;
  width: 200px;
  float: none;
  text-align: center;
  top: 100%;
  left: -9999px;
  right: -9999px;
  margin: 0 auto;
}

.header-2-v2 .navbar ul > li:hover > .hs-menu-children-wrapper {
  opacity: 1;
  visibility: visible;
}

.header-2-v2 .navbar ul > li > .hs-menu-children-wrapper li {
  display: block;
  float: none;
  margin-top: 15px;
  margin-left: 0;
}

.header-2-v2 .navbar ul > li > .hs-menu-children-wrapper li:first-child {
  margin-top: 0;
}

.header-2-v2 .navbar ul > li > .hs-menu-children-wrapper li a {
  padding-top: 0;
  padding-bottom: 0;
  color: #2c3e50;
}

.header-2-sub-v2 {
  background-color: transparent;
}

.header-2-sub-v2.has-menu {
  padding-top: 215px;
  padding-bottom: 115px;
}

@media (max-width: 991px) {
  .header-2-sub-v2.has-menu {
    padding-top: 165px;
  }
}

/* Header 2 V2 - Navigation Standalone */

.header-2-v2.standalone .navbar {
  position: static;
  margin-bottom: 0;
}

          
        
JS
          
            jQuery(document).ready(function($) {
    $(".header-2-sub-v2").each(function() {
        var o = $(this);
        if (o.hasClass("init")) {
            return;
        }
        o.addClass("init");

      	var style = "";

        $(this).find(".js-btn-color").each(function(){
            var btnType = $(this).data('btn-type');
            var btnColor = $(this).data('btn-color');
            var btnHoverColor = $(this).data('btn-hover-color');
            
            var btnId = "id-" + Math.random().toString().slice(2);
            $(this).attr("id", btnId);

            $(this).removeAttr('style');

             if(btnType === 'normal') {
                style += "#" + btnId + ".btn { background-color: " + btnColor + "; color: #ffffff; } \n";
                style += "#" + btnId + ".btn:hover, #" + btnId + ".btn:focus, #" + btnId + ".btn:active { background-color: " + btnHoverColor + "; } \n";
            }

            if(btnType === 'clear') {
                style += "#" + btnId + ".btn { background-color: transparent; border: 2px solid " + btnColor + "; color: " + btnColor + "; } \n";
                style += "#" + btnId + ".btn:hover, #" + btnId + ".btn:focus, #" + btnId + ".btn:active { background-color: " + btnColor + "; color: #ffffff; } \n";
            }
        });

        $("<style type='text/css'/>").html(style).appendTo("head");
    });
});

jQuery(document).ready(function($) {
    $(".header-2-v2").each(function() {
        var o = $(this);
        
        if (o.hasClass("init")) {
            return;
        }

        o.addClass("init");

        var headerId = "id-" + Math.random().toString().slice(2);
        o.attr("id", headerId);
      
        var style = "";

        o.find(".js-nav-styles").each(function(){
            var parentMenuColor = $( this ).data( 'nav-parent-color' );
            var parentMenuHoverColor = $( this ).data( 'nav-parent-hover-color' );
            var childMenuColor = $( this ).data( 'nav-child-color' );
            var childMenuHoverColor = $( this ).data( 'nav-child-hover-color' );
            var childMenuBgColor = $( this ).data( 'nav-child-bg' );
            
            var navId = "id-" + Math.random().toString().slice(2);
            $(this).attr("id", navId);

            style += "#" + navId + " ul > li > a { color: " + parentMenuColor + "; } \n";
          	style += "#" + navId + " ul > li > a:hover, #" + navId + " ul > li > a:focus, #" + navId + " ul > li > a:active { color: " + parentMenuHoverColor + "; } \n";
          	style += "#" + navId + " ul > li.active > a { color: " + parentMenuHoverColor + "; } \n";
            style += "#" + navId + " ul > li > .hs-menu-children-wrapper li a { color: " + childMenuColor + "; } \n";
          	style += "#" + navId + " ul > li > .hs-menu-children-wrapper li a:hover, #" + navId + " ul > li > .hs-menu-children-wrapper li a:focus, #" + navId + " ul > li > .hs-menu-children-wrapper li a:active { color: " + childMenuHoverColor + "; } \n";
            style += "#" + navId + " ul > li > .hs-menu-children-wrapper { background-color: " + childMenuBgColor + "; } \n";
            style += "#" + headerId + " .navbar-toggle .icon-bar { background-color: " + parentMenuColor + "; } \n";
        });

        $("<style type='text/css'/>").html(style).appendTo("head");
    });
});




/**
 * JavaScript code for all ui-kit components.
 * Use namespaces.
 */

window.isRetina = (function() {
    var root = ( typeof exports == 'undefined' ? window : exports);
    var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),(min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-resolution: 1.5dppx)";
    if (root.devicePixelRatio > 1)
        return true;
    if (root.matchMedia && root.matchMedia(mediaQuery).matches)
        return true;
    return false;
})();
//nextOrFirst? prevOrLast?
jQuery.fn.nextOrFirst = function(selector) { var next = this.next(selector); return (next.length) ? next : this.prevAll(selector).last(); }
jQuery.fn.prevOrLast = function(selector){ var prev = this.prev(selector); return (prev.length) ? prev : this.nextAll(selector).last(); }

//preload images
$.fn.preload=function(){this.each(function(){$("<img/>")[0].src=this})}

window.startupKit = window.startupKit || {};

startupKit.hideCollapseMenu = function() {
    $('body > .navbar-collapse').css({
        'z-index': 1
    });
    $('html').removeClass('nav-visible');
    setTimeout(function() {
        $('body > .navbar-collapse').addClass('collapse');
        $('body > .colapsed-menu').removeClass('show-menu');
    }, 400)
}

$(function () {
    $('.page-wrapper, .navbar-fixed-top, .navbar-collapse a, .navbar-collapse button, .navbar-collapse input[type=submit]').on('click', function(e) {
        if($('html').hasClass('nav-visible')) {
            setTimeout(function(){
                startupKit.hideCollapseMenu();
            }, 200)
        }
    });
    $(window).resize(function() {
        if($(window).width() > 965) {
            startupKit.hideCollapseMenu();
        }
    });

    var menuCollapse = $('#header-dockbar > .colapsed-menu').clone(true);
    $('body').append(menuCollapse);

    $('#open-close-menu').on('click', function () {
        if($('html').hasClass('nav-visible')) {
            startupKit.hideCollapseMenu();
        } else {
            $('body > .colapsed-menu').addClass('show-menu');
            if($('#header-dockbar').length) {
                 $('body > .colapsed-menu').css({
                    top: $('#header-dockbar').height()
                });
            }
            setTimeout(function() {
                $('html').addClass('nav-visible');
            }, 1)
        }
    });
    if($('.social-btn-facebook').length){
        $('.social-btn-facebook').sharrre({
            share: {
                facebook: true
            },
            enableHover: false,
            enableCounter: false,
            click: function(api, options){
                api.simulateClick();
                api.openPopup('facebook');
            }
        });
    }

    if($('.social-btn-twitter').length){
        $('.social-btn-twitter').sharrre({
            share: {
                twitter: true
            },
            enableHover: false,
            enableCounter: false,
            buttons: {
                twitter: {
                    via: 'Designmodo',
                    url: false
                }
            },
            click: function(api, options){
                api.simulateClick();
                api.openPopup('twitter');
            }
        });
    }
});

/**
 *  Headers 
 * */
startupKit.uiKitHeader = startupKit.uiKitHeader || {};

startupKit.uiKitHeader._inFixedMode = function(headerClass) {
    var navCollapse = $(headerClass + ' .navbar-collapse').first().clone(true);
    navCollapse.attr('id', headerClass.substr(1));
    $('body').append(navCollapse);

    var fixedNavbar = $('.navbar-fixed-top');
        fixedNavbarHeader = fixedNavbar.closest('header');
        fixedNavbarHeaderClone = fixedNavbarHeader.clone(true);

    if(fixedNavbarHeader.hasClass('fake-header')) {
        var fakeHeader = $('<div class="fake-wrapper-header" style="width: 100%; height: ' + fixedNavbarHeader.outerHeight() + 'px;" />');
    }
    $('body').prepend(fakeHeader);
    $('body').prepend(fixedNavbarHeaderClone);
    fixedNavbarHeader.detach();

    $(headerClass + ' .navbar-toggle').on('click', function() {
        var $this = $(this);
        if($('html').hasClass('nav-visible')) {
            startupKit.hideCollapseMenu();
        } else {
            $('.navbar-collapse#' + headerClass.substr(1)).removeClass('collapse');
            if($('#header-dockbar').length) {
                $('.navbar-collapse#' + headerClass.substr(1)).css({
                    top: $('#header-dockbar').height()
                });
            }
            setTimeout(function() {
                $('html').addClass('nav-visible');
            }, 1)
            setTimeout(function() {
                $('body > .navbar-collapse').css({
                    'z-index': 101
                });
            }, 400)
        }
    });

    if ($(headerClass + ' .navbar').hasClass('navbar-fixed-top')) {
        var s1 = $(headerClass + '-sub'),
            s1StopScroll = s1.outerHeight() - 70,
            antiflickerStopScroll = 70;

        if($(headerClass).outerHeight()>0){
            var antiflickerColor = $(headerClass).css('background-color');
        }else if($(headerClass+'-sub').length > 0){
            var antiflickerColor = $(headerClass+'-sub').css('background-color');
        }else{
            var antiflickerColor='#fff';
        }

        var antiflicker = $('<div class="' + headerClass.slice(1) + '-startup-antiflicker header-antiflicker" style="opacity: 0.0001; position: fixed; z-index: 2; left: 0; top: 0; width: 100%; height: 70px; background-color: '+antiflickerColor+';" />');
        $('body').append(antiflicker);
        var s1FadedEls = $('.background, .caption, .controls > *', s1),
            header = $(headerClass);

        s1FadedEls.each(function() {
            $(this).data('origOpacity', $(this).css('opacity'));
        });

        var headerAniStartPos = s1.outerHeight() - 120, headerAniStopPos = s1StopScroll;

        $(window).scroll(function() {
            var opacity = (s1StopScroll - $(window).scrollTop()) / s1StopScroll;
            opacity = Math.max(0, opacity);

            if ($(window).scrollTop() > s1StopScroll - antiflickerStopScroll) {
                var opacityAntiflicker = (s1StopScroll - $(window).scrollTop()) / antiflickerStopScroll;
                opacityAntiflicker = Math.max(0, opacityAntiflicker);
            } else {
                opacityAntiflicker = 1
            }
            // 0..1

            s1FadedEls.each(function() {
                $(this).css('opacity', $(this).data('origOpacity') * opacity);
            });

            antiflicker.css({
                'background-color': $('.pt-page-current', s1).css('background-color'),
                'opacity': 1.0001 - opacityAntiflicker
            });
            
            var headerZoom = -(headerAniStartPos - $(window).scrollTop()) / (headerAniStopPos - headerAniStartPos);
            headerZoom = 1 - Math.min(1, Math.max(0, headerZoom));
            
            $(window).resize(function(){
               _navbarResize();
            });
            var _navbarResize = function(){
                if($(window).width()<767){
                    $('.navbar', header).css({
                        'top' : -6 + ((20 + 6) * headerZoom)
                    });
                } else if($(window).width()<480){
                    $('.navbar', header).css({
                        'top' : -6 + ((20 + 6) * headerZoom)
                    });
                } else{
                    $('.navbar', header).css({
                        'top' : -6 + ((45 + 6) * headerZoom)
                    });
                }
            };
            
            _navbarResize();
            
            $('.navbar .brand', header).css({
                'font-size' : 18 + ((25 - 18) * headerZoom),
                'padding-top' : 30 + ((23 - 30) * headerZoom)
            });
            $('.navbar .brand img', header).css({
                'width' : 'auto',
                'height' : 25 + ((50 - 25) * headerZoom),
                'margin-top' : -1 + ((-10 + 1) * headerZoom)
            });
            $('.navbar .btn-navbar', header).css({
                'margin-top' : 30 + ((28 - 30) * headerZoom)
            });

            if ($(window).width() > 979) {
                $(headerClass + '.navbar .nav > li > a', header).css({
                    'font-size' : 12 + ((14 - 12) * headerZoom)
                });
            } else {
                $(headerClass + '.navbar .nav > li > a', header).css({
                    'font-size' : ''
                });
            }

        });
    };
};

/* Header 2*/
startupKit.uiKitHeader.header2 = function() {
    startupKit.uiKitHeader._inFixedMode('.header-2');
};


/** 
 * Global part of startup-kit
 * */
(function($) {
    (function() {
        /* implementing headers */
        for (header in startupKit.uiKitHeader) {
            headerNumber = header.slice(6);
            if (jQuery('.header-' + headerNumber).length != 0) {
                startupKit.uiKitHeader[header]();
            };
        }

        /* implementing contents */
        for (content in startupKit.uiKitContent) {
            contentNumber = content.slice(7);
            if (jQuery('.content-' + contentNumber).length != 0) {
                startupKit.uiKitContent[content]();
            };
        }
        
        /* implementing blogs */
        for (blog in startupKit.uiKitBlog) {
            blogNumber = blog.slice(4);
            if (jQuery('.blog-' + blogNumber).length != 0) {
                startupKit.uiKitBlog[blog]();
            };
        }
        
        /* implementing projects */
        for (project in startupKit.uiKitProjects) {
            projectNumber = project.slice(7);
            if (jQuery('.projects-' + projectNumber).length != 0) {
                startupKit.uiKitProjects[project]();
            };
        }

      
        /* function on load */
        $(window).on("load", function() {
            $('html').addClass('loaded');
            $(window).resize();
        });
        setTimeout(function() {
            $(window).resize();
        }, 10);

        /* ie fix images */
        if (/msie/i.test(navigator.userAgent)) {
            $('img').each(function() {
                $(this).css({
                    width : $(this).attr('width') + 'px',
                    height : 'auto'
                });
            });
        }

        // Focus state for append/prepend inputs
        $('.input-prepend, .input-append').on('focus', 'input', function() {
            $(this).closest('.control-group, form').addClass('focus');
        }).on('blur', 'input', function() {
            $(this).closest('.control-group, form').removeClass('focus');
        });

        // replace project img to background-image
        $('.project .photo img').each(function() {
            $(this).hide().parent().css('background-image', 'url("' + this.src + '")');
        });

        // Tiles
        var tiles = $('.tiles');

        // Tiles phone mode
        $(window).resize(function() {
            if ($(this).width() < 768) {
                if (!tiles.hasClass('phone-mode')) {
                    $('td[class*="tile-"]', tiles).each(function() {
                        $('<div />').addClass(this.className).append($(this).contents()).appendTo(tiles);
                    });

                    tiles.addClass('phone-mode');
                }
            } else {
                if (tiles.hasClass('phone-mode')) {
                    $('> [class*="tile-"]', tiles).each(function(idx) {
                        $('td[class*="tile-"]', tiles).eq(idx).append($(this).contents());
                        $(this).remove();
                    });

                    tiles.removeClass('phone-mode');
                }
            }
        });

        tiles.on('mouseenter', '[class*="tile-"]', function() {
            $(this).removeClass('faded').closest('.tiles').find('[class*="tile-"]').not(this).addClass('faded');
        }).on('mouseleave', '[class*="tile-"]', function() {
            $(this).closest('.tiles').find('[class*="tile-"]').removeClass('faded');
        });
        
        
    })();
    //add some smooth for scroll


})(jQuery);
//swipe
(function($){$.fn.touchwipe=function(settings){var config={min_move_x:20,min_move_y:20,wipeLeft:function(){},wipeRight:function(){},wipeUp:function(){},wipeDown:function(){},preventDefaultEvents:true};if(settings)$.extend(config,settings);this.each(function(){var startX;var startY;var isMoving=false;function cancelTouch(){this.removeEventListener('touchmove',onTouchMove);startX=null;isMoving=false}function onTouchMove(e){if(config.preventDefaultEvents){e.preventDefault()}if(isMoving){var x=e.touches[0].pageX;var y=e.touches[0].pageY;var dx=startX-x;var dy=startY-y;if(Math.abs(dx)>=config.min_move_x){cancelTouch();if(dx>0){config.wipeLeft();e.preventDefault()}else{config.wipeRight();e.preventDefault()}}else if(Math.abs(dy)>=config.min_move_y){cancelTouch();if(dy>0){config.wipeDown()}else{config.wipeUp()}}}}function onTouchStart(e){if(e.touches.length==1){startX=e.touches[0].pageX;startY=e.touches[0].pageY;isMoving=true;this.addEventListener('touchmove',onTouchMove,false)}}if('ontouchstart'in document.documentElement){this.addEventListener('touchstart',onTouchStart,false)}});return this}})(jQuery);

          
        
Have Questions?

Ask technical questions in Slack.

HubSpot Developer Slack

Not a member yet? - join here
READ ME (VIEW IN GITHUB)

# SUF Header 2 Module

This module can be used as a header or hero with its menu option. You need to create a module and edit it as decribed in https://knowledge.hubspot.com/articles/kcs_article/cos-general/create-and-edit-modules

A demo of this in action can be seen on : http://sqmedia-2660151.hs-sites.com/demo-suf-header-2-codegallery

This is just one of the modules presented within Startup Framework built by InboundLabs. More details can be found in https://w.inboundlabs.co/startup-framework

How to use this module

You need to copy the content of the .html, .css and .js files into the related parts of the custom module that you have created. Please open the repository and find the files there.


Have Questions?

If you have questions, please email me at github (at) inboundlabs.co


HubSpot

Not developing on HubSpot CMS yet?

We'd love to have you a part of our developer community!

 
1 Recommendation

Contribute to the Gallery!

We bet you’ve coded some amazing stuff. Showcase them and help the community grow.

Contribute

Other Open Source Projects

Browse all other open source projects

CrankShaft Framework

A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.

Lead developers: Jon McLaren

Developer Chrome Extension

Chrome/Chromium extension for HubSpot CMS Developers that adds a developer menu, dark theme and useful shortcuts to commonly used HubSpot query parameters, resources, and tools for making HubSpot Development easier and more enjoyable.

Lead developers: Jon McLaren , William Spiro , Gonzalo Torreras

VS Code HubL Language Extension

This extension enables super fast local development of CMS pages, and is a great compliment to using the new local HubL server. It contains comprehensive HubL tag, function, filter and expression test auto-complete snippets, as well as their documentation.

Lead developers: William Spiro

Not coding on HubSpot CMS yet?

We invite you to explore why thousands of developers LOVE coding with HubSpot!

Contribute
Made with  by community members: InboundLabs.co