Docs

[tmades]

Hey there,

I’m trying to get my custom logo, menu items and custom social media icons to display in-line in the navbar.

Here’s a URL to my site: http://shaunfrank.com

Ideally I’d like to have menu items to the left, logo centered and social media icons to the right.

If that can’t be achieved, I’d like to have my logo centred in the navbar when viewing on a mobile device.

Thanks!

[Christopher]

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.

[tmades]

Thanks! It’s in the navbar now but still a few things I’m looking for:

1) I’d like them to display the custom icons I’m using in the top bar. Here is the code I’m using:

.x-topbar .x-social-global .x-icon-facebook-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/facebook.png);
}

.x-topbar .x-social-global .x-icon-twitter-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/twitter.png);
}

.x-topbar .x-social-global .x-icon-linkedin-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/instagram.png);
}

.x-topbar .x-social-global .x-icon-xing-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/apple.png);
}

.x-topbar .x-social-global .x-icon-youtube-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/soundcloud.png);
}

.x-topbar .x-social-global .x-icon-vimeo-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/spotify.png);
}

.x-topbar .x-social-global .x-icon-pinterest-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/youtube.png);
}

I’ve left the topbar enabled so you can see what I mean.

2) How can I get the social icons to display in the top right hand corner above the menu tabs? Just like it was in the topbar but not in the topbar.. if that makes sense.

Thanks!

[Rupok]

Hi there,

Thanks for updating.

#1. It’s not in the Topbar so your code should not work.

You can update the codes like this :

.navbar-social .x-social-global .x-icon-facebook-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/facebook.png);
}

.navbar-social .x-social-global .x-icon-twitter-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/twitter.png);
}

.navbar-social .x-social-global .x-icon-linkedin-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/instagram.png);
}

.navbar-social .x-social-global .x-icon-xing-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/apple.png);
}

.navbar-social .x-social-global .x-icon-youtube-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/soundcloud.png);
}

.navbar-social .x-social-global .x-icon-vimeo-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/spotify.png);
}

.navbar-social .x-social-global .x-icon-pinterest-square:before {
    content: url(http://shaunfrank.com/wp-content/uploads/2016/04/youtube.png);
}

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

.x-navbar .x-container {
  position: static;
}

.navbar-social {
  position: absolute;
  right: 40px;
  top: 20px;
}

Hope this helps.

Cheers!

[tmades]

It does thank you!! One more thing:

The icons aren’t displaying how I’d like them on mobile (see screenshot).

What code can I use to have them display more to the right so they aren’t overlapping with the logo.

[Christopher]

Hi there,

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

@media (max-width:480px){
a.x-brand.img {
    margin-top: 34px;
}
}

Hope it helps.

[tmades]

Awesome thank you!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts