- This topic has 6 replies, 2 voices, and was last updated 5 years, 9 months ago by Andrew Misplon.
- AuthorPosts
- December 18, 2018 at 7:59 pm #11170
KarenParticipantHi Andrew,
You replied to me yesterday on this (#post-11164) but asked me to start a new thread, so here it is ๐
I’d like a transparent background on the main menu bar for a new site I am building. I’m not using any sliders, just large static images on the pages.
My client wants a homepage like this one: https://bit.ly/2A4Dz5s and my dev site is here: http://wordpress.karendgroves.com/.
Is this option available in the premium version or will it need to be fixed via CSS?
Thanks, Karen
December 19, 2018 at 5:11 am #11171
Andrew MisplonKeymasterHi Karen
Here is a place to start from:
@media (min-width: 1024px) { .home .site-header { background: rgba(255, 255, 255, 0); color: #fff; margin-bottom: -112px; } .home .site-header .site-branding h1.site-title { color: #fff; } .home .main-navigation a { color: #fff; } }
Further changes will probably be needed but hopefully this helps you get going.
December 19, 2018 at 10:31 am #11172
KarenParticipantHi Andrew
That worked perfectly, thanks! I made a small tweak to get it to apply to all pages (removed .home), which seems to work ok.
@media (min-width: 1024px) { .site-header { background: rgba(255, 255, 255, 0); color: #fff; margin-bottom: -112px; } .site-header .site-branding h1.site-title { color: #fff; } .main-navigation a:link, .main-navigation a:active, .main-navigation a:visited, .main-navigation a:hover { color: #fff; } }
December 19, 2018 at 11:01 am #11174
KarenParticipantQuick follow up question.
How do I find out the page name, so for example, in your original CSS, the class was
- .home
If I want to make this kind of change to a single interior page, called Bookings for example how do I isolate the page name/class? I was testing this on another site for a page that is not the homepage. For example, this age: http://www.emmahollandmountaintraining.co.uk/outdoor-coaching/
Thanks, Karen
December 19, 2018 at 11:10 am #11177
Andrew MisplonKeymasterHi, sure itโs in the body tag of the page. Right click and inspect and then check the body tag, itโll be something like .page-id-x
December 19, 2018 at 11:20 am #11178
KarenParticipantAh, found it. Thanks for the fast response. Brilliant support Andrew!
December 19, 2018 at 12:17 pm #11181
Andrew MisplonKeymasterSuper ๐ Glad that helped.
All the best.
- AuthorPosts
You must be logged in to reply to this topic.