Docs

[apneatotalmalta]

Hello! I have been trying to add a menu on the top bar following the thread:

https://community.theme.co/forums/topic/adding-a-menu-to-topbar/#post-1116716

In the moment I modify the _topbar.php file there is a list of the different pages of my main menu in the top bar, even without assign a menu for it.

Can you tell me how to fix that and put the menu centered in the top bar? I have already so some top bar content with the logo and some icons that want to keep in this position.

My site: http://apneatotalmalta.com/
WordPress version: WordPress 4.7.2.
X version: 4.6.4
Cornerstone plugin version: 1.3.3

Thanks in advance!

[Rupok]

Hi there,

Thanks for writing in! I am not sure which code you are using from that thread but you need to change the theme_location and define the menu you want to show on Topbar. Assuming it’s set to the primary menu and showing there, let’s change that from code.

And to fix the layout, you can add this under Custom > CSS in the Customizer.

.x-topbar .menu ul {
	padding: 0;
	text-align: center;
	margin: 0 auto;
}
.x-topbar .menu ul li {
	list-style: none;
	display: inline-block;
	padding: 0 10px;
	text-align: center;
}

Now using the right menu should do the rest.

Cheers!

[apneatotalmalta]

This reply has been marked as private.

[Nabeel A]

Hi again,

I tested the your code in my local setup and it’s working fine with the settings you have. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[apneatotalmalta]

This reply has been marked as private.

[Jade]

Hi there,

Kindly provide us with the FTP details to access the file and not the database details so we can check this further.

Thank you.

[apneatotalmalta]

This reply has been marked as private.

[Christopher]

Hi there,

Please update this code :

    <?php wp_nav_menu( array( 'theme_location' => 'topbar-menu' ) ); ?>
      <?php endif; ?>

To :

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

Hope it helps.

[apneatotalmalta]

This reply has been marked as private.

[Christopher]

Hi there,

Please update it to :

?>

<?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',
        'link_before'    => '<span>',
        'link_after'     => '</span>'
        ) ); 
   ?>      
  
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

Hope it helps.

[apneatotalmalta]

Thanks for your fast reply!

I update it but still displaying the top bar menu in a list. Please see the attached file.

[Rad]

Hi there,

It will never work, X theme menu is the group in two, desktop or mobile. And all styling are loaded and applied depending on that group. And your custom menu doesn’t belong to either desktop or mobile.

Example,

.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, .x-navbar .desktop .sub-menu a:hover, .x-navbar .desktop .sub-menu .x-active > a, .x-navbar .desktop .sub-menu .current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav .x-active > a, .x-navbar .mobile .x-nav .current-menu-item > a {
    color: #6dcbd7;
}

As you can see, the menu link styling is only applicable for menu under .x-navbar, .desktop, and etc. You can’t find .x-topbar there. What kind of menu are you trying to add there? Just plain links or fully featured menu? If it’s just plain links then I could provide some simple CSS, else, you may need to use 3rd party menu.

Thanks.

[apneatotalmalta]

Hi,

Yes, the menu I want to add is just plain text, it’s the same I have as primary one. I would appreciate if you could provide some CSS to do it.

Once located in the top bar I wanted to hide the x-navbar. Is it possible? I have tried from the customizer, setting the Navbar Top Height to 0px but doesn’t work.

Many thanks!!!

[Rad]

Hi there,

Ah, you don’t wish to add a new menu, instead, just move it? In that case, please add this CSS to Admin > Appearance > Customizer > Custom > CSS

.x-brand {
display: none;
}
@media ( min-width: 980px ) {

.x-navbar-wrap {
    position: relative;
    top: -100px;
    z-index: 9999;
    width: 610px;
    margin: 0 auto;
    left: 50px;
}
.x-navbar {
    border-bottom: 0px;
    box-shadow: none;
}

}

Hope this helps.

[Author]

Posts