Docs

[bjmiller]

I have tried and now completely stumped. How can I have my menu in the center with logo to the left and social icons to the right on the same line?

[bjmiller]

This reply has been marked as private.

[Rahul]

Hey there,

Thanks for writing in.

I can not see the logo. Can you please upload it first and let us know so we can assist you further?

Thanks

[bjmiller]

Ok I have taken my css out. Here is what I was using

.x-logobar{
display:none;
}

table{
margin-bottom:0;
}
.x-topbar .x-social-global {
position: relative;
bottom: -27px;
}

.x-topbar {
min-height: 0;
height: 0;
border: none;
}

[Rahul]

Hi there,

To display social icons in navbar, please copy _navbar.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
<div class="navbar-social">
          <?php x_social_global(); ?>
</div>

        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Please add following code in Customize -> Custom -> CSS :

.navbar-social a {
    font-size: 25px;
    margin-right: 3px;
}

Hope it helps.

[bjmiller]

This reply has been marked as private.

[bjmiller]

Ok now I have removed the second social but still the logo is on the left, the social icons are on the left and menu is on the right. Thank you again for your help X themes is always top notch for support!

[Joao]

You are welcome.

Let us know if you need help with anything else.

Joao

[bjmiller]

This reply has been marked as private.

[Jade]

Hi there,

Please find this code

body .x-nav-wrap.desktop {
    float: left;
    display: block;
    width: 100%;
    max-width: 1024px;
}

and update it to:

body .x-nav-wrap.desktop {
    float: left;
    display: block;
    width: 80%;
    max-width: 1024px;
}

[bjmiller]

This reply has been marked as private.

[Rue Nel]

Hello There,

thanks for the updates! To align your social icons and fix the menu on smaller screens, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.navbar-social {
    margin-top: 30px;
}

@media(max-width: 979px){
    body .x-nav-wrap.desktop {
        display: none;
    }
}

Hope this helps. Please let us know how it goes.

[bjmiller]

Thank you!

[Rahul]

You’re welcome!

[Author]

Posts