Docs

[knmcmahon]

Hello –

I’d like to be able to move my social media links up from the bottom of my home page to the top right (http://screencast.com/t/9JAqGFKjnV). Is there a way to shift my menu left a little so that they fit? Also, I’ve noticed that when someone looks at my page on a smaller display, the menu drops below my logo. This isn’t bad, but I don’t want my social media links in that open space because I’m not sure what would happen if it was spread out (http://screencast.com/t/ynVYN6VkZc).

Thanks,
Kevin

[Jade]

Hey Kevin,

Please try to follow the suggestion in this thread: https://community.theme.co/forums/topic/social-media-icons-in-the-navbar/#post-190387

Hope this helps.

[knmcmahon]

Hi – Thanks for the quick response. Unfortunately, I’m not a designer so not sure how or where to add that code mentioned in the page you suggested. Do I do it right in WordPress or do I need to do this from my C Panel? I will provide my info in the following message.

Thanks,
Kevin

[knmcmahon]

This reply has been marked as private.

[knmcmahon]

This reply has been marked as private.

[Lely]

Hi Kevin,

That is correct. The file is not existing yet on the x-child directory. We have to copy the file from X global views to x-child global views then open the copied file and replace the content with the suggested code on link provided above.

Hope this helps.

[knmcmahon]

This can be disregarded

[knmcmahon]

Thanks, I was able to get them up to the top and now the icons are in the navbar, but they are still on the left of the menu. How can I move them to the right of the menu?

Any suggestions?

Thanks,
Kevin

[Friech]

Hi Kevin,

In that case, please provide us FTP credentials so we can take a closer look.

Thanks.

[knmcmahon]

This reply has been marked as private.

[Rad]

Hi there,

Please change your CSS to this

.custom-social {
    display: block;
    margin-top: 10px;
    margin-left: 30px;
    float: right;
}

Then in your custom template for navbar, move your social global code before the menu instead of after it. Like this

<?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="custom-social"><?php x_social_global(); ?></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="custom-social"><?php x_social_global(); ?></div>          
<?php x_get_view( 'global', '_nav', 'primary' ); ?>
          
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Thanks!

[knmcmahon]

Thank you. I added the .custom-social block to my global css piece and I went back into my baby theme code and substituted what was in there with the code you provided. However, the social icons are still on the left hand side of the menu bar, not the right like I had hoped. Also, it looks like the logo and social bar have pushed up the bar a bit so now they aren’t in line with the rest of the menu. What am I doing wrong?

Thanks,
Kevin

[Jade]

Hi Kevin,

I have just checked the codes in the custom CSS and there was one block of media query that was not closed properly which caused the other CSS codes not to work.

I have went ahead and fixed it. It should be corrected by now.

Cheers!

[knmcmahon]

That worked perfectly – thanks! Last question, and not a big deal, but is there a way to drop the social icons down a bit so that they’re in line with the menu bar text?

[Jade]

Hi Kevin,

Please update this code:

.custom-social {
    display: block;
    margin-top: 10px;
    margin-left: 30px;
    float: right;
}

to

.custom-social {
    display: block;
    margin-top: 20px !important;
    margin-left: 30px;
    float: right;
}

Hope this helps.

[Author]

Posts