Default Headers in builder

Support
#1

Is there a file I can import into the header builder that mimics the default settings of the Renew header (Actually all stacks)? If there is no file is there a walkthough on how to recreate it?

#2

Hey,

You can learn how to recreate it here: https://theme.co/apex/forum/t/pro-header-and-footer-builder-introduction/103

#3

Thanks for the reply, so no there is no file. I was able to recreate it based off the link you supplied.

I am using particles for the new header that show a line above the link as you interact with it. The home page is a single page with one external link to another page (Events).

The old navigation would highlight what section it is on in the nav depending on the anchor tag on the page. Is there a setting for this in the builder? or can you point me to the correct JS that I need to implement this?

Website:
http://hillschurcharcadia.org

Also I am already using this JS code on the page to help with offset of the sticky header:

jQuery(document).ready(function($) {
$('a[href*="#"]').off('touchstart click');
 var $body                = $('body');
 var bodyHeight           = $body.outerHeight();
 var adminbarHeight       = $('#wpadminbar').outerHeight();
 var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight() + 112;
 var locHref              = location.href;
 var locHashIndex         = locHref.indexOf('#');
 var locHash              = locHref.substr(locHashIndex);

//
// Calculate the offset height for various elements and remove it from
// the element's top offset so that fixed elements don't cover it up.
//

function animateOffset( element, ms, easing ) {
$('html, body').animate({
   scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
 }, ms, easing);
}

//
// Page load offset (if necessary).
//

$(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
  animateOffset(locHash, 1, 'linear');
 }
});

  //
  // Scroll trigger.
  //

$('a[href*="#"]').on('touchstart click', function(e) {
 href        = $(this).attr('href');
 notComments = href.indexOf('#comments') === -1;
 if ( href !== '#' && notComments ) {
  var theId = href.split('#').pop();
  var $el   = $('#' + theId);
  if ( $el.length > 0 ) {
   e.preventDefault();
   animateOffset($el, 850, 'easeInOutExpo');
   }
 }
});

//
// Initialize scrollspy.
//

if ( $body.hasClass('x-one-page-navigation-active') ) {

$body.scrollspy({
   target : '.x-nav-wrap.desktop',
   offset : adminbarHeight + navbarFixedTopHeight
  });
 }
});
#4

Hi There,

Unfortunely One page navigation is not integrated with the header builder yet.

You can still use legacy header if you would like to use this functionality, go to Theme Options > header > select legacy header.

Hope it helps!

#5

No that reply doesn’t really help, because I need to use the builder to have the two different menus (one for the home page and one for every other page).

Are you telling me that there currently is no way to have the links in the nav bar show their hover state when they are at a specific anchor tag on a page?

#6

Hello There,

Thanks for updating in!

Are you telling me that there currently is no way to have the links in the nav bar show their hover state when they are at a specific anchor tag on a page?

  • This only applies to one page navigation menu. At the moment, this is not supported in the header builder. When you have set up a menu to act as one page navigation, it partially work linking to the section but the menu link items will not have a hover or active state just like what we have in the default header and one page navigation. This is already in our queue list of enhancements. Our developers are already working on this one. It might be integrated in the next update release.

I need to use the builder to have the two different menus (one for the home page and one for every other page).

  • You can always have two or more different menus on different pages when using the default header. For example, you can have a one page navigation in your homepage, a custom menu for the portfolio page and the default menu for the rest of the pages in your site. All you need to do is to create three menus. One menu will be used exclusively for one page navigation. Simply edit the home page and find the “Page Settings metabox”. You can assign the one page navigation menu in the page settings or when using Cornerstone, you may go to Settings tab > X Settings and find the one page navigation options. The second menu will be used just for the portfolio and we will assign this menu in the portfolio page just like how we assign the one page navigation menu. Even if this menu does not have #element-ID in the links, it will be a good option of using the feature to have a different set of menu item for the portfolio page. The last menu will then be assign as your primary menu which will be used for all the pages in your site. All the menus will be created in Appearance > menus.

Hope this helps.