Docs

[barnettbailbonds]

Thank you all for all of the previous assistance.
I am having some formatting issues in my top bar and header area. I wanted the top bar to be connected to the header so that when i scroll the top bar and header stay fixed to each other and scroll down with the page. I got help with that but now a new problem is arising when I maximize and minimize the page.

I have attached pictures to illustrate the problem.

1. when i scroll down the menu hides behind the top bar and stays hiding behind the top bar. if i scroll back up to the top of the page it does not go back to original condition. only when i refresh the page it resets to how its supposed to look.

2. When i minimize the page and maximize the page back to full screen my 3 buttons to the right move and my logo on the left side disappears. please assist me with this formatting issue. Thanks.

[barnettbailbonds]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for writing in! We could move the topbar inside the navbar so they will scroll together.

First remove the Custom CSS you apply to make your current topbar fixed.

Then login to your server via FTP and navigate to your child theme’s /x-child/framework/views/global/ directory, there create a file named _navbar.php and paste the code below on it.

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

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

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
    <?php x_get_view( 'global', '_topbar' ); ?>
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Then lets hide the original topbar by adding this on your custom CSS on Customizer.

.masthead > .x-topbar {display: none !important;}

Hope it helps, Cheers!

[Author]

Posts