Docs

[Bolsterenpit]

Hi There, I hope you can help me with an issue I have 😉

I tried to place a facebook icon in the navbar and found threads but I have to change something in the CSS Class of the menu but that is not visible for me. I’m running the latest version of X

And can you help me to get it it work I want fb and instagram placed in the menu

[Joao]

Hi There,

You can simply add the html code to the menu name:

Please add the following code:

<i class="x-icon x-icon-facebook-square" data-x-icon="" aria-hidden="true"></i>

Here you find all the icons, in order to find the correct html code you need to inspect the icons.

Icons

Hope that helps

Joao

[Bolsterenpit]

Hi Thanks! This really works. Great support 😉

Is there also a way to increase the site of the icon without changing the size of the other menu-items?

Thanks in advance

[Rupok]

Hi there,

Glad that it helped. Yes we can provide some code for you if you provide your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Bolsterenpit]

This reply has been marked as private.

[Christopher]

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.

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 class="navbar-icons"><?php x_social_global(); ?></div>

        </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-icons"><?php x_social_global(); ?></div>

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

<?php endif; ?>

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

.navbar-icons{
float:right;
display:block;
}
.navbar-icons a{
font-size:25px;
}

Hope it helps.

[Bolsterenpit]

This reply has been marked as private.

[Bolsterenpit]

This reply has been marked as private.

[Christopher]

Hi there,

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

@media (min-width:979px){
nav.x-nav-wrap.desktop {
    width: 62%;
    float: left;
}
}

.navbar-icons {
    float: right;
    display: block;
    text-align: right;
    padding-top: 40px;
}
.navbar-icons a {
    font-size: 25px;
    margin-right: 3px;
    margin-left: 3px;
}

Hope that helps.

[Bolsterenpit]

Yes!!!
That did the job. Thank you so much for helping me out 😉

[Christopher]

You’re welcome.

[Bolsterenpit]

One more question 😉

Is there a code to add to the CSS that the social icons are NOT visable when in mobile mode?

I now have:

}
@media (max-width: 400px) {
.x-brand img {
width: 200px !important;
}
}@media (min-width:979px){
nav.x-nav-wrap.desktop {
width: 62%;
float: left;
}
}

.navbar-icons {
float: right;
display: block;
text-align: right;
padding-top: 38px;
}
.navbar-icons a {
font-size: 25px;
margin-right: 10px;
margin-left: 5px;
}

[Thai]

Hi There,

Please add the following CSS also:

@media (max-width: 979px){
    .navbar-icons {
        display: none;
    }
}

Hope it helps 🙂

[Author]

Posts