Docs

[kateanita]

Hello,

I am trying to add a clickable phone number (tablet and mobile only) and email to the far right side of the header (see screenshot).

I tried the instructions in this thread, but it didn’t work. https://community.theme.co/forums/topic/how-to-add-text-element-to-header/

The website is http://dev.stapkodesign.com/

Any suggestions would be greatly appreciated.

Thank you!

Katie

[Friech]

Hi Katie,

Thanks for writing in! #1 Add a Custom Link to your menu and write the number as the link text. #2 Put a class x-hide-md x-hide-lg x-hide-xl to it, so it will only be available to mobile user.

Hope it helps, Cheers!

[kateanita]

Thank you, it’s super helpful! However, I don’t see the CSS classes form in the menu area for some reason (screenshot attached). Is there some sort of plugin I might need?

Thanks so much for your help!

Katie

[Friech]

Hi Katie,

On the Menus page top-right corner press the Screen Options and then tick the checkbox correspond to CSS Classes.

Hope it helps, Cheers!

[kateanita]

This totally worked, thank you! But how can I keep the email and phone links in the mobile and tablet versions of the header? Screenshot attached of what I’m trying to accomplish. I’ve figured out how to change the hamburger to the word “menu” but want to keep the phone number and email visible on all devices.

Website is http://dev.stapkodesign.com/

Thank you!!

Katie

[Rue Nel]

Hey Katie,

Thanks for the updates! To make sure that the phone and email links is visible in all browsers, please remove the class you have added such as the x-hide-md x-hide-lg and so on.

Hope this helps.

[kateanita]

Hi, I’m not using those classes anywhere. Because the email and phone number are part of the menu they are being hidden in the hamburger menu when it goes to tablet and mobile. Any help would be appreciated. Thanks!

[Rupok]

Hi there,

I can see the email and phone number in mobile menu as well. Did you fix that? If you have other concern then clarify a bit.

Cheers!

[kateanita]

Really? I don’t see the email or phone number showing until you open the “menu”. I want them to not be part of the menu but to actually be displayed at the top before the menu is open. Please see screenshot to see what I am trying to accomplish. Thanks!

[Christopher]

Hi there,

Copy _nav-primary.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
	
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
	ubermenu( $config_id, array( 'theme_location' => 'primary') ); 
 else: ?>

<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>
 <div class="my-class cs-hide-lg">
        <a href="tel:800.200.8253"><span>800-200-8253</span></a>
  <a href="mailto:[email protected]"><span>Email</span></a>
  </div>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
</div>

<?php endif; ?>

Hope that helps.

[kateanita]

Thanks so much for your help. This worked, but how can I change the CSS to move the “phone” and “email” down to be vertically center-aligned with the logo?

Please see the site at: http://dev.stapkodesign.com/ to see what I mean.

Additionally, the phone and email element on the left appears at desktop and mobile but disappears at tablet view. Any assistance with this would be very much appreciated.

Thank you,

Katie

[Christopher]

Hi there,

Please update this line of code :

<div class="my-class cs-hide-lg">
        <a href="tel:800.200.8253"><span>800-200-8253</span></a>
  <a href="mailto:[email protected]"><span>Email</span></a>
  </div>

To:

<div class="my-class">
        <a href="tel:800.200.8253"><span>800-200-8253</span></a>
  <a href="mailto:[email protected]"><span>Email</span></a>
  </div>

And add this CSS :

.my-class{
   display: block;
    float: left;
    padding-top: 41px;
}

Hope it helps.

[kateanita]

Worked perfectly, thank you!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[mkdigitalpt]

Hi,

I read this thread, but I still don’t understand how I can add the phone symbol on the top menu.
Now, this is what I have: http://test2.psicoajuda.com/2016/11/04/impacto-da-separacao-nos-filhos-adolescentes/

I added “contacto”, but I want to replace the text by the phone symbol.

A better possibility is to place the phone symbol and numbers on the right side of the logo (in the menu header), because it stays visible when we scroll the page.

Thanks.

Cheers.

[Author]

Posts