[davidgaizParticipant]

It didn’t work. I swapped out the original custom JS that you guys recommended and replaced it with that and the flicker problem is still the same.

[JoaoModerator]

Hi There,

Please update your Appereance CUstomizer CUstom CSS to:

.x-topbar {
	height: 55px;
}
@media (min-width: 979px) {
.x-topbar {
    z-index: 1000;
}

.x-brand.img {
    position: absolute;
    margin-top: -40px;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: 80px;
}

.x-navbar-inner {
    min-height: 80px;
}

.x-navbar .desktop .x-nav > li > a {
    height: 30px;
    padding-top: 10px;
}
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 blue;
}
.x-topbar {
    border-bottom: 0px;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
}
.x-topbar.x-topbar-fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
@media(min-width: 969px) {
.x-navbar.x-navbar-fixed-top {
    top: 50px;
}
}
@media(max-width: 969px) {
.x-topbar{
    height: 65px;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
    margin-top: -25px;
}
  @media(max-width: 480px) {
  .x-main.full {
    margin-top: 125px;
}
}
}
@media (max-width: 767px) {
.x-topbar .p-info {
background: none;
}}
 

.admin-bar .x-navbar-fixed-top{
    top: 78px;
}
.admin-bar .x-topbar-fixed-top{
    top: 32px;
}
.x-navbar {
box-shadow: none;
}

And Appereance Customizer Custom Javascript to:

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

Joao

[davidgaizParticipant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

-When looking on my phone, everything seems to load correctly but when scrolling down the top bar disappears until you stop scrolling, then it re-appears.

I have added the code below and it seems that is has fixed the issue.

 @media(max-width: 480px) {
 .x-navbar.x-navbar-fixed-top, .x-navbar, .x-topbar {
    position: fixed !important;
    width: 100%;
  }

-When turning the phone sideways, some of the first content on the page gets hidden.

Altough I don´t believe people actually access websites like that and we rarely get requests regarding this type of view, I added the following code , feel free to adjust if you feel it is necessary.

@media (min-width: 481px) and (max-width: 766px) {
  .x-main.full {
    margin-top: 170px;
}
}

-On a tablet, when you start scrolling part of the top bar gets hidden and it cuts off the text.

I have added the code below and it seems to have fixed the issue.

  @media (min-width: 767px) and (max-width: 969px) {
    .x-main.full {
    margin-top: 150px;
}

}  

To remove the logo you can go to Cornerstone > Settings > Custom > CSS and add:

.x-brand {
  display: none
}

Removing the topbar is a bit more complicated because all the customizations applied before and it would fall out of the scope of our support. Thanks for underdesting.

Hope it helps

Joao

[davidgaizParticipant]

Thank you very much for your help. For the issue that’s out of the scope of your support – instead of removing the top bar is there anything that can be put into cornerstone to change the text of the top bar on that specific page?

If not, could you point me in the direction of someone that I can contact to do this scope of work?

_ _ _

**Edit – So I added in a couple of drop down menu items and the thin line between the top bar and the nav bar came back. I didn’t change anything in the CSS. Any clue on what to tweak to get it to go away again?

Thanks!

[Rue NelModerator]

Hello There,

Thanks for updating in! Instead of just relying on the topbar content, you can simply modify the whole topbar template instead. Because what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      
      <div align="right">
      	<p>Get an appointment today:  <a href="tel:8883439595"><b><font color="000000">888-343-9595</font></b></a> <a class="x-btn x-btn-regular" href="#">Book Online</a> </p>
      </div> 

      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

3] Save the file named as _topbar.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

Please let us know if this works out for you.

[davidgaizParticipant]

Thanks @Rue Nel – when I setup the child theme, is there anything else that I should be putting in there besides what you mentioned above?

You guys have been awesome in giving me lots of custom CSS and JS to input, will all those additions from this thread need to be input into the child theme as well, or can they stay where they are?

Thanks!

[ChristopherModerator]

Hi there,

Please follow this link https://community.theme.co/kb/how-to-setup-child-themes/ to make sure you setup child theme correctly. After that follow Rue Nel’s replay.

In regards with saving current settings, don’t forget to export parent theme’s customizer settings under X addons page before activating child theme. After activating child theme import customizer settings.

Thanks.

[davidgaizParticipant]

Thanks @christopher. I’m going to try to work through this today and see how it goes. Assuming I do it all correctly, after the child theme is setup does it make any sense to go back into the parent theme and remove the CSS and JavaScript that got put in there? Or just leave it and it will get overwritten the next time the parent theme is updated?

[davidgaizParticipant]

Hi there,

I followed the instructions above, completed everything, and now I get an error when I try to view the site. See attached screen shot. I ended up removing the php file, if you need me to put it back in to troubleshoot let me know.

Thanks

[Paul RModerator]

Hi,

Please make sure to add the whole code.

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      
      <div align="right">
          <p>Get an appointment today:  <a href="tel:8883439595"><b><font color="000000">888-343-9595</font></b></a> <a class="x-btn x-btn-regular" href="#">Book Online</a> </p>
      </div> 

      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

You need to scroll down the code window to copy all the code.

I tried it and it works.

Thanks

[davidgaizParticipant]

Hi Paul,

Thanks for the catch, I missed part of the code the first time. Unfortunately, even after correcting it it’s still not working. I tried the code in full at first and the thin line between the top bar and nav bar doesn’t go away. The top bar also disappears when scrolling down.

I took this part out of the code because I don’t want that button up top: “Book Online”

Any suggestions on where to go from here? I’m just trying to get that thin line removed, have everything anchored up top on scroll, and at some point I need to adjust the styling of the drop down menus.

Thanks.

[Paul RModerator]

Hi,

To remove the thin line, you can add this under Custom > Edit Global CSS in the Customizer.

.x-navbar {
    box-shadow: 0 0.15em 0 0 rgba(0,0,0,0.135);
}

Hope that helps

[davidgaizParticipant]

Hi Paul,

Thanks for the help. I put that in, the line is still there unfortunately. I left the code in there if you want to check it out.

[Paul RModerator]

Hi,

There is a missing close curly bracket in your css code preventing the codes below it from working.

https://www.screencast.com/t/wyADavuQ

I went ahead and fix it for you.

Kindly check in your end.

[Author]

Posts