[Paul T]

I want to use the image:
http://test2.franciscandiscernment.org/provinceheader
as a background image to my site title and tagline (even primary menu to if I can). How can I do that? (I am using Catch Base Pro). My site is currently http://test2.franciscandiscernment.org. (I am hoping it will fill entire header space and be responsive to different platforms.)

[Mahesh]

@friarpaul: This can be done with Custom CSS. Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

#masthead {
    background-image: url("http://i2.wp.com/test2.franciscandiscernment.org./wp-content/uploads/2016/05/provinceHeader.jpg");
}

Since your background image is dark, the title and site description seems invisible. Please use the following CSS to change the text to white.

.site-title a, .site-description {
    color: #fff;
}

Note: This is upto you whether you want to change the text color or not. You can change the text color to desired color.

Regards,
Mahesh

[Paul T]

Thanks, works great… just one small thing… on my iphone, the three horizontal bars to left of title for pull down menu, do not show very bright… is there a way to make those more visible? brighter or in background? (note, i made site title and description white by the standard color options, not using the CSS). Thanks

[Paul T]

Still hoping there is a CSS code I can add to make the mobile device menu icon (horizontal bars forming block at top left of header on mobile devices that reveals the menu when touched) to be whiter… seems grey on black background not showing as boldly as I think it should…

[Mahesh]

@friarpaul: Please add the following CSS in Custom CSS:

.mobile-menu-anchor a.genericon-menu, 
.mobile-menu-anchor a.genericon-menu:hover {
    color: #fff;
}

Regards,
Mahesh

[Paul T]

Perfect! Thanks!

[Mahesh]

@friarpaul: Thank you for your appreciation. Have a nice day!!!

Regards,
Mahesh

[Author]

Posts