[tombo80Participant]

Hello,

I’m trying to get a strapline on a clients site underneath the menu which is currently set to the top right of the nav bar.

Is there any way to do this. I am using a child theme and details for you to access will follow 🙂

Thanks in advance!

Tom

[tombo80Participant]

This reply has been marked as private.

[RupokMember]

Hi Tom,

Thanks for writing in! Do you have any mockup of what you are trying to accomplish? I can’t see any strapline on the right of the nav. A screenshot would be appreciated.

Cheers!

[tombo80Participant]

This reply has been marked as private.

[Paul RModerator]

Hi,

To achieve that, create file _nav-primary.php in wp-content/themes/x-child/framework/views/global and copy the code below into that file

<?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>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>  
  <div class="strapline">TRANSFORMING PEOPLE TO REACH THEIR FULL POTENTIAL AND MAXIMISE PERFORMANCE AT WORK</div>
</nav>

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

<?php endif; ?>

Hope that helps.

[tombo80Participant]

Thanks for that, the text is in there now but I wanted it on the bottom right as the screengrab. Is that possible please?

Cheers

Tom

[Paul RModerator]

Hi Tom,

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

.x-nav-wrap.desktop {
    display: block;
    float: right;
}

.strapline {
   position:absolute;
   bottom: 30px;
   color:#fff;
}

Hope that helps.

[tombo80Participant]

Nearly there! An odd thing happens with the menu now, on resize the menu stays on screen even though the hamburger menu pops up too.

P.S. You guys really do have great service!

[RupokMember]

Hi there,

Thanks for writing back. Let’s add this CSS as well :

@media only screen and (max-width: 979px) {
.x-nav-wrap.desktop {
  display: none;
}
}

Hope this helps.

[tombo80Participant]

This reply has been marked as private.

[JoaoModerator]

Hi There,

You had entered a incomplete code, it is not fixed.

Cheers

[Author]

Posts