[carengoodrichParticipant]

Hi, I have been stumbling around with X for a couple weeks now, using the Renew theme. I am stumped as to how to add menu tabs to my top bar. I created some “categories” as well as an About Me page. I put each blog post into a Category. I want each Category as well as the About Me page to be menu tabs on the top bar and can’t figure out how to put them there.

I also downloaded an ad plugin but see no way to implement it with the Renew dashboard choices. It shows up under “Widgets” in my Renew Sidebar but there is no place to paste HTML for the ad. What am I missing here?

Thanks,

Caren
paintingheart.com

[Paul RModerator]

Hi Caren,

Thanks for writing in!

You can create your menu by navigating to Appearance > Menus.

http://screencast.com/t/uF4CV9Uq9Ykw

Then to put it in the topbar. Menu name should be Topbar Menu

Create file _topbar.php in wp-content\themes\x-child-renew\framework\views\global
and copy the code below into that 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-fluid max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?> 
      <?php

        wp_nav_menu( array(
            'menu'           => 'topbar-menu',
            'container'      => false,
            'menu_class'     => 'x-nav sf-menu',
            'container'       => 'div',
            'container_class' => 'top-menu',
        ) );
      ?>
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

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

.top-menu {
      float:left;
}

.top-menu ul {
     margin:0;
}

.top-menu li {
     display:inline-block;
}
.top-menu li a {
    padding:0 20px 0 0;
    line-height:46px;
}

With regards to your ad plugin, Can you tell us where you would like the ad to show? and what ad plugin you are using.

Hope this helps. 🙂

[carengoodrichParticipant]

Thank you, I was able to create a topbar menu, but I need further instructions on where to go to do this:

“Create file _topbar.php in wp-content\themes\x-child-renew\framework\views\global
and copy the code below into that file.”

[carengoodrichParticipant]

As far as my ad plug in, I am using Advertising Manager (but I’m open to suggestions!) and would like to put an ad in my sidebar and maybe a banner in the topbar.

thanks!

caren

[ZeshanMember]

Hi Caren,

We’re sorry for the confusion!

You first need to install a child theme in your website. Because this requires a template change, I’d advise that you setup 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.

After that, copy the file wp-content/themes/x/framework/views/global/_topbar.php in your child theme’s folder /framework/views/global/, open the file in a text editor and replace entire code with the above given code.

That’s it 🙂

Regarding the ads, you can add them in using a text widget in your sidebar by going into Appearance > Widgets.

Hope this helps. 🙂

Thank you.

[carengoodrichParticipant]

Ok thanks for the info. Will I lose the blog entries I have already written when I install a child theme?

[Kosher KMember]

HI There,

You won’t loose any content when switching from one theme to another or from parent theme to child theme,

The only thing you need to do is re assign your menu as wordpress menus are tied with active theme. You should also check the widget and see of there are missing widgets after switching to child theme, Missing widgets will usually go to “Inactive Widgets” and you can simply drag and assign them to their correct positions.

Cheers

[LisaChristen2Participant]

This CSS is great, thank you! Questions:

1. How do I customize the font color and size on the topbar? Right now I think it’s using the Customizer Body selections.
2. How do I make the background of the topbar black to match my navbar (and please no line separating the topbar and the navbar – they should look like one large header).
3. How do I make the WPML plugin display a menu in this topbar?

Website: http://www.christenguss.com
WP, X and Plugins all up-to-date

Thanks awesome support staff!

[ChristopherModerator]

Hi there,

Add the following code:
#1

.top-menu a {
color: white;
font-size: 12px;
}

#2

.x-topbar {
background-color: #000;
}

#3 You have already used the custom code to display menu in topbar,you need to add item to topbar-menu.

Hope it helps.

[vaughnmercuryParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hey @3rdcity,

Thanks for updating this thread! The solution above is quite a bit older. Please go over to your code and change this line <div class="x-topbar-inner x-container-fluid max width"> with this code instead <div class="x-topbar-inner x-container max width">

The full 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">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?> 
      <?php

        wp_nav_menu( array(
            'menu'           => 'topbar-menu',
            'container'      => false,
            'menu_class'     => 'x-nav sf-menu',
            'container'       => 'div',
            'container_class' => 'top-menu',
        ) );
      ?>
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

Please let us know if this works out for you.

[vaughnmercuryParticipant]

Worked great thank you!

[vaughnmercuryParticipant]

One more question though, how do I add some space between the text in that menu? Not space between the word but between the letters.

[Nabeel AModerator]

Hi again,

To increase the letter spacing, you can use this code:

.x-navbar .x-nav-wrap .x-nav > li > a {
    letter-spacing: 2px !important;
}

Let us know how this goes!

[vaughnmercuryParticipant]

It doesn’t change at all.

[Author]

Posts