Hi Apexteam,
I already wrote a similar topic about “How can I fix topbar”?
The problem is that I have a slider above the site with menubar.
How can I make it?
Sarah
Hi There,
Please add the following code to Theme Options CSS
.x-topbar-fixed-top,
.x-logobar-fixed-top {
position:fixed;
top:0;
width:100%;
}
.x-navbar-fixed-top {
top:30px;
}
And to Theme Options Javascript
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 = $('.x-navbar-fixed-top-active .masthead');
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');
$topbar.addClass('x-topbar-fixed-top x-container-fluid max width');
$logobar.addClass('x-logobar-fixed-top x-container-fluid max width');
} else {
$navbar.removeClass('x-navbar-fixed-top x-container-fluid max width');
$topbar.removeClass('x-topbar-fixed-top x-container-fluid max width');
$logobar.removeClass('x-logobar-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');
$topbar.addClass('x-topbar-fixed-top');
$logobar.addClass('x-logobar-fixed-top');
} else {
$navbar.removeClass('x-navbar-fixed-top');
$topbar.removeClass('x-topbar-fixed-top');
$logobar.removeClass('x-logobar-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');
$topbar.addClass('x-topbar-fixed-top x-container-fluid max width');
$logobar.addClass('x-logobar-fixed-top x-container-fluid max width');
} else {
$navbar.removeClass('x-navbar-fixed-top x-container-fluid max width');
$topbar.removeClass('x-topbar-fixed-top x-container-fluid max width');
$logobar.removeClass('x-logobar-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');
$topbar.addClass('x-topbar-fixed-top');
$logobar.addClass('x-logobar-fixed-top');
} else {
$navbar.removeClass('x-navbar-fixed-top');
$topbar.removeClass('x-topbar-fixed-top');
$logobar.removeClass('x-logobar-fixed-top');
}
});
}
}
});
Hope it helps
Hi,
thanks for writing the codes.
The problem is that I can see the changes on backend. But it cannot be seen on frontend.
What can be the problem?
Thanks
Hi Joao,
I just figured out that I can set !important after the css code.
For all pages it works except for the index page.
On the index page I have a slider before the navigation.
On this page it doesn’t work.
Can you help me?
Thanks!
Sarah
Hi Sarah,
It works on my end.
Please clean your browser cache and test it again.
Thank you
Hi
I just cleaned the cache and did hard reload.
But on the index page the topbar doesn’t come with the nav-bar during scrolling down.
Which browser do you use?
Hi again,
Did you purge the W3Total Cache plugin? Purge it’s cache first and then disable it for a while and see if this resolves the issue. I checked your index page and the changes are not reflecting on the index page maybe due the content being served by the cache.
Let us know how this goes!
Hi Nabeeel,
thanks for your response.
I have a problem with the plugin “W3Total Cache Plugin” because of that I deactivated it.
It is very interesting to see that the fixed topbar works on any other pages, but not on index page.
What can the index-page have which blocks the codes?
I already tried out to deactivate the slider above the navbar because I thought it can be the problem. But also without the slider it doesn’t work.
Can you give another solution?
Hi,
Would you mind providing us with login credentials so we can take a closer look? Please provide following information:
Set it as Secure Note
- Link to your site
- WordPress Admin username / password
- FTP credentials
All the best!
Hello There,
Thanks for providing the information. I have inspected your site and the first thing I noticed is that you are using an older version of X (4.4.2). We already have release 5.1.1 which is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/). Please do update to the latest version first. After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.
To have a fix topbar, I have an alternative solution. You can make use of this nifty JS code:
(function($){
$('.x-topbar').prependTo( $('.x-navbar') );
})(jQuery);
And then after that, you will need to increase your navbar top height in Appearance > Customizer > Header > Navbar. You must increase it by adding the height of yout topbar as well.
Please let us know how it goes.
Hi apex team,
thank you so much for your help.
independent of updates and caches, it works when I login.
But without login it doesn’t work.
What can be the problem?
Hi again,
Can you please update your theme to the latest version and see if this resolves the issue? It may be due to the server cache as well, ask your hosting provider to clear the server’s cache.
Let us know how this goes!
Awesome. Just a new tag in Tag Manager does the job 
Glad to hear it!
Cheers