Issues with transparent header & blog customization

  1. I have made the header transparent. On mobile it is not proper. I would like to add a background to the header only on mobile that too when the menu is active
  2. On the blog page(default blog template, I would like to add a hero section) like it is there for the rest of the site. Link in secret note.
  3. Also, in the header, the menu items are not properly inline(On macos). Some appear up while some appear lower.

Hello @Faizan,

Thanks for writing in!

1.) To add a background color for mobile and make your header only transparent in smaller devices, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
    .x-navbar {
        background-color: #3e4750 !important;
    }
}

2.) To add a hero section for the blog index and for the archive pages as well, please do the following:

  • Go to X > Global Blocks and create your desired hero section.
  • And then, please add the following code in your child theme’s functions.php file
// Add custom blog hero for Integrity stack
// =============================================================================
function add_blog_hero(){ ?>
  
  <?php if ( is_home() || is_archive() ) : ?>

    <?php echo do_shortcode("[cs_gb id=123]"); ?>

  <?php endif; ?>

<?php }
add_action('x_before_view_integrity__landmark-header', 'add_blog_hero');
// =============================================================================

Just make sure that you have replace the shortcode [cs_gb id=123] with the correct shortcode of the global block that you have created. To know more about Global Blocks, please check this out: https://theme.co/apex/forum/t/global-blocks/24723

3.) I cannot replicate this issue. Please send us a screenshot so that we will have an idea of how it looks like and find out what is going on.

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

I want the background color to be changed only when the menu is active and not always. This CSS adds the color in all cases.

This worked fine.

[quote]
3.) I cannot replicate this issue. Please send us a screenshot so that we will have an idea of how it looks like and find out what is going on.[/quote]
I will check this out what’s going on. I couldn’t replicate from my side but I saw it on someone else’s mac.

4.) Would like to add another thing. There’s a video(background) on the homepage of the site. It goes blank on mobile.I know many browsers block it, but what do I do to put a fall back image in such case? Thanks.

Hello @Faizan,

1.) Please use this code instead:

@media(max-width: 979px){
    .x-nav-wrap.mobile {
        background-color: #3e4750 !important;
    }
}

4.) Please insert a video poster image so that when the video is disabled in smaller screens, the poster image will display.

Hope this helps.

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