Navigation

Tagged: 

  • Author
    Posts
  • #1325736

    tombo80
    Participant

    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

    #1325755

    tombo80
    Participant
    This reply has been marked as private.
    #1325852

    Rupok
    Moderator

    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!

    #1326954

    tombo80
    Participant
    This reply has been marked as private.
    #1327074

    Paul R
    Moderator

    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.

    #1327083

    tombo80
    Participant

    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

    #1327194

    Paul R
    Moderator

    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.

    #1327222

    tombo80
    Participant

    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!

    #1327396

    Rupok
    Moderator

    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.

    #1328627

    tombo80
    Participant
    This reply has been marked as private.
    #1328794

    Joao
    Moderator

    Hi There,

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

    Cheers

Join the conversation

Register or login to your account to reply.

Purchase for access

Buy a copy of X for access to our member center.

Buy