Revolution Slider - Scroll down lose logo and topbar

[Crispix396]

X Theme (not pro)
Revolution Slider
www.bejjani.net

I am still playing with the site so it may change a little.

I watched a sample video on doing the slider revolution, and even his page does this https://pryormedia.net/
when you scroll down, you lose the top bar with all the social media. If you have the thing set to stacked logo, you lose the top bar, and the logo and only leaves the nav bar.

Is there a setting I can change to stop this. seeing it happen on someone elses site too made me think maybe this is normal. cant think why you’d want to lose your logo ant top bar.

[jade]

Hi Chris,

Yes, this is actually the normal behavior of the Fixed Top navigation bar. What will remain on the top is the area where the navigation/menu is. So for inline headers, both the logo and the navigation remain on top as you scroll because they are in the same section. As for stacked headers, the menu and the logo are in separate containers so it is only the navigation area that remains on top when you scroll.

This is possible but will involve some customization. To get you started, please add this code in the Global JS in Theme Options:

jQuery(document).ready(function($){
    $(window).scroll(function(){
        
      if ( $(this).scrollTop() == 0 ) {
		  $('.masthead').removeClass('x-navbar-fixed-top');
		  $('.x-navbar').removeClass('x-navbar-fixed-top');
      } 

      if ( $(this).scrollTop() > 0 ) {
		  $('.masthead').addClass('x-navbar-fixed-top');
		  $('.x-navbar').removeClass('x-navbar-fixed-top');
      }
    
	});
});

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[lely]

Hello Chris,

That is the design by default. Usually fixed top bar consist of navigation menu only because too much content on it means lesser space for the content. Topbar plus stacked menu will occupy more or less 33% on your browser height already. So whatever your content is, it will only scroll on 67% space below it and that is why its not ideal. Good structure is important for better UI experience.

In case you wish to proceed, I can’t point you to the template responsible for this.

wp-content\themes\x\framework\legacy\cranium\headers\views\global\_navbar.php

You may copy that file on the same folder path on yout child theme here:

wp-content\themes\x-child\framework\legacy\cranium\headers\views\global\_navbar.php

If the folder doesn’t exist, please create it.

Then open the copied file on your child theme. Starting line 17, you can see this part:

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

To make it inside the sticky/fixed bar, move above code below this line:

<div class="<?php x_navbar_class(); ?>">

Save it. That part is only moving the stacked logo inside the sticky bar. Topbar is another, case. We can find topbar here:

\wp-content\themes\x\framework\legacy\cranium\headers\views\integrity\wp-header.php

You may need to copy that again on the same folder path on your child theme. Then open the copied file and remove this line:

<?php x_get_view( 'global', '_topbar' ); ?>

Then open the child theme copy of your navbar again. This one:

wp-content\themes\x-child\framework\legacy\cranium\headers\views\global\_navbar.php

Now add the topbar code that you have remove above and then add it above the parts of the code you have copied earlier

<?php x_get_view( 'global', '_topbar' ); ?>

Note that this will be tricky if you are not familiar with coding. Any syntax error might put your site down. Please proceed with caution. Any issue that might arise from altering structure is outside the scope of our support. This is just a demonstration on how to achieve it. You may also need some adjustment on navbar fixed height after this. This assumes that you are also in depth on using CSS to make the adjustment after. Thank you.