Topbar issues after update

Support
#1

I recently updated to newest version of X. 5.2.2 (I am using a child theme for Icon)

I noticed several style changes that I was able to adjust in the Customizer.

However, one unusual one is some customization I had done in topbar.php - specifically to the x-btn-widgetbar button.

  1. Had customized to include text in the button
  2. Had custom CSS to hide x-topbar on smaller screen sizes.

I did find the new version of X included the original topbar.php file in a new location - I recreated the file structure in my child theme to match and placed copy of my customized file there, but my customizations still do not display.

Also (and this is strange) even though x-topbar is still hidden on mobile, the button is displaying. I’m very confused by this as it is contained within the x-topbar div.

Is there a new php file where I should make my topbar and x-btn-widgetbar customizations?

#2

Hi There,

Thank you for writing in, please make sure that your Cornerstone is up to date also (v2.1.3).

Remember to clear all caches after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please make sure there is no unclose HTML tag on your markup (_topbar.php), and check if your child theme is the one active, not the parent X theme (Appearance > Themes)

And can you confirm that you did put the x-btn-widgetbar on the topbar? We do not have that button on the original _topbar.php file, that button is added via a function.

Have a nice weekend,
Cheers!

#3

Thank you for your reply.

I had already checked these suggestions, but double-checked to be safe.

Here is my code from _topbar.php
(I did place a copy of this file to its new “legacy” location that I mirrored from X theme to my child theme)

It should:

  • Include custom text for the button “DIRECTIONS & INFO”
  • Hide “+” symbol
  • Replace x_topbar_content with a widget (which currently works)

All of this worked perfectly before last update.

<?php

// =============================================================================
// /LEGACY/CRANIUM/HEADERS/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">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <?php dynamic_sidebar( 'x-topbar-widget' ); ?>
      <?php endif; ?>
    </div>
    <a href="#" class="x-btn-widgetbar collapsed" data-toggle="collapse" data-target=".x-widgetbar">
      <i aria-hidden="true" data-x-icon="" class="x-icon x-icon-bars"></i><span>Directions & Info</span><span class="visually-hidden"><?php _e( 'Toggle the Widgetbar', '__x__' ); ?></span></i>
    </a>
  </div>

<?php endif; ?>

Also (as mentioned) “.x-topbar” is set to display:none at smaller sizes. This does hide the topbar content area, but the button still displays (since last update). As you can see above, the button is within the x-topbar div

@media (max-width: 767px) {

	.x-topbar {
		display: none;
	}
#4

Hello There,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

#5

I still have not been able to determine why my earlier customizations to the topbar (and specifically .x-btn-widgetbar) are not showing since that last update.

Or how may I recreate these customizations that ill work better with any new changes that have been made to the theme?

#6

Hello There,

Thanks for updating in! I have checked your site and I could not find anything that has cause the issue. It leads me to think that your _topbar.php file is in the wrong place. I could not check this because I do not have access to your ftp. Just double check that the file should be in this location:

wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/

Now this folder path may not exist in the child yet so you will need to create those folders.

Please let us know how it goes.

#7

Thank you @RueNel. Yes, I had moved that file before I started this thread.

Digging around on this today, I think I may have found the issue, but could use some help determining best course of action:

There seem to be two instances of this button.

In the header I see this div, which includes my customizations for .x-btn-widgetbar that I made to _topbar.php. (see how it says “Directions & Info”).

    <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
            <div class="widget_text p-info"><div class="textwidget custom-html-widget">You can <a href="/support/donate/">make your year-end gift to the Art Park online today.</a></div></div>          </div>
    <a href="#" class="x-btn-widgetbar collapsed" data-toggle="collapse" data-target=".x-widgetbar">
      <i aria-hidden="true" data-x-icon="" class="x-icon x-icon-bars"></i><span>Directions &amp; Info</span><span class="visually-hidden">Toggle the Widgetbar</span>
    </a>
  </div>

BUT… when inspecting, I also see this div just below the line !-- END .x-site –

<div class="x-widgetbar collapsed">

followed by:

      <a href="#" class="x-btn-widgetbar collapsed" data-toggle="collapse" data-target=".x-widgetbar" style="outline: none;">
  <i class="x-icon-plus-circle" data-x-icon=""><span class="visually-hidden">Toggle the Widgetbar</span></i>
</a>

THIS seems to be the conflict. If (in dev tools) I delete this last section of html, the page will display my original content from _topbar.php that is contained in x-topbar div above.

I’m having trouble finding this div in the files.

What is the best course of action? I’d like to keep my customizations as up-to-date with the theme as possible to avoid future bugs like this.

#8

Hi,

To remove x default header widget button and content, add the code below in your child theme’s functions.php file.

function x_legacy_header_widget_areas() {
   return;
  }

Hope that helps.

1 Like
#9

That did the trick. Thank you.

Can you explain what this function does?

#10

Glad it works and you’re welcome!

It replaced or override the function that is displaying the header widget area. That means it will return empty :slight_smile:

Thanks!