Sticky Top Bar and Spacing

bluetroop2 · January 20, 2021, 5:02am

Hi X Team - this is a continuation of this thread… Freeze Top Section

I applied the following global code to make the top bar only to be sticky…

.x-logobar {
display: none;
}

/* STICKY TOP BAR */
.x-topbar {
top:0;
position: fixed;
width: 100%;
}

.admin-bar .x-topbar {
top:32px;
}

.x-logobar {
width:100%;
top: 60px;
position: absolute;
}

.admin-bar .x-logobar {
top: 78px;
}

.x-navbar {
position:absolute;
top:194px;
width:100%;
}

.x-navbar.x-navbar-fixed-top {
top:46px;
position:fixed !important;
}

Can you hep me correct it so the bar where the appears is not covered and the gap between that bar and the navigation can be closed? Thank you for your help.

ruenel · January 21, 2021, 3:40am

Hello @bluetroop2,

Thank you for the very detailed post information. To get this resolved, kindly remove the following CSS block in your code:

 .x-navbar {
position:absolute;
top:194px;
width:100%;
}

.x-navbar.x-navbar-fixed-top {
top:46px;
position:fixed !important;
}

Kindly let us know how it goes.

bluetroop2 · January 21, 2021, 7:35pm

I did this and now the top bar does not stick and stay visible. How do I get the top bar to stay visible?

bluetroop2 · January 22, 2021, 6:42pm

Checking back… any ideas?

prakash_s · January 22, 2021, 6:55pm

Hello @bluetroop2

To set the Header bar sticky at the top, you don’t need custom CSS code for that. You can go to X—>Theme Option -->Header—>Position—>Set Fixed Top.

Theme-Options-Xc

Hope it helps
Thanks

bluetroop2 · January 22, 2021, 8:08pm

This solution does not work. It only locks the navigation bar, NOT the top bar. I only want the top bar by itself to be locked. Do you know how I can accomplish this?

ruenel · January 25, 2021, 2:51am

Hello @bluetroop2

Please set the Navbar position in X > Theme Options > Header > Postion to “Static Top” and then follow this old thread:

Fix Topbar after Slider - Support - Themeco Forum

You will have to remove any lines related to the navbar since it will not apply to you. Only use the lines that is for the topbar.

Kindly let us know how it goes.

bluetroop2 · January 29, 2021, 9:12pm

I think it’s on the right track and I followed your advice to remove portions in the JavaScript with the nav bar and logo bar terminology, but it seems I’m still not getting the design to react the way I want. Can you please take at look at how I modified the script and tell what I have wrong?

nabeel · January 31, 2021, 12:00am

Hey @bluetroop2,

As you see this requires custom development as this isn’t a default feature which is regretfully outside the scope of our support. X header is designed with the basic ready to go settings so we often receive header related customization questions or requests and this was the reason why a header and footer builder was created and an advanced X version was formed now called Pro . Please consider upgrading to Pro so you can build a custom header yourself without custom coding. In case you upgrade to Pro and you get stuck with the options, we’re here to assist all the way.

You can also checkout https://theme.co/docs/converting-from-x-to-pro and https://theme.co/docs/the-difference-between-x-pro

Hope this helps!

bluetroop2 · January 31, 2021, 6:43pm

You were starting to help me, but now telling me to upgrade? I just need the top bar to stay visible on the page. This is difficult?..

tristup · February 1, 2021, 1:51pm

Hi @bluetroop2,

What you are expecting, the options are not available with the X theme you are using. Whereas the Pro has the option to customize the Header builder which has the options that you are expecting, and that is why my colleague suggested you upgrade from X to Pro. I would also suggest you the same.

Thanks

bluetroop2 · February 1, 2021, 6:54pm

@Joao almost had it. Can you make it so the Top Bar is the only one that sticks.

CSS:
.x-topbar-fixed-top,
.x-logobar-fixed-top {
position:fixed;
top:0;
width:100%;
}

.x-navbar-fixed-top {
top:30px;
}

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');
    }
  });
}
}

});

marc_a · February 2, 2021, 7:29pm

Hi @bluetroop2,

Regretfully, providing or enhancing custom code is outside the scope of our theme support. You may seek help from third-party developers or you can avail One, where we answer all the customization on your website.

Hope that helps and thank you for understanding.

bluetroop2 · February 7, 2021, 8:11pm

Okay, I am changing strategy. I’ve built a new logo bar (placed above the navigation), but I would like for it stay FIXED at the top along with the navigation. The CSS code and Javascript I used is found below. How can I modify it so the logo bar will STICK along with the nav bar. Right now only the nav bar sticks.

CSS

.masthead-stacked .x-brand {
float: left;
}

.header-contact {
text-align: right;
color: white;
}
.header-phone {
text-align: right;
color: #034d65;
font-size: 2em;
font-weight: bold;
}
.x-navbar .desktop .x-nav > li:last-child > a {
border-right: none;
}
.x-navbar .desktop .x-nav > li > a {
border-right: 1px solid white;
}

.header-contact + br {display: none;}

JavaScript

jQuery(document).ready(function($) {
var html = ‘

Business Only Services | BY APPOINTMENT ONLY
3576 FM 2181, Hickory Creek, TX, USA
service@mitech-services.com

(972) 652-0010

’;
$( html ).appendTo(’.x-logobar-inner .x-container’);
});

marc_a · February 9, 2021, 2:48am

Hi @bluetroop2,

We don’t usually provide code because it is outside the scope of our theme support. I just give you a starting point to address your issue.

Javascript:

jQuery(document).ready(function( $ ){
var stickyOffset = $('.masthead').offset().top;

$(window).scroll(function(){
  var sticky = $('.masthead'),
      scroll = $(window).scrollTop();
    
  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
});

CSS:

.fixed {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}

References: http://jsfiddle.net/gxRC9/502/

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

bluetroop2 · February 9, 2021, 4:56am

Thanks. It is working, they are both sticking on scrolling, but the logo bar is now positioned UNDER the Navigation bar and it is cut off. How do I get it ABOVE the navigation bar and nothing covered up?

matt · February 9, 2021, 3:19pm

Hi @bluetroop2,

As we’ve stated, your request is beyond the scope of theme support. We have provided you with some code as a starting point, but we will not continue to refine it for you.

Thanks for understanding.

system · February 19, 2021, 3:19pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.