Adding Content Below Navbar

Support
#21

You’re welcome.

#22

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?

#23

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.

#24

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!

#25

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!

#26

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!

#27

Hi @bartenderonduty,

I would like to check but I am getting this

Do you mind deactivating wordfence temporarily so we can check.

Thanks

#28

I just deactivated wordfence.

Thank you!

#29

Hi @bartenderonduty,

I’m still locked out:

Could you please double check?

Thank you.

#30

Hello @thai, I apologize for the delay.

I didn’t see any blocked IPs or lockouts in wordfence but I went ahead and deleted the plugin and all data. Can you please check again?

Thank you!

#31

Hello @bartenderonduty,

Thanks for updating the thread. :slight_smile:

I am not able to replicate the view that you are getting on your end. Here’s a screencast that you can take a look shared in secure note. Maybe you can try to clear cache.

Thanks.

#32

Please check out my screen capture and let me know what you think. There are minor issues in both desktop and mobile views.

Thank you!

#33

Hi @bartenderonduty,

It’s not a conflict and just normal, the fixed positioning is only applied to navbar and not on the top bar. Which is why the topbar disappears upon the scroll. And the image goes under since the navbar is in fixed position (floating).

And to remove that spacing, you shouldn’t add your content within <p></p>. It should be like this

<div class="custom-content" style="clear: both; color: white; text-align: center;background-color: gray;">
		    Insert your custom content here
		</div>

Thanks!

#34

Perfect, thank you! I really appreciate your help!

#35

We are delighted to assist you with this.

Cheers!

#36

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.