Would like to move post carousel below my site header.nav bar

Support
#1

Hello. I am wanting to move my post carousel below my nav bar. I need step by step directions on where to start to accomplish this. Once I get that move right below my nav bar, I then want to hide the carousel on any blog posts.

Thank you,
LS

#2

Hello There,

Thanks for posting in!

Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Once you have your child theme active and ready, please follow the following 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/ETHOS/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Ethos.
// =============================================================================

?>

<?php x_get_view( 'global', '_header' ); ?>

  <?php x_get_view( 'global', '_slider-above' ); ?>

  <header class="<?php x_masthead_class(); ?>" role="banner">
    
    <?php x_get_view( 'global', '_topbar' ); ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
    <?php x_get_view( 'ethos', '_breadcrumbs' ); ?>

    <?php if ( ! is_single() ) : ?>
      <?php x_get_view( 'ethos', '_post', 'carousel' ); ?>
    <?php endif; ?>
    
  </header>

  <?php x_get_view( 'global', '_slider-below' ); ?>
  <?php x_get_view( 'ethos', '_landmark-header' ); ?>

The code above moves the post carousel right below the navbar. I also added a condition that the carousel will not display on any of the single blog posts.

3] Save the file named as wp-header.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/ethos/ or wp-content/themes/pro-child/framework/legacy/cranium/headers/views/ethos/ if you are using Pro theme.

You will have to create the folder path first because it does not exist in your child theme yet.

Hope this helps. Please let us know how it goes.

#3

I completed the changes as you mentioned. All of it worked except the carousel being removed from all blog posts. Is there something else that would make that work?

#4

Hello There,

The code works to moved the carousel under your navbar and will not display in the single blog post. Right now, when you view your single blog post like the one in the secure note, you are seeing the feature image. This is not the post carousel anymore. Do you want to remove the featured image in single blog post as well? If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-post .entry-featured {
    display: none
}

Hope this helps. Please let us know how it goes.

#5

The issue was that it was not updating the code. It is now.

  1. How do I get the image and text that does displays on blog posts centered for all blog posts?

  2. How do I get rid of links on the right-hand side such as recent posts, recent comments, etc?

#6

Hello @4hisglory,

Thanks for updating thread.

  1. To center align image and text please use following CSS under X > Launch > Options > CSS:

.single-post .entry-featured{text-align: center; display: block;}

It’s also written that you want to center align text also. I don’t think that would look visually appealing. However, if you would like to center align the text, please add following CSS:

.single-post .entry-wrap {text-align: center;}

  1. You can refer sidebar items from Appearance > Widgets.

Thanks.

#7

This is what I am referring to. The image centered on the page with the text centered in a block style under the image. https://wellnessmama.com/26215/new-years-resolutions/

#8

Hello @4hisglory,

Thanks for updating the thread and elaborating the query.

Please add following CSS under X > Launch > Options > CSS:

.single-post .x-sidebar.right {display: none;}

.single-post .x-main.left {width: 80%; max-width: 750px; display: block; float: none; margin-left: auto; margin-right: auto;}

After that change the body background color under X > Launch > Options > Layout And design > Background Options > Background Color.

Thanks.

#9

It now appears to have left a grey block on the right now. I did change the color as you mentioned, but it left a grey block on the right.

#10

Hi There,

Sorry, I am not seeing that gray block on my end.


Please clear your browser’s cache.

You can add this custom CSS to blocked align the featured image with the content text.

.single-post .entry-featured img {
	width: 100%;
}

Hope it helps,
Cheers!

#11

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