Hi I have a different menu on various pages and the only way I’ve been able to do it is by using the One Page Navigation. However this causes the menu to scrolling with the page. I would like all of my menus to be fixed to the top.
Thanks for the help.
Hi @stefanguy,
Thank you for reaching out to us. Please check your header settings by navigating to X > Theme Options > Header > Navbar > Navbar Position and make sure it is set to Fixed Top (see screenshot)
If the settings are correct then this could be a caching issue as the content is being cached on your site so clear all caches including your browser’s cache and deactivate your caching plugin and optimization services.
If this doesn’t work then you can check for the following:
Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.
Test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
Remove custom CSS, JavaScript and deactivate your child theme and switch to parent theme (take a complete backup first).
If nothing works then you can fix it by adding the following code in the Theme Options > JS:
jQuery(document).ready(function($) {
var $window = $(window);
var $this = $(this);
var $body = $('body');
var $navbar = $('.x-navbar');
var $topbar = $('.x-topbar');
var $logobar = $('.x-logobar');
var $navbarWrap = $('.masthead');
$('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
if ( ! $body.hasClass('page-template-template-blank-3-php') && ! $body.hasClass('page-template-template-blank-6-php') && ! $body.hasClass('page-template-template-blank-7-php') && ! $body.hasClass('page-template-template-blank-8-php') ) {
if ( $body.hasClass('x-boxed-layout-active') && $body.hasClass('x-navbar-fixed-top-active') && $body.hasClass('admin-bar') ) {
$window.scroll(function() {
var $adminbarHeight = $('#wpadminbar').outerHeight();
var $menuTop = $navbarWrap.offset().top - $adminbarHeight;
var $current = $(this).scrollTop();
if ($current > $menuTop) {
$navbar.addClass('x-navbar-fixed-top x-container-fluid max width');
} else {
$navbar.removeClass('x-navbar-fixed-top x-container-fluid max width');
}
});
} else if ( $body.hasClass('x-navbar-fixed-top-active') && $body.hasClass('admin-bar') ) {
$window.scroll(function() {
var $adminbarHeight = $('#wpadminbar').outerHeight();
var $menuTop = $navbarWrap.offset().top - $adminbarHeight;
var $current = $(this).scrollTop();
if ($current > $menuTop) {
$navbar.addClass('x-navbar-fixed-top');
} else {
$navbar.removeClass('x-navbar-fixed-top');
}
});
} else if ( $body.hasClass('x-boxed-layout-active') && $body.hasClass('x-navbar-fixed-top-active') ) {
$window.scroll(function() {
var $menuTop = $navbarWrap.offset().top;
var $current = $(this).scrollTop();
if ($current > $menuTop) {
$navbar.addClass('x-navbar-fixed-top x-container-fluid max width');
} else {
$navbar.removeClass('x-navbar-fixed-top x-container-fluid max width');
}
});
} else if ( $body.hasClass('x-navbar-fixed-top-active') ) {
$window.scroll(function() {
var $menuTop = $navbarWrap.offset().top;
var $current = $(this).scrollTop();
if ($current > $menuTop) {
$navbar.addClass('x-navbar-fixed-top');
} else {
$navbar.removeClass('x-navbar-fixed-top');
}
});
}
else {
$window.scroll(function() {
var $menuTop = $navbarWrap.offset().top;
var $current = $(this).scrollTop();
if ($current > $menuTop) {
$navbar.addClass('x-navbar-fixed-top');
} else {
$navbar.removeClass('x-navbar-fixed-top');
}
});
}
}
});
But please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.
Hope this helps!
Hi Nabeel,
Thanks for getting back to me.
So my “Main Menu” which is the only one affected by that “fixed top” Navbar position in customisation works just fine. It stays fixed. See here: https://music.stefanguy.com/
However I have several other pages that use different menus like https://music.stefanguy.com/popular-progressions/ and these won’t stay fixed. It’d like them to stay fixed so that I can make them transparent.
I hope this makes more sense. If so, is this possible?
Hi @stefanguy,
First, I want to clarify a couple of things, Fixed Top is when you want the menu to be sticky, Static Top is when you want the menu to remain at the top of the page. Second, unfortunately, One Page Navigation is not designed to be a Static Top.
Yes, it’s easy to make the One Page Navigation a Static top with a custom CSS
header .x-navbar-fixed-top {
position: relative;
}
But that will cause a bigger issue (unless you can tolerate it), with that custom CSS the One Page Navigation will not snap on the intended section (Try it so you’ll see what I mean).
So here’s my advice, first, please remove the JS provided above from your Theme Options > JS to avoid any conflicts. Then unset your One Page Menu from the page, yes deactivate the One Page Navigation on the page.
Here’s how to resolve this, first, please download and install this plugin (Menu Swapper). After it installs and activates, navigate to Settings > Menu Swapper create a new Theme Location.
You can name it that way, or any names you like.
Then navigate to Appearance > Menus > Manages Locations, and assign your One Page Menu to the your new Theme Location.
Now the last step is to assign this new Theme Location to your page that needs the One Page Navigation, to do that open/edit the page, under Settings see Menu Swapper tab, replace the Primary Menu with One Page Navigation
Hope it helps,
Cheers!
Awesome,
Thanks for the detailed response Friech! I’ll give this a try at some point today.
Let us know how it goes,
Have a nice weekend.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.