Topic: Overlapping logo on the header bar

Tagged: x

Author

Posts

June 27, 2016 at 10:56 am #1061716

3b1a2f46-a516-40cf-beba-b611930e4819

Participant

Hi there,

Thanks for your help so far on this!

I am wanting to find out if it is possible to have an overlapping logo as per the next attachment..

June 27, 2016 at 11:04 am #1061729

3b1a2f46-a516-40cf-beba-b611930e4819

Participant

This reply has been marked as private.

June 27, 2016 at 12:34 pm #1061879

Joao

Moderator

Hi There,

Please do the following:

1- Add the following code to Appereance Customizer Custom CSS

.x-navbar{
z-index:1033;
}
.x-brand img {
    margin-bottom: -30px;
    margin-top: -30px;
    position:relative;
}

You will need to adjust the size of your Navbar after at Appereance Customizer Header

2- Go To Appereance Menus and use this as a label of your menu item:

Fors<i class="x-icon x-icon-cog" data-x-icon="" aria-hidden="true"></i>

3- Hi There, This is possible but it will require template change so we reccomend the use of a Child Theme.

Please do the following:

e.g. add this code below in your child theme functions.php and modify it,

if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {

    $facebook    = x_get_option( 'x_social_facebook', '' );
    $twitter     = x_get_option( 'x_social_twitter', '' );
    $google_plus = x_get_option( 'x_social_googleplus', '' );
    $linkedin    = x_get_option( 'x_social_linkedin', '' );
    $xing        = x_get_option( 'x_social_xing', '' );
    $foursquare  = x_get_option( 'x_social_foursquare', '' );
    $youtube     = x_get_option( 'x_social_youtube', '' );
    $vimeo       = x_get_option( 'x_social_vimeo', '' );
    $instagram   = x_get_option( 'x_social_instagram', '' );
    $pinterest   = x_get_option( 'x_social_pinterest', '' );
    $dribbble    = x_get_option( 'x_social_dribbble', '' );
    $behance     = x_get_option( 'x_social_behance', '' );
    $tumblr      = x_get_option( 'x_social_tumblr', '' );
    $rss         = x_get_option( 'x_social_rss', '' );

    $output = '<div class="x-social-global">';

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square"></i></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square"></i></a>'; endif;
      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square"></i></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square"></i></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;

4- Add the following content to Appereance Customizer Header Top bar Content


<i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i><a href="tel:0845 3717 321">0845 3717 321</a>&nbsp&nbsp&nbsp<i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i> <a href="[email protected]">[email protected]</a>

Add the following code to Appereance Customizer Custom CSS

.x-topbar .p-info {
  text-align: right;
  width: 90%;
  font-size: 14px;  
}
.x-topbar .p-info a {
  color: white;
  }
.x-topbar .p-info i {
  color: #90c84b;
}

Hope that helps,

Joao

June 29, 2016 at 8:50 am #1064878

3b1a2f46-a516-40cf-beba-b611930e4819

Participant

Thank you – really impressed with the support.

However, there are a couple of things not quite right.

Just before tablet view, the social media icons start to wrap below the contact details?

When you get to mobile view a light grey tab appears? I would like the contact details to sit central above the logo – and the social media icons to hide.

Finally, your response to my Q4 above – what do I need to modify?

Thanks again

June 29, 2016 at 10:34 am #1065006

Joao

Moderator

Hi There,

Please add the following code to Appereance Customizer Custom CSS:


@media screen and (max-width: 1260px) {
.x-topbar .p-info {
   width: 80%;
  background: transparent;
  
}
}
@media screen and (max-width: 480px) {
.x-brand img { 
 max-width: 70%;
   
}
}

I am sorry but I did not understand what you mean by – Finally, your response to my Q4 above – what do I need to modify?

Clarify and it will be a pleasure to help you.

Hope that helps

Joao

July 4, 2016 at 10:49 am #1071678

3b1a2f46-a516-40cf-beba-b611930e4819

Participant

This reply has been marked as private.

July 4, 2016 at 12:10 pm #1071770

3b1a2f46-a516-40cf-beba-b611930e4819

Participant

This reply has been marked as private.

July 4, 2016 at 12:49 pm #1071813

Joao

Moderator

Hi There,

I have added the login on your topbar for you. You need to go to: Appereance> Customizer > Header > Topbar Content and put the correct link there now:

<i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i><a href="tel:0845 3717 321">0845 3717 321</a> &nbsp  
<i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i> <a href="[email protected]">[email protected]</a>&nbsp  
<i class="x-icon x-icon-user" data-x-icon="" aria-hidden="true"></i> <a target="_blank" href="http://www.link.com">Login</a>

You have on the topbar content http://www.link.com replace that with your own link.

I have adjusted the best I could in order that the topbar info looks good and well aligned on all devices, please check your website here: http://responsiv.eu/

Q3:
What you are trying to accomplish requires a template customization, we would like to suggest that you use 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.

Once your child theme is ready, please try to add this code in your child theme’s functions.php file

Hope that helps

Joao

July 5, 2016 at 4:10 am #1072617

3b1a2f46-a516-40cf-beba-b611930e4819

Participant

Thanks for the topbar help Joao – looks much better!

Yes I understood the child theme part and I pasted that code in to functions – do I need to modify the code as nothing seems to happen? I imagine I need to link the new social icons to it?

thanks again, top support

July 5, 2016 at 4:25 am #1072638

Paul R

Moderator

Hi,

Yes, you need to modify the code and add your new social icons.

May I know what social icons you want to add.

Thanks

July 5, 2016 at 8:31 am #1072958

3b1a2f46-a516-40cf-beba-b611930e4819

Participant

This reply has been marked as private.

July 5, 2016 at 8:50 am #1072989

Christopher

Moderator

Hi there,

Please update code in functions.php file to :

if ( ! function_exists( 'x_social_global' ) ) :
  function x_social_global() {

    $facebook    = x_get_option( 'x_social_facebook', '' );
    $twitter     = x_get_option( 'x_social_twitter', '' );
    $google_plus = x_get_option( 'x_social_googleplus', '' );
    $linkedin    = x_get_option( 'x_social_linkedin', '' );
    $xing        = x_get_option( 'x_social_xing', '' );
    $foursquare  = x_get_option( 'x_social_foursquare', '' );
    $youtube     = x_get_option( 'x_social_youtube', '' );
    $vimeo       = x_get_option( 'x_social_vimeo', '' );
    $instagram   = x_get_option( 'x_social_instagram', '' );
    $pinterest   = x_get_option( 'x_social_pinterest', '' );
    $dribbble    = x_get_option( 'x_social_dribbble', '' );
    $behance     = x_get_option( 'x_social_behance', '' );
    $tumblr      = x_get_option( 'x_social_tumblr', '' );
    $rss         = x_get_option( 'x_social_rss', '' );

    $output = '<div class="x-social-global">';

      if ( $facebook )    : $output .= '<a href="' . $facebook    . '" class="facebook" title="Facebook" target="_blank"><img src=" http://roadskills2016.lmdev.co.uk/wp-content/uploads/2016/06/social-facebook.png"></a>'; endif;
      if ( $twitter )     : $output .= '<a href="' . $twitter     . '" class="twitter" title="Twitter" target="_blank"><img src="http://roadskills2016.lmdev.co.uk/wp-content/uploads/2016/06/social-twitter.png"></a>'; endif;
      if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square"></i></a>'; endif;
      if ( $linkedin )    : $output .= '<a href="' . $linkedin    . '" class="linkedin" title="LinkedIn" target="_blank"><img src="http://roadskills2016.lmdev.co.uk/wp-content/uploads/2016/06/social-linkedin.png"></a>'; endif;
      if ( $xing )        : $output .= '<a href="' . $xing        . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square"></i></a>'; endif;
      if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare"></i></a>'; endif;
      if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><img src="http://roadskills2016.lmdev.co.uk/wp-content/uploads/2016/06/social-youtube.png"></a>'; endif;
      if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square"></i></a>'; endif;
      if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram"></i></a>'; endif;
      if ( $pinterest )   : $output .= '<a href="' . $pinterest   . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square"></i></a>'; endif;
      if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble"></i></a>'; endif;
      if ( $behance )     : $output .= '<a href="' . $behance     . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square"></i></a>'; endif;
      if ( $tumblr )      : $output .= '<a href="' . $tumblr      . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square"></i></a>'; endif;
      if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;

Hope it helps.

July 7, 2016 at 5:18 am #1076220

3b1a2f46-a516-40cf-beba-b611930e4819

Participant

This is great, thanks you – but there is letter spacing between these then the default set.

Could we add some spacing so they are closer to the login?

thanks

July 7, 2016 at 7:23 am #1076349

Paul R

Moderator

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.


.x-topbar .x-social-global a {
    margin-right: 15px;
    margin-left: 0;
}

You may change 15px to adjust spacing.

Hope that helps.

Author

Posts

<script> jQuery(function($){ $("#no-reply-1061716 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>