Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You need to link your website
HI Andrew.
Thanks for the quick response. The Website is exactly as the theme: Listify.
I have barely made changes to it.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
So what you’re saying is you want the blue background colour around the <header> element to be white?
Thanks Andrew.
No Sir. I would like to make the menu to have a transparent background.
For example if you see Yellow Pages the Logo, Sign In and Join In elements are literary seating on top of the slider.
Im assuming the menu background is transparent.
Tried using Firebug to get it and test its transparency but it returns a white background:
.search-overlay, .primary-header {
background-color: transparent;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
So you want to get rid of the blue background colour and move the header information on top of the slider? This isn’t as simple as it sounds and requires knowledge of how your theme works.
Yes to the first part. Definitely get rid of the blue. The image you see of the bridge is a featured image type not a slider. I know i mentioned slider, but i was trying to give context.
It’s literary a page which allows to add a featured image, which is what you see there.
The guy who developed the theme is saying its a few lines of css code but is unwilling to give theme to us.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Do you want to get rid of the fixed position on the header at the same time?
No sir. I just want it to be transparent that’s all.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then do the following:
- Install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin
- use its “CSS Code” section of the dashboard to hold your CSS modifications:
-
(put this code in)
.site-header {
position: fixed;
width: 100%;
}
- Save
Alternatively use your Child Theme style.css file to hold your CSS modifications
I have a child theme.
Thanks for the code but does this eliminate the header background color?
Perfect for keeping the header up top. Just need to make it transparent now boss. 🙂
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Forgot about that bit. Replace that code with this:
.site-header {
position: fixed;
width: 100%;
}
.primary-header,
.main-navigation,
.site-header {
background: none;
}
.fixed-header {
padding-top: 0 !important;
}
.fixed-header .primary-header {
position: relative;
}
Now you have to consider what happens when you scroll down.
DUUUUUDE! Perfect!
Thank you so much man.
Would the background coming back in on scroll be a big issue?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Yes that’s not a CSS fix, that’s a JS fix.
Ok. No worries. This is amazing. So grateful Andrew. Honestly. Spent hours on this.
Cheers mate.
