Header Module 3, provides display for content in a header format.
Created by: il-hubspot
Tags: Menus and navigation, Header / Heros, Buttons, Galleries
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.
View on:
{{ 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 }};"> </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");
});
});
The Header module can be easily added to your existing HubSpot website and allows you create a centered header with text and custom colors
https://w.inboundlabs.co/header234demo
https://marketplace.hubspot.com/products/inboundlabs/startup-framework-marketplace
If you have questions, please email me at github (at) inboundlabs.co
We'd love to have you a part of our developer community!
A modern framework for accelerating build times on the HubSpot CMS. Based on a modified Bootstrap 4 framework.
Lead developers: Jon McLaren
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
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
Find an entry with an issue, bug, or abuse?
Please complete the below information in detail and we will investigate.
Reporting as Luke Summerfield