-
Posts
-
Hello.
I have tried various pieces of code from the forums but have had little success.I’m using a stretched layout and have used the following quick css code:
1. removed the ‘you are here’ sub menu bar
.title_container{ display: none; }2. changed the distance between items some items
.content {
padding-top: 18px;
padding-bottom: 1px;
}3. I am also using a full page slider.
What I want to do is make the header (that has the menu items,) either
1. transparent or
2. semi-transparent.( I tried a semi-transparent PNG file but that didn’t work)
This will allow more of the image to be seen (full page images used with slider) since a part of the image is placed behind the slider.I have tried the following code with a ‘small fixed header’, which successfully makes the menu transparent:
.fixed_header #main {
padding-top: 0;
}.header_color .header_bg, #header_main {
background-color: transparent !important;
border: none;
}.header_color div {
border: none;
}However, it also moves all the items below it up resulting in the menu overlapping the content below, and a space between the bottom of the image and bottom of the screen. I guess I need an amount of padding to be added below the menu to compensate for this.
How do I:
1. make the header transparent?
2. make the header semi-transparent? (would like to try both)
3. set the page content to where it was before I used the custom CSS? (just move it down)
4. is there any code that can be added to the full width slider to make sure the image always fills the screen? – it currently has two fixed sizes and the option to use their original sizes?Link to image showing example:
http://www.tiikoni.com/tis/view/?id=afdd169Thanks
Hi Weka!
1+2) Use following code css code
.header_color .header_bg{ background-color: rgba(255,255,255,0.5); }for a semi transparent background color. The last value is the opacity value. It must be a value between 0 and 1 – i.e. 0.5 will create a semi-transparent background with 50% opacity.
3) Just revert your custom css code and clear the browser cache.
4) You can use the “Fullscreen Slider” instead of the “Fullwidth Easy Slider” (i.e. demonstrated here: http://kriesi.at/themes/enfold/homepage/home-v7-one-page-portfolio/ ). The fullsreen slideshow will always cover the entire screen.
Regards,
PeterThanks Peter.
I am using the “Fullscreen Slider”, my mistake.
I am trying to make the full screen slider cover the entire page and have the menu semi-transparent.
Current quick CSS
———————————————————————————
..title_container{ display: none; }.content {
padding-top: 18px;
padding-bottom: 1px;
}.fixed_header #main {
padding-top: 0;
}.header_color div {
border: none;
}.header_color .header_bg{
background-color: rgba(255,255,255,0.3);
}
———————————————————————————Your code works, but in order for me to make the images using a fullscreen slider appear at the very top of the page I have to add the padding code in: (otherwise they start below the menu.
.fixed_header #main {
padding-top: 0;
}When I do this, it creates a gap at the bottom of the page, even when using a fullscreen slider.
Any ideas?
Thanks
I am also trying to do something similar. How do you make it so the transparent menu covers the full screen slider, but this only happens on the homepage as other pages won’t have full screen sliders?
Hi!
Can you post the link to your website so we can check what type of header you are using? You can try adding following code to Quick CSS in Enfold theme options under Styling tab
.home #main { padding-top: 0!important; }Cheers!
YigitThanks, I was able to make it work. I added the + 88 to the js for the full screen slider and the custom padding css you suggested and it worked like a charm.
Thank you so much!
I was wondering though. Is there some way to make it so that when you move you mouse over a menu item, it highlights the whole menu section behind it in a certain color, like the menu on this page: http://mrsgreens.com
Hey!
Please add following code to Quick CSS as well and adjust as needed
.main_menu li:hover { background-color: red; }Regards,
YigitI love you man! Thank you!
I love how customize-able this theme is. I really, really, really wish there was a wiki of standard css codes (background color: value – will change the background color) and a list of headers for enfold with descriptions as to what each does (.main menu – main menu section / li:hover – tell’s the code to apply on hovered text). This way you could just make changes to your heart’s content! I love it. It’s also the reason I tell my friends to purchase this theme.
Hi!
Please take a look at this link http://www.w3schools.com/css/ and this link https://developers.google.com/chrome-developer-tools/
You can right click on any element you would like to customize and click Inspect Elements on Chrome or Firefox to find which class or ID to target, then you can apply custom CSS code in Quick CSS.
You are welcome! Let us know if you have any other questions or issuesBest regards,
Yigit
- The topic ‘Enfold | Header Transparency with Full Page Slider’ is closed to new replies.