Docs

[maltekramer89]

I would like to make my header look similar to this:
http://www.mikedillard.com

I want the social icons to the right of the header menu and with a short vertical line to separate exactly like in the example site above.

My site is http://www.maltekramer.net

Please let me know how to achieve it!
Thank you!

[John Ezra]

Hi there,

Thanks for writing in! 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.

First find the _navbar.php file.

You can find it here: /wp-content/themes/x/framework/views/global/_navbar.php

Copy it and paste it in the relative location in the child theme:

/wp-content/themes/x-child/framework/views/global/_navbar.php

replace the file content with the 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' ); ?>
          <div class="social_by_nav">
            <ul>
              <li><a href="#"><i class="x-icon x-icon-twitter" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-facebook" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-youtube" data-icon=""></i></a></li>
            </ul>
          </div>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>

        </div>

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

<?php endif; ?>

Then add the following CSS. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.social_by_nav {
    float: right;
    top: 20px;
    position: relative;
    display:inline-block; 
}

.social_by_nav:before {
    content: "|";
    padding-left: 15px;
    color:#ffffff;
}

.social_by_nav ul li {
    list-style:none;
    top:-24px;
    position:relative;
    float:left;
    padding: 0 10px;
}

Hope this helps – thanks!

[maltekramer89]

Great thank you. Three questions:

1) How do I change the colors of the social media icons to white?

2) How do I link each icon to the appropriate social media page?

3) How do I keep the opacity of the header to 0.7 while keeping the opacity of the header font, the icons, the divider line, and the logo at a full 1.0?

Thank you!!

[Darshana]

Hi there,

#1. Add the following CSS rule into your Customizer, Custom > CSS section using the menu Appearance -> Customize.

.social_by_nav a {
    color: #fff;
}

#2. Update your links within the code provided above. Follow the example below.

<li><a href="http://www.twitter.com/your-profile"><i class="x-icon x-icon-twitter" data-icon=""></i></a></li>
<li><a href="http://www.facebook.com/your-profile"><i class="x-icon x-icon-facebook" data-icon=""></i></a></li>
<li><a href="http://www.youtube.com/your-profile"><i class="x-icon x-icon-youtube" data-icon=""></i></a></li>

#3. Try changing the current opacity level to the below value.

.x-navbar {
    opacity: 0.89;
}

Hope that helps.

[Mbzo]

This reply has been marked as private.

[Zeshan]

Hi there,

It seems you are using stacked logo and navigation layout. In that case, replace the entire code from child theme’s _navbar.php file 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">
          <div class="social_by_nav">
            <ul>
              <li><a href="#"><i class="x-icon x-icon-twitter" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-facebook" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-youtube" data-icon=""></i></a></li>
            </ul>
          </div>
          <?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' ); ?>
          <div class="social_by_nav">
            <ul>
              <li><a href="#"><i class="x-icon x-icon-twitter" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-facebook" data-icon=""></i></a></li>
              <li><a href="#"><i class="x-icon x-icon-youtube" data-icon=""></i></a></li>
            </ul>
          </div>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>

        </div>

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

<?php endif; ?>

You can now change the links in both instances of the code as instructed in our last reply.

Thanks!

[Mbzo]

This reply has been marked as private.

[Rue Nel]

Hello There,

Please make sure that the data-icon="&#xxxx;" has the actual unicode character.

<ul>
  <li><a href="#"><i class="x-icon x-icon-twitter" data-icon=""></i></a></li>
  <li><a href="#"><i class="x-icon x-icon-facebook" data-icon=""></i></a></li>
  <li><a href="#"><i class="x-icon x-icon-youtube" data-icon=""></i></a></li>
</ul>

Please copy the raw code here: http://pastebin.com/c40tjcN0

Please let us know if this works out for you.

[Mbzo]

This reply has been marked as private.

[Paul R]

Hi,

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.

[Mbzo]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the access information of your site. The problem is the data-icon attribute. It should be data-x-icon. We have modified your _navbar.php file. You can check it here: http://pastebin.com/VJcHiFBk

You also need to replace your custom css with this code instead:

.social_by_nav {
    float: right;
    top: 0;
    position: relative;
    display:inline-block; 
}

.social_by_nav:first-child:before{
    content: "|";
    position: absolute;
    left: -10px;
    top: 38%;
    display: inline-block;
}

.social_by_nav ul {
    padding: 0;
    margin: 0;
}

.social_by_nav ul li {
    list-style:none;
    position:relative;
    float:left;
    padding: 0 10px;
}

.social_by_nav ul li a {
   height: 70px;
   padding-top: 32px;
   font-size: 12px;
   line-height: 1;
   display: inline-block;
}

This is how the icons would look like after doing the changes.

If you have installed a caching plugin (WordFence has a cache management which can be found the the performance setup), please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Hope this helps. Kindly let us know.

[Mbzo]

Nice one! Works perfectly, thank you so much!

[Mbzo]

Just one thing: if I need to add additional icons for Google Plus, Rss Feeds and Email, which fontawesome “codes” from your stylesheet do I need to plug in?
Thanks once again!

[Jade]

Hi,

To add more links you will just have to refer back to the response here:

https://community.theme.co/forums/topic/social-icons-to-the-right-of-navbar-menu/#post-377303

And use the fontawesome cheatsheet for the icon you want to use.

Hope this helps.

[Author]

Posts