[DunnsgroupParticipant]

Currently this is what I have in my topbar content;

P: 555.555.5555 | E: yourname@yourdomain.com

However, I am trying to be able to edit / customize what is in this section. Would like the following;

Name of Company
Contact Information
Social Media Icons.

Any assistance will be helpful.

Thank you

[DunnsgroupParticipant]

(P: 555.555.5555 | E: yourname@yourdomain.com)

That is the code I currently have in the top bar content section

[DunnsgroupParticipant]

//P: 555.555.5555 | E: yourname@yourdomain.com//

[JoaoModerator]

Hi There,

Go to Apperence > Customizer > Header > Topbar Content

If you need further assistance please provide more details about the issue you are facing and also provide your URL.

Thanks

Joao

[DunnsgroupParticipant]

I would like to move my menus to the top bar. You can view my site at http://www.dunnsgroup.com

I would like the company name to stay to the left with the menu items to the right

[DunnsgroupParticipant]

I would like to move my menus to the top bar. You can view my site at http://www.dunnsgroup.com

I would like the company name to stay to the left with the menu items to the right

[JoaoModerator]

Hi There,

I would like to suggest you something different.

Please add your logo on Appereance > Customizer > Header Logo

Change your header for stacker.

Add your banner image below your navbar with Revolution Slider and setting as Slider under masthead on your wordpress classic back end editor, or set it on the first section of every page manually via Cornerstone.

Add your telephone as the last menu item of your navbar links.

Once you have done that please let us know and we can help you to customize your telephone number and anything else you need.

Cheers

[DunnsgroupParticipant]

I recently removed Revolution Slider due to it slowing down the site but also when removing one slider my site came down and showed “record not found” unsure why.

Is there a way I can activate it without having to deal with that same error? I think my problem is when I activate it the plugin goes back looking for the slider I removed.

[JoaoModerator]

Hi There,

Yes once you install it, click edit page and remove the slider from above and below masthead.

If you need assistance please provide your credentials,

Thanks

[DunnsgroupParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for the credentials, but I am not entirely certain of what you’re trying to do. You said on the very first post that you need the “Name of Company”, “Contact Information”, and “Social Media Icons”. You can do that we this code on your Topbar content. Just replace the phrases with the actual content.

<div class="x-column x-sm x-1-2">
<h6 class="mts">Dunn's Group</h6>
</div>

<div class="x-column x-sm x-1-2 last">
<h6 class="mts">571.408.9507</h6>
</div>

You already have the “Social Media Icons” on the topbar, but currently you hide it with a custom CSS code.

And then you said I would like to move my menus to the top bar.

Please provide us a mock-up design of what you’re trying to do.

Thanks.

[DunnsgroupParticipant]

Sorry for the confusion, but what I am trying to accomplish is the following;

1. I would like the company name at the top in the same location
2. I would like the menu to be brought up to the top car
3. I would like the contact information in the right corner of the top bar.

Apologies again fro the confusion, please let me know if you need any additional clarification.

Thank you for your help in this effort.

[FriechModerator]

Hi There,

Thank you for the clarification. In that case we need a custom topbar template, with that said please install a Chid theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Then login to your server via FTP or Cpanel File Manager and navigate to this directory: /wp-content/themes/x-child/framework/views/global/, from there create a file named _topbar.php and paste the code below on it.

<?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">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      	<div class="x-column x-sm x-1-3">
      		<p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      	</div>
      <?php endif; ?>

      <div class="x-column x-sm x-1-3 center-text">
       <?php x_get_view( 'global', '_nav', 'primary' ); ?>
      </div>

      <div class="x-column x-sm x-1-3 last">
      <div class="contact-info right-text"><h3 class="mtn"><a href="tel:5714089507">571.408.9507</a></h3></div>
      </div>
      <?php /*x_social_global();*/ ?>
    </div>
  </div>

<?php endif; ?>

After that navigate to Customizer > Header > Topbar Content, and update your content to this:

<h3 class="mtn">Dunn's Group</h3>

Then add this on Customizer > Custom > Global CSS.

/*CSS for menu on the topbar*/
@media (min-width:  980px) {
	.x-topbar .x-nav .menu-item {
	display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
}
}

/*hide the original navbar(menu)*/
.x-logobar + .x-navbar-wrap {
	display: none;
}

After doing this successfully you should see your topbar as

Dunn’s Group (left), Menu (center), Contact Number (right).

We might need additional custom CSS to style and align this, but just let us know if that should be the case.

Remember to clear all caches (Comet Cache and JS & CSS Script Optimizer, and browser’s cache) after updating so that the lastest code is in use.

Let us know how it goes.

Cheers!

[DunnsgroupParticipant]

Thank you this is working thus far in the child theme. We do however, need to make it so that we are able to straighten the menu out, if you could assist with that.

Also, will I need to copy this code over to the parent theme or will this automatically update in the parent theme?

Thanks again for your continued help on this case.

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (min-width: 1500px) {
.x-topbar .x-topbar-inner .x-column.x-1-3:first-child,
.x-topbar .x-column.x-1-3.last {
     max-width: 210px;
}

.x-topbar .x-column.x-1-3.center-text {
     min-width:970px;
}

.x-topbar h3 {
     line-height:85px;
}
}

Hope that helps.

[Author]

Posts