CMS Developers

{{ require_css("//cdn2.hubspot.net/hubfs/346178/designmodo/ui-kit/ui-kit-header/css/ui-kit-styles.css") }}
<!-- header-3 -->
{% if module.enable_menu %}
<header class="header-3 header-3-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 pull-right 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 %}
          <form class="navbar-form pull-left">
            {% if module.header.choose_cta_button %}
              <div class="btn-cta">{% cta guid="{{ module.header.cta_button }}" %}</div>
            {% else %}
              {% set styles = 'background-color: {{ module.header.button.button_color.color }}; color: #ffffff;' %}
              {% set link = page_by_id(module.header.button.link).absolute_url %}

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

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

              {% if link %}
              <a class="btn btn-primary js-btn-color" href="{{ link }}" style="{{ styles }}" 
                 data-btn-type="{{ module.header.button.button_type }}" 
                 data-btn-color="{{ module.header.button.button_color.color }}" 
                 data-btn-hover-color="{{ module.header.button.button_hover_color.color }}">
                {{ module.header.button.button_text }}
              </a>
              {% endif %}
            {% endif %}
          </form>
        </div>
      </nav>
    </div>
  </div>
  <div class="header-background"></div>
</header>
{% else %}
<header class="header-3 header-3-v2" style="display: none;"></header>
{% endif %}

<section class="header-3-sub header-3-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-6">
                {{ module.text }}
            </div>
        </div>
    </div>
</section>


          
        

          
            jQuery(document).ready(function($) {
    $(".header-3-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 > .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";
        });
      
      	o.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");
    });
});