Cafe Pro | How to make mobile responsive 'secondary' menu the default?

[Skysage]

In Cafe Pro, the primary navigation starts out at the bottom of the front page and then moves to the top and changes to the responsive secondary menu when you scroll down.

I’d like to have this secondary responsive menu [with site title] as a default on all pages and make it so that it is always on top.

I found the .primary nav styles in the css. But setting position fixed doesn't achieve the desired result.

Based on similar queries I realize that the change must be made in the jquery files, but I'm not exactly sure what to change. Could someone provide a hint or advice on how to achieve the above?

Here are the relevant jquery files

Global.js

jQuery(function( $ ){

	$('.site-header').addClass('front-page-header');
	
	$('.footer-widgets').prop('id', 'footer-widgets');

	$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

	$(".responsive-menu-icon").click(function(){
		$(this).next(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
	});

	$(window).resize(function(){
		if(window.innerWidth > 800) {
			$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
			$(".responsive-menu > .menu-item").removeClass("menu-open");
		}
	});

	$(".responsive-menu > .menu-item").click(function(event){
		if (event.target !== this)
		return;
			$(this).find(".sub-menu:first").slideToggle(function() {
			$(this).parent().toggleClass("menu-open");
		});
	});
	
	// Local Scroll Speed
	$.localScroll({
		duration: 750
	});

	// Sticky Navigation
	var headerHeight = $('.site-header').innerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var abovenavHeight = headerHeight + beforeheaderHeight - 1;

	$(window).scroll(function(){

		if ($(document).scrollTop() > abovenavHeight){

			$('.nav-primary').addClass('fixed');

		} else {

			$('.nav-primary').removeClass('fixed');
			
		}
		
	});

});

Home.js

jQuery(function( $ ){
	
	// Header Height
	var navHeight = $('.nav-primary').outerHeight();
	var snavHeight = $('.nav-secondary').outerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var windowHeight = $(window).height();
	var newHeight = windowHeight - navHeight - snavHeight - beforeheaderHeight;
	
	$('.front-page-header') .css({'height': newHeight +'px'});
	$('.image-section') .css({'height': windowHeight +'px'});
		
	$(window).resize(function(){
	
	var navHeight = $('.nav-primary').outerHeight();
	var snavHeight = $('.nav-secondary').outerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var windowHeight = $(window).height();
	var newHeight = windowHeight - navHeight - snavHeight - beforeheaderHeight;
	
		$('.front-page-header') .css({'height': newHeight +'px'});
		$('.image-section') .css({'height': windowHeight +'px'});
	
	});
	
	// Sticky Navigation
	var headerHeight = $('.site-header').innerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var abovenavHeight = headerHeight + beforeheaderHeight - 1;

	$(window).scroll(function(){

		if ($(document).scrollTop() > abovenavHeight){

			$('.nav-primary').addClass('fixed');

		} else {

			$('.nav-primary').removeClass('fixed');
			
		}
		
	});

});

http://demo.studiopress.com/cafe/

http://demo.studiopress.com/cafe/

[Skysage]

I solved it.

Here's the code I changed:

Home.js

jQuery(function( $ ){
	
	// Header Height
	var navHeight = $('.nav-primary').outerHeight();
	var snavHeight = $('.nav-secondary').outerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var windowHeight = $(window).height();
	var newHeight = windowHeight - navHeight - snavHeight - beforeheaderHeight;
	
	$('.front-page-header') .css({'height': newHeight +'px'});
	$('.image-section') .css({'height': windowHeight +'px'});
		
	$(window).resize(function(){
	
	var navHeight = $('.nav-primary').outerHeight();
	var snavHeight = $('.nav-secondary').outerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var windowHeight = $(window).height();
	var newHeight = windowHeight - navHeight - snavHeight - beforeheaderHeight;
	
		$('.front-page-header') .css({'height': newHeight +'px'});
		$('.image-section') .css({'height': windowHeight +'px'});
	
	});
	
	// Sticky Navigation
	var headerHeight = $('.site-header').innerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var abovenavHeight = headerHeight + beforeheaderHeight - 1;

	if( $( document ).ready()){

			$('.nav-primary').addClass('fixed');

		} 
		
	});

Global.js

jQuery(function( $ ){

	$('.site-header').addClass('front-page-header');
	
	$('.footer-widgets').prop('id', 'footer-widgets');

	$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

	$(".responsive-menu-icon").click(function(){
		$(this).next(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu").slideToggle();
	});

	$(window).resize(function(){
		if(window.innerWidth > 800) {
			$(".nav-primary .genesis-nav-menu, .nav-secondary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
			$(".responsive-menu > .menu-item").removeClass("menu-open");
		}
	});

	$(".responsive-menu > .menu-item").click(function(event){
		if (event.target !== this)
		return;
			$(this).find(".sub-menu:first").slideToggle(function() {
			$(this).parent().toggleClass("menu-open");
		});
	});
	
	// Local Scroll Speed
	$.localScroll({
		duration: 750
	});

	// Sticky Navigation
	var headerHeight = $('.site-header').innerHeight();
	var beforeheaderHeight = $('.before-header').outerHeight();
	var abovenavHeight = headerHeight + beforeheaderHeight - 1;

	if( $( document ).ready()){

			$('.nav-primary').addClass('fixed');

		} 
		
	});

[Author]

Posts