We have our main menu underneath the header and wanted to know if it is possible to include the main menu as part of the sticky header ie
When you scroll a page, you get the bar appear at the top which shows the logo … How easy would it be to include the blue menu bar so that it is always visible at the top of the page when scrolling?
This is not this header default style (to have the menu sticky as well). So to change it you need to edit theme files. Please go to file js/main.js and find these lines:
/* ----------------------------- Sticky Nav ------------------------------ */
function codelessStickyNav(){
"use strict";
var opened = false;
var position = $('.header_wrapper').css('position');
var bool_test = false;
$('.logo_only_sticky .header_wrapper #logo').css('opacity', 0).css('visibility', 'hidden');
$(window).scroll(function(){
var top = $(this).scrollTop();
if(top > stickyNavTop + 300 && !opened){
$('body').addClass('sticky_header');
setTimeout(function(){
if($('.header_wrapper').hasClass('background--dark')){
$('.header_wrapper').removeClass('background--dark');
bool_test = true;
}
$('.header_wrapper').css('position', 'fixed').css('visibility', 'visible').addClass('open');
opened = true;
}, 200);
Replace with:
/* ----------------------------- Sticky Nav ------------------------------ */
function codelessStickyNav(){
"use strict";
var opened = false;
var position = $('.header_wrapper').css('position');
var bool_test = false;
$('.logo_only_sticky .header_wrapper #logo').css('opacity', 0).css('visibility', 'hidden');
$(window).scroll(function(){
var top = $(this).scrollTop();
if(top > stickyNavTop + 300 && !opened){
$('body').addClass('sticky_header');
setTimeout(function(){
if($('.header_wrapper').hasClass('background--dark')){
$('.header_wrapper').removeClass('background--dark');
bool_test = true;
}
$('.header_wrapper').css('position', 'fixed').css('visibility', 'visible').addClass('open');
$('.full_nav_menu').css('position', 'fixed').css('visibility', 'visible').addClass('open');
opened = true;
}, 200);
