Enhancing readibility of text in slider

Hello:

First thing, thanks a lot for such a great theme (Sydney).

Since some of my slider’s pictures are with clear background, I would like to add a semi-transparent background (continuous bar) behind my main menu and behind my title and subtitle for each slide.

I tried the code below for the menu bg, but I get a bg for each word, not a continuous semi-transparent bar:

#mainnav .menu li a {
background-color: rgba(0,0,0,0.5);
}

Regarding the slider central text, if it’s impossible to add a semi-transparent background behind text, then how about dropping a black shadow behind each letter to increase readibility?

Thank you guys for your precious help!

My website: http://ho-creative.com

BR

Hello there,

For nav menu items you can try custom css code below in order to set background for present items:

nav#mainnav {
    background-color: rgba(0,0,0,0.5);
}

OR
this one in order to set background to entire nav holder:

.header-wrap .col-md-8.col-sm-4.col-xs-12 {
    background-color: rgba(0,0,0,0.5);
}

OR
entire logo and menu holder:

header#masthead {
    background-color: rgba(0,0,0,0.5);
}

To set text shadow for slider text, use custom css code below:

.text-slider-section h2.maintitle, 
.text-slider-section p.subtitle {
    text-shadow: 2px 2px 5px #800000;
}

You can use some online tool ex. http://www.cssportal.com/css3-text-shadow-generator/ in order to generate desired shadow effect.

All the Best!

Wow! You’re a life saver! Many thanks!!!

I have a question about the solution above.

I applied the CSS and it made my menu much more readable over my slider (the built in slider).

Unfortunately my additional pages have a static image and don’t require this transparent overlay for readability. On top of this, the overlay takes away from the image.

Is there any way to make the custom css apply to the first page only?

@Rene

Hello there,

Yes, you can target only home page, because home page contain home class, so basically, and of provided css can be applied only to home when using mentioned home slectore before everything else (in fact body.home), like this:

body.home nav#mainnav {
    background-color: rgba(0,0,0,0.5);
}

All the Best!

I’m trying to put a drop shadow under the menu at my site.

I’ve unsuccessfully tried both:

nav#mainnav {
    background-color: rgba(0,0,0,0.6);
}

and

nav#mainnav {
    text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.6);
}

It works just fine on the slider text:


	.text-slider .maintitle,
	.text-slider .subtitle {
		z-index: 10;
		color: #fff;
		margin: 0;
		letter-spacing: 1px;
		text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.6);
	}

(I love the theme!)

@RickSchwein

Hello,

As I can see according to text shadow on slider, you are actually trying to set text shadow on menu items. If that is the case, proper code is this one:

#mainnav ul li a {
    text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.6);
}

All the Best!

That took care of it. Thanks. The type (at 20px) is too small for the shadow to show very much, but it’s just fine.

You’re welcome Rick,

All the Best!