Docs

[vaughnmercury]

Sorry, I see it now, that is for the nav menu. It should be for topbar

[Friech]

Hi There,

Sorry for the confusion, Add this css instead.

.top-menu li a {letter-spacing: 4px;}

Feel free to adjust the 4px value.

Cheers!

[Finlando]

Hi X-Team,

Is it possible to switch the menus per language?
Right now i have for the russian version ‘topbar-menu-ru’ (and it works great):

?>

<?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-ru',
            'container'      => false,
            'menu_class'     => 'x-nav sf-menu',
            'container'       => 'div',
            'container_class' => 'top-menu',
        ) );
      ?>
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

But I’ve created a second menu ‘topbar-menu-en’. Is there a way to adjust the code to call the english version of the topbar? Or maybe with the “Menu Swapper” plugin?

Thank You very much in advance.

Cheers,
Alex

[Finlando]

This reply has been marked as private.

[Paul R]

Hi,

You can add a conditional statement to your code to make the menu display according to language.

eg.

<?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
if ( ICL_LANGUAGE_CODE=='ru' ) {
        wp_nav_menu( array(
            'menu'           => 'topbar-menu-ru',
            'container'      => false,
            'menu_class'     => 'x-nav sf-menu',
            'container'       => 'div',
            'container_class' => 'top-menu',
        ) );
}else{
    
    wp_nav_menu( array(
            'menu'           => 'topbar-menu-en',
            'container'      => false,
            'menu_class'     => 'x-nav sf-menu',
            'container'       => 'div',
            'container_class' => 'top-menu',
        ) );
}
      ?>
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

Hope that helps.

[Finlando]

Hi,

this works great! Thanks a lot.

Is there a way to get the rounded corner box-background in the topbar, that was appearing, when resizing the browser window to a smaller size or on mobile devices? (The additional background appeared, when my topbar content was added via customizer)

(i mean this box: http://snag.gy/DpobC.jpg )

Cheers,
Alex

[Rupok]

Hey Alex,

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding.

[Leanna]

This reply has been marked as private.

[Rad]

Hi there,

Please update your codes to this,

<?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; ?>
		
      <div class="searchform">
      	<a href="#"><span><i class="x-icon x-icon-search"></i><span class="x-hidden-desktop"> Search</span></span></a>
      </div>

      <?php x_social_global(); ?>

<?php

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

    </div>
  </div>

<?php endif; ?>

/* TOPBAR */
.x-topbar .x-social-global a {
    font-size: 30px;
    font-size: 3rem;
    letter-spacing: 0px;
    vertical-align: text-bottom;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0; }

.site .x-topbar .p-info {
    margin: 5px 5px 10px 50px;
    padding: 0, 20px, 0, 20px;
    font-size: 14px;
    color: #000000;
    font-size: 1.5rem; }

/*TOPBAR ADD SEARCH icon*/
.searchform {
float: right;
margin: 5px 20px 0 10px;
font-size: 22px; }

/*TOPBAR ADD MENU*/
.top-menu {
    float: right;
    margin-top: 13px;
    margin-right: 5px;
} 
.top-menu ul {
     margin:0; } 
.top-menu li {
     display:inline-block; }
.top-menu li a {
    padding: 20px 20px 0 0;
    line-height:16px; }

Cheers!

[Leanna]

Fantastic! Great code!

[Thai]

Glad it worked!

If you need anything else, please let us know.

[mthomas91]

Hi,

I want to add an Account button and a Log in/out button in my top bar.

I tried adding a menu but it looks like this – http://puu.sh/m7ibQ/d1d8a9415e.jpg

But…

I want them to look like yours on this page. – http://puu.sh/m7in9/89192721c8.png

How can I acheive this?

Thanks,
Miles

[Jade]

Hi Miles,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. 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.

[mthomas91]

Hi,

Here is my URL – http://www.freematchedbetting.com

Thanks,
Miles

[Jade]

Hi Miles,

Thanks for the URL.

If you wish you use icons in your menu items, you will need to use HTML in the menu item’s title field (see: http://prntscr.com/5yz956). So, you can get the name of any icon from this demo (see: http://prntscr.com/5yz9h5) and then you can replace that name with user in the following HTML code and add the updated code before your menu item:

<i class="icon-user"></i>

Then add a class to the menu items links that you want to display as a button.

Assuming the class name you added is menu-btn, then add this CSS in the Customizer:

.menu-btn {
    background-color: #c5c5c5;
    -webkit-box-shadow: 0 2px 0 0 #b7b7b7;
    box-shadow: 0 2px 0 0 #b7b7b7;
    color: #fff;
}

Hope this helps.

[Author]

Posts