Adding Content Below Navbar

Support
#1

Hi Themeco Team,

Could you provide me with a way to add HTML or text content below the navbar/header as shown in the attached mockup? So it would be like the topbar area, but also below the navbar. I see this style in ecommerce websites a lot and am hoping you can help make this possible with X.

Thank you!

#2

Hello @bartenderonduty,

This is possible using a child theme.
Please check this thread for detailed guide:

On the suggestion, we just need to change this part: <p>Insert your custom content here</p> with the HTML code of your preferred extra content.

Hope this helps.

#3

Thank you! I did a search of the forums but for some reason was unable to find the post you referenced. I appreciate you sharing this.

Is there any way to keep the content below the nav bar from collapsing when scrolling?

#4

Hey @bartenderonduty,

That is technically possible. However, that would fall beyond the scope of our support since it would require custom development. You need to contact a 3rd party developer to help you with this.

Thank you for understanding.

#5

Understood. Would you at least be able to tell me where the navbar files are located in the theme so I can try to figure this out myself? Seems like whenever I hire a developer to work on X they mess something up (I’m actually rebuilding my site for that exact reason).

I’m thinking I can append the code you provided above to the navbar code. I suppose it’s worth a shot. I spent a bit of time looking through the theme files but was unable to locate the code specific to the navbar.

Appreciate any additional help you can provide.

Thank you.

Hook Name and Stuff
#6

Hello @bartenderonduty,

Editing the navbar file will not help either. It is not the right file. I would highly recommend that you use this code instead:

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

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

The x_after_before_global__slider-below filter will allow you to insert any content before the slider below the masthead.

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

#7

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

Thanks again!

#8

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.

#9

Thank you!

#10

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!

#11

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!

#12

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

#13

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!

#14

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.

#15

Thanks for your help!

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

Can you make another suggestion?

#16

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.

#17

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.

#18

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?

#19

Hi @bartenderonduty,

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

Thanks!

#20

Great, thank you!