Adding Content Below Navbar

Thank you! Unfortunately this did not appear to work – no text is displaying below the masthead. Can you make another suggestion?

Thanks again!

Hello @bartenderonduty,

The code should have work because I have tested it before giving it to you. You may have a different set up. Would you mind providing us the url of your site with login credentials so we can take a closer look?
To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you.

Thank you!

Hi @bartenderonduty,

I don’t see that code implemented, or perhaps it’s a file system issue as I can’t save the changes either. Would you mind providing the FTP credentials too?

Thanks!

I apologize, I removed the code after I tested it and found it didn’t appear to work. I went ahead and re-added it just now.

Can you please check again?

Thank you!

Hi @bartenderonduty,

Sorry, the hook should be x_after_view_global__slider-below and not x_after_view_global__slider-below

I went ahead an change the code to

// Custom content below navbar
// =============================================================================
function custom_content(){ ?>
    
    <p>Insert your custom content here</p>

<?php }
add_action('x_after_view_global__slider-below', 'custom_content');

Please check in your end.

For more info, please check the link below

Thanks

Thank you!

Looks good, however the issue I’m having is the bottom bar is closing when scrolling. Is there any way to simply attach it to the bottom of the nav bar so it doesn’t close and is always visible with the nav bar?

Please let me know if you can help accomplish this.

Thanks again!

Hello @bartenderonduty,

In that case, please make use of this code instead:

// Custom content below navbar
// =============================================================================
function custom_content(){ ?>
    
    <p>Insert your custom content here</p>

<?php }
add_action('x_after_view_global__nav-primary', 'custom_content');

We would loved to know if this has work for you. Thank you.

Thanks for your help!

Unfortunately that didn’t work either – nothing is appearing below the navbar.

Can you make another suggestion?

Hi There @bartenderonduty

How about adding your content using JavaScript ? You can add the following code into your page’s JS area or X -> Theme Options -> JS area and see if that helps.

jQuery(function() {
  jQuery( '<p style="color:red;">This is my content</p>' ).insertAfter( ".x-navbar-inner" );
});

Hope that helps.

Hey @bartenderonduty,

It is working but you are not seeing it because of the black color.
I went ahead and updated the code into this:

// Custom content below navbar
// =============================================================================
function custom_content(){ ?>
    <div style="clear: both;">
	    <p style="color: white;">Insert your custom content here</p>	
	</div>

<?php }
add_action('x_after_view_global__nav-primary', 'custom_content');
// =============================================================================

Check your site now.

Yes, that’s perfect! Thank you!

I tried the javascript code as well but that caused some issues with the navbar on scroll. Your solution works great! And yes, I didn’t see it because it was black text over a black background. I was expecting to see the text below the navbar.

Just to clarify, was the code only added to the functions.php file in the child theme?

Hi @bartenderonduty,

Yes, it’s added to child theme’s functions.php, it shouldn’t be affected by updates or affect other files.

Thanks!

Great, thank you!

You’re welcome.

Hey Themeco Team, I’ve got one more question for you about this…

Can you suggest a way to make this content area we added span the full width of the browser window, like the navbar does?

Hello @bartenderonduty,

The code I gave will no longer apply if you want to have a fullwidth for the custom content. You will need full modifications of the navbar. Assuming you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

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


        <div class="custom-content" style="clear: both;">
		    <p style="color: white;">Insert your custom content here</p>	
		</div>

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

<?php endif; ?>

3] Save the file named as _navbar.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/.

Off course you will need to create the folder path since it does not exist yet in your child theme.

We would loved to know if this has work for you. Thank you.

Hello @RueNel,

Thank you for the code, unfortunately it appears to be conflicting with the navbar on both desktop and mobile. Can you take another look?

I appreciate your help!

Hi @bartenderonduty,

May I know what conflict you’re getting? Or have you removed the code as I can’t find anything? Would you mind providing your admin login credentials in the secure note? I can’t find the thread where your credentials are posted.

Thanks!

Hi @Rad, yes I have removed the code. Please see the screenshots below for samples of the issues. The gray section is the code implemented.

Navbar – Desktop View:

Navbar – Desktop View on Scroll:

Navbar – Mobile View:

Thank you!