Docs

[Nuera]

I’m trying to include the social icons that would typically appear in the topbar, but to the right of the search icon in the navbar itself.

I’ve read a number of threads on how to do this, but none of them seem to be working for me – presumably because I already have so many navbar modifications.

the site is fenetex.nueramarketing.com

I’ll reply with credentials, just in case. Thanks!

[Nuera]

This reply has been marked as private.

[Thai]

Hi There,

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.
Then navigate to your child theme’s /framework/views/integrity directory create a file named _navbar.php and paste the code below:

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

<?php endif; ?>

After that add the following CSS under Customizer > Custom > Global CSS:

.x-nav-socials {
    float: right;
}
.x-nav-socials a {
    font-size: 24px;
    margin: 16px 4px;
}

Hope it helps 🙂

[Nuera]

Ok, so that got the icons into the menu – thank you! Now I just have a few style tweaks and I should be good to go.
http://fenetex.nueramarketing.com

1) I’d like to widen the margin between the icons and the search icon (~20px)

2) How can I increase the background circle radius? Right now it is hugging the edge of the icon with a 0px margin.

I should be able to figure out the rest of the styling on my own from there.

3) Is there a way to hide these again under a certain width (~1000px)? I don’t want them visible on the mobile menu, but I also don’t want them to crowd out the actual navigation on smaller screens.

Thanks so much!!

[Nico]

Hi There,

1. Adjust the 10px margin in your custom CSS to adjust your social media icons.

.x-nav-socials a {
    font-size: 18px;
    margin: 32px 10px;
}

2. Add padding in your code above to add background circle.

For example:

.x-nav-socials a {
    font-size: 18px;
    margin: 21px 11px;
    padding: 10px;
}

3 Add this code below to remove the social media icon in certain width

@media (max-width: 979px){
.x-nav-socials a {
    font-size: 18px;
    margin: 21px 11px;
    padding: 10px;
}
}

Hope it helps.

Let us know how it goes.

Thanks.

[Nuera]

Thanks, getting closer!
http://fenetex.nueramarketing.com/

1) I don’t think I was clear enough the first time, but I’m trying to place a larger margin between the group of social icons and the built-in search icon.

2) Is there a way to set each icon to have a circular background? Right now the margins around the icons are just reflecting the shape of the icon, which makes them appear oblong.

3) Can we set the background margin hover color to white?

4) The code you provided does not seem to be hiding the icons at any width. Though it is possible I’ve got my wires crossed on a couple of these points.

Just to clarify, here is what I have right now for this section:

/* Add Social to the Nav Bar */
.x-nav-socials {
    float: right;
}
.x-nav-socials a {
    font-size: 18px;
    margin: 21px 10px;
    padding: 10px;
}

@media (max-width: 979px){
.x-nav-socials a {
    font-size: 18px;
    margin: 21px 10px;
    padding: 10px;
}
}

[Rad]

Hi there,

1. You mean like this ?

.x-nav-socials {
    float: right;
    position: relative;
    right: -20px;
}

That should add 20px space between social and search icon.

2. Sure, update your CSS to this

.x-nav-socials a {
    font-size: 18px;
    margin: 21px 10px;
    padding: 10px;
    width: 38px;
}

3. Sure, please add this as well,

.x-nav-socials a:hover {
background-color: white !important;
}

4. AH, it’s wrong @media width and condition. Based from 1, 2, 3, I’ll provide the complete CSS up to 4

/* Add Social to the Nav Bar */

.x-nav-socials {
display: none; /* hide it */
}
@media (min-width: 999px){ /* means above 999px which is 1000px */
.x-nav-socials {
    float: right;
    display: block; /* had to add this since we need to display it on 1000px and above. */
    position: relative;
    right: -20px;
}
.x-nav-socials a {
    font-size: 18px;
    margin: 21px 10px;
    padding: 10px;
    width: 38px;
}
.x-nav-socials a:hover {
background-color: white !important;
}
}

Hope these helps.

[Nuera]

OUTstanding! Thank you, thank you, thank you…

Just in case anyone else wants to see my final code, including tweaks, here it is 🙂

/* Add Social to the Nav Bar */
.x-nav-socials {
display: none; /* hide it */
}
@media (min-width: 999px){ /* means above 999px which is 1000px */
.x-nav-socials {
    float: right;
    display: block; /* had to add this since we need to display it on 1000px and above. */
    position: relative;
    right: -20px;
}
.x-nav-socials a {
    font-size: 16px;
    margin: 21px 5px;
    padding: 10px;
    width: 36px;
}
.x-nav-socials a:hover {
background-color: white !important;
}
}

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Nuera]

Hey there! Me again…

So I’m attempting to replicate this feature on another site I’m working on and I’m stuck on one point. I have a white header and the social icons are visible until the user hovers over them, which basically means they’re invisible.

Here is the site I’m working on: http://schultz.nueramarketing.com/

Here is the code I’ve got right now:

/* Add Social to the Nav Bar */
.x-nav-socials {
display: none; /* hide it */
}
@media (min-width: 999px){ /* means above 999px which is 1000px */
.x-nav-socials {
    float: right;
    display: block; /* had to add this since we need to display it on 1000px and above. */
    position: relative;
    right: -20px;
}
.x-nav-socials a {
    font-size: 16px;
    margin: 12px 5px;
    padding: 10px;
    width: 36px;
}
.x-nav-socials a:hover {
background-color: #084975 !important;
}
}

Ideally, I’d like the icons to be #198AA7 until the hover kicks in.

THANK YOU!

[Rupok]

Hi there,

Let’s use this CSS :

.x-social-global a {
  background-color: #198aa7;
  color: #fff;
}

If you want this for the Navbar social icons only, you can use this instead :

.x-nav-socials .x-social-global a {
  background-color: #198aa7;
  color: #fff;
}

Cheers!

[Nuera]

I think that’ll work. Thank you, Rupok!!

[Thai]

If you need anything else please let us know.

[Author]

Posts