Docs

[isa1978]

hello there!
you helped me to have the logo e menu bar transparent, which is fantastic. I Love it.
however I need to ask you a slight modification because you it is a bit disturbing when you scroll and sometime you can’t read anything.
So what I would need is to keep it transparent but with a white base, let’s say a 50% opacity so you can still see through.

is that possible?
thank you so much
isabella

[Prasant Rai]

Hello Isabella,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.

div#cookie-notice {
    opacity: 0.5;
}

Thanks.

[isa1978]

hey there
thanks a lot .
but it doesn’t work… it is already transparent..but it is not the coookie notice, its’ the navigation bar and logo… this in the attachment . as you can see it’s totally transparent and you can see the blue sky. I need to see the white background but with 50% opacity.. thank you so much 🙂

[Friech]

Hi Isabella,

In that case we should not apply an opacity to your header, but have the background-color itself semi-transparent.

Please provide us the site URL so we can take a closer look.

Or show us the css code that makes your header transparent, and we will tweak it to a white semi-transparent.

background-color: rgba(255,255,255,0.5;)

Thanks.

[isa1978]

This reply has been marked as private.

[Rupok]

Hi isabella,

Thanks for writing back. You are not using Fixed Navbar so the Navbar position is static and nothing behind the Navbar hence nothing to see behind. If you use Fixed Top Navbar then you will see the effect.

Hope this makes sense.

[isa1978]

hey there! Yes I am using fixed nav bar, in fact before when the bar was transparent i was seeing through. now the only thing I want to change is to have it white and with opacity.
here attached is the code I inserted according to your instruction. did I do something wrong?

thanks a lot

[Friech]

Hi There,

Thank you for the screenshot, please see this line:

background-color: rgba(255,255,255,0.5;)important!;

Update that to:

background-color: rgba(255,255,255,0.5) !important;

The 0.5 on value is transparency, adjust that from 0.1 to 0.9 on how much do you want the transparency would be.

Another thing, I am seeing this on your Custom CSS:

 add_action('x_after_view_global__slider-below', 'welcome_message', 9);
function welcome_message() {
	if ( is_singular( 'event' ) ) {
		echo do_shortcode('[rev_slider alias="cursusactiv"]');
	}
}

add_action('x_after_view_global__slider-below', 'add_secondary_menu', 10);
function add_secondary_menu(){

	wp_nav_menu( array(
		'menu'        => 'test-menu',
		'container'   => false,
		'menu_class'  => 'x-nav custom-menu',
		'link_before' => '<span>',
		'link_after'  => '</span>'
	) );

}

That is not a CSS code, please remove that.

Thanks.

[isa1978]

FANTASTIC!!!!
I LOVE THAT it worked..
just one thing… why do you think it didn’t change in the BLOG page?
also, would it be possible to have the same opacity for the category and tag pages?
this is the link of the correct page
http://www.boundlessroads.com
and these are the link where I would love to have the same opacity
http://www.boundlessroads.com/beyond/
http://www.boundlessroads.com/tag/culture/

thanks a lot for your great help!
cheers

[Lely]

Hello Isabella,

The transparency of the navbar on blog page didn’t change because the following code is intended for pages only.

@media (min-width: 980px) {
	.page .masthead {
	    position: absolute;
	    width: 100%;
	    background-color: transparent !important;
	}
}

We can update above code to this to work on blog, category and tag pages too but it is not recommended because it will overlapped on the title of the blog page:

@media (min-width: 980px) {
         .masthead {
	    position: absolute;
	    width: 100%;
	    background-color: transparent !important;
	}
}

Try that code and see the effect.

[isa1978]

Hi Lely
thanks a lot. Yes you are right. it overlaps . what a shame. why does it do that..? it’s weird.

no solution?
thanks a lot 🙂 sorry to be a pain

[Rahul]

Never mind!

Feel free to ask us again. We are always here standing by to assist you in anyway.

[isa1978]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in!

1] In the blog page the menu bar is half way the header and it should be below.
– This issue occurred because you have added this custom css.

.blog .masthead {
    position: absolute;
    width: 100%;
}

Please remove this in your customizer.

2] In the article it’s all white and it should be transparent
– That is because the slider where inserted above the navbar. It should be added below the navbar. Please update your custom function and make use of this code:

function custom_banner() { 
 if(is_archive() || is_single()) : ?>
 <div class="x-container custom-slider" style="clear: both;">
   <?php echo do_shortcode('[rev_slider alias="post"]'); ?>
  </div>
  <?php endif; 
}
add_action('x_after_view_global__slider-below','custom_banner', 30);

Hope this helps.

[isa1978]

hello there
thanks for your reply but it still doens’t work I am replying here below your answers

1] In the blog page the menu bar is half way the header and it should be below.
– This issue occurred because you have added this custom css.

.blog .masthead {
position: absolute;
width: 100%;
}
Please remove this in your customizer.

I had tried to remove it but it didn’t work and when I put it back it was back as usual . so this one is good. no problem

2] In the article it’s all white and it should be transparent
– That is because the slider where inserted above the navbar. It should be added below the navbar. Please update your custom function and make use of this code:

function custom_banner() {
if(is_archive() || is_single()) : ?>
<div class=”x-container custom-slider” style=”clear: both;”>
<?php echo do_shortcode(‘[rev_slider alias=”post”]’); ?>
</div>
<?php endif;
}
add_action(‘x_after_view_global__slider-below’,’custom_banner’, 30);

No, it doesn’t work, the header with the logo is still white and needs to be transparent like in the other pages and the navigation bar is in the right place, above the slider. but they both need to be transparent.
could you please help?

thanks
regards

[Author]

Posts