Ethos Fixed Images and Menu

[jfbball7]

Hey Support, is there a way to add 3 fixed images in the gray bar between the menu and the blog posts? I’m fine with in the gray bar or right after it before the blog posts start. I’m trying to add 3 Images that will link to a category of posts. I am most concerned about it working on mobile.

See attached image, thanks!

[ruenel]

Hello There,

Thanks for writing 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 the child theme is set up, please add the following code in your child theme’s functions.php file

// Add custom content below the masthead
// =============================================================================
function custom_content_below_masthead() { ?>
  <div class="x-section pan" style="margin-top: 150px;">
  	<div class="x-container max width">
  		<div class="x-column x-sm x-1-3">
  			<a href="#">
  				<img src="//placehold.it/300x300" alt="my-image">
  			</a>
  		</div>
  		<div class="x-column x-sm x-1-3">
  			<a href="#">
  				<img src="//placehold.it/300x300" alt="my-image">
  			</a>
  		</div>
  		<div class="x-column x-sm x-1-3">
  			<a href="#">
  				<img src="//placehold.it/300x300" alt="my-image">
  			</a>
  		</div>
  	</div>
  </div>
<?php }
add_action('x_after_view_global__slider-below', 'custom_content_below_masthead');
// =============================================================================

Please let us know if this works out for you.

[jfbball7]

This worked perfectly!

1. Is there a way to only have this show up on the homepage and not all blog posts?

2. It looks great on desktop, but on mobile devices the three boxes run together and are slightly off center. Is there a way to center them and have some space between them on mobile devices? See attached.

Thanks Support!

[lely]

Hello There,

We can use a filter to show it on homepage only. Let’s try using this function: is_home(). Try the following code.

// Add custom content below the masthead
// =============================================================================
function custom_content_below_masthead() { 
if(is_home()){?>
  <div class="x-section pan" style="margin-top: 150px;">
  	<div class="x-container max width mobile-adjustment">
  		<div class="x-column x-sm x-1-3">
  			<a href="#">
  				<img src="//placehold.it/300x300" alt="my-image">
  			</a>
  		</div>
  		<div class="x-column x-sm x-1-3">
  			<a href="#">
  				<img src="//placehold.it/300x300" alt="my-image">
  			</a>
  		</div>
  		<div class="x-column x-sm x-1-3">
  			<a href="#">
  				<img src="//placehold.it/300x300" alt="my-image">
  			</a>
  		</div>
  	</div>
  </div>
<?php }}
add_action('x_after_view_global__slider-below', 'custom_content_below_masthead');
// =============================================================================

2.) On above code, I have added the following class: mobile-adjustment on the container. Then add the following custom CSS on Theme Options > Custom CSS

@media(max-width:480px){ /*This custom CSS will only work for 480px screen and below*/
.mobile-adjustment .x-column {
    margin-bottom: 20px; /*Add 20px space between the columns*/ 
    text-align: center; /*To center image inside the column*/
}
}

To learn more about media query see this: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope this helps. Further customization from here would be outside the scope of our support. Thank you for understanding.