How to get just the custom header transparent

Support
#1

Hi there =)

I am experimenting with the new custom headers in X Pro and I try to get it transparent. Even though I set the background color of the bars transparent, its still white. If i insert

.site {background-color: transparent}

I almost get what I want. But all the content is also transparent. I just want the header to be transparent. How do i achieve that?

#2

Hello,

Please, to check it and provide to you the correct custom code, may you share your website link in a secure note?

#4

Hi there,

Adding Transparent header is possible exactly by changing the background color of the bars to transparent. But anyway you need to have some content behind it as the browser default color will show which is white.

Usually the transparent option works while setting the bar to be sticky and the content will go behind the main header.

If you need further assistance kindly get back to us with the URL/User/Pass of your website added by a Secure Note and a screenshot of what you want to achieve.

Thank you/

#5

Thanks for the reply =)

I still don’t understand, how to achieve my goal. I tried to make the bar, that I already set to be sticky (orange navbar) to transparent, but it still just turns white.

If i put in this code .site {background-color: transparent} in the costume css of the header its almost, as i want it to be. But the content under the header also is transparent which i’d like to be white as usual. Without the code the content is just how i want it but the header is white too which i want to be transparent.

I put it together in photoshop to provide a clear vision:
http://wegerfinder.de/wp-db684-content/uploads/2017/06/Bildschirmfoto-2017-06-29-um-13.40.04-II.png

Is there any workaround to achieve that?

This is the site i am talking about: http://wegerfinder.de

#6

Hi again,

Try adding the following CSS code in your Customizer:

.hm9.x-bar {
    background-color: transparent !important;
}

Let us know how this goes!

#7

Thanks =D

It just worked for the orange bar. It got transparent, but the problem still remains.

#8

Hi again,

You can try updating the previous code with the following code:

.entry-wrap {
    background: #fff;
}
.hm9.x-bar {
    background-color: transparent !important;
}

Let us know how this goes!

#9

Still the same…

#10

Hello There,

Do you want something like this, http://prntscr.com/fqk27k ?

If that is the case, please make sure of this code:

body .site,
.hm2.x-bar-container,
.hm9.x-bar {
    background-color: transparent !important;
}

Hope this helps. Kindly let us know.

#11

Yes, that is what i want to achieve, but the code you provided does exactly the same as:

.site {background-color: transparent}

The content below the sidebar gets transparent, too. :confused:

#12

Hi again,

Please add the following code in your Child Theme’s style.css file instead and remove the previous customization from your Customizer:

body .site,
.hm2.x-bar-container,
.hm9.x-bar {
    background-color: transparent !important;
}
.entry-wrap {
    background: #fff;
}
.hm6.x-bar.x-bar-fixed {
    background-color: transparent !important;
}

Let us know how this goes!

#13

Thanks for the advice!

It worked well, even without

.hm6.x-bar.x-bar-fixed {
    background-color: transparent !important;
}

But, now i have another problem. My category descriptions are transparent, too. And there is a transparent bar at the bottom of each category site. Is it possible to change that back to white?

to make the category description possible I added _content-post-header.php to my child theme with the code

<header class="entry-header">
  <?php if ( is_single() ) : ?>
    <h1 class="entry-title"><?php the_title(); ?></h1>
  <?php else : ?>
    <h2 class="entry-title">
      <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a>
    </h2>
    <div class="center-text"><?php echo category_description(); ?></div>
  <?php endif; ?>
  <?php x_icon_entry_meta(); ?>
  <?php if ( get_post_format() == 'quote' ) : ?>
    <p class="entry-title-sub"><?php echo get_post_meta( get_the_ID(), '_x_quote_quote', true ); ?></p>
  <?php endif; ?>
</header>

and i added this to the functions.php

add_action('x_before_view_global__index', 'icon_archive_title');
function icon_archive_title () {
if( is_category() ) : ?>
  <?php $title    = ( $meta['archive-title']    != '' ) ? $meta['archive-title']    : single_cat_title("", false); ?>
  <header class="x-header-landmark x-container max width">

    <?php echo category_description(); ?>
  </header>
<?php endif;
}

How can I achieve a white background for my category sites, now that I changed the settings of the x-bar as i wished it to be?

#14

Hi There,

Regarding the transparent gap on the bottom of the archive page, please update this block:

body .site,
.hm2.x-bar-container,
.hm9.x-bar {
    background-color: transparent !important;
}

to this:

body:not(.archive) .site,
.hm2.x-bar-container,
.hm9.x-bar {
    background-color: transparent !important;
}

Actually you can remove the selector .hm2.x-bar-container, and .hm9.x-bar if you already set the transparent background-color on your bar and container from the builder.

That CSS code above might also address the issue about “category descriptions” since that makes the CSS code not to apply on category pages. However, I am not entirely certain of this issue as I don’t see any “category descriptions” on your archive page. Please clarify and perhaps provide us some screenshots.

On other note with your child theme, please make sure that the stylesheet header is always on top, not like this (http://wegerfinder.de/wp-db684-content/themes/pro-child/style.css)

Thanks,

#15

THANKS!!!

I’ve made it happen with you guys!

body:not(.archive) .site,

The possibility to omit certain places (don’t know the right term :sweat_smile: ) of my site from the code made the difference. I have changed my code to

body:not(.archive, .single-post, .category) .site,
.hm2.x-bar-container,
.hm9.x-bar {
    background-color: transparent !important;
}
.entry-wrap {
    background: #fff;

The category descriptions were white again after adding .category to the :not( ). And after i found the right direction for my blogposts (.single-post) the comment section wasn’t transparent anymore.

If i remove the .hm2.x-bar-container, and .hm9.x-bar the header is white again. So this didn’t work. But now its all set :blush:

I still can not set any colors to not sticky bars in the header, because its all transparent, but i will find a workaround with a background image colored the same way like it to be.

Thanks so much. We made it!

#16

Thanks for letting us know!

#17

I just found out, that it worked all well on my mac and safari. But i opened it on Win7 and Chrome and Firefox. The background in this browsers is still white. How to make this setting global to all Browsers and Systems? Is there a way or do you see a problem?

I appreciate your help!!!

#18

HI there,

I checked your code and you’ve a missing curly bracket at the end of the code, and the syntax looks incorrect please change it to:

body:not(.archive):not(.single-post):not(.category) .site,
.hm2.x-bar-container,
.hm9.x-bar {
    background-color: transparent !important;
}
.entry-wrap {
    background: #fff;
}

If this doesn’t help then please share some screenshots of how you’re seeing it in windows OS? It would be better if you provide some screenshots of Mac also just for the comparison.

Thanks!

#19

This made the difference. It works now on chrome an my mac. Before the change it wasn’t transparent in chrome. But now it is. I will try it later today on Win7 and other browsers. But i am happy about the changes now.

Thanks so much! :grin:

#20

Glad we could help.

Cheers!

#21

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