Tagged: enfold, full screen slider, transparent menu
-
AuthorPosts
-
December 9, 2013 at 11:38 pm #198256
Hi – I found a previous post to make my main menu transparent using the following:
.header_bg { background: rgba(255, 255, 255, 0.6) !important; } #main { padding-top: 0 !important; }
My issue is now the slider isn’t totally full-screen. It looks like changing the top padding to 0 has slid the content that is under the full-screen slider up and now it is always visible. Is there a way to fix?
The site under development is at http://sundialdev.com/ocgirlslax/
December 10, 2013 at 12:01 am #198273Hey!
It appears to fill the whole screen in my end, can you post a screenshot of your view?
Best regards,
JosueDecember 10, 2013 at 12:06 am #198278Here you go: https://www.dropbox.com/s/a5w1qd33dkdaqli/Screenshot%202013-12-09%2017.05.42.png
Thanks!
December 10, 2013 at 5:29 am #198408Hi!
Please add this on your custom.css or Quick CSS:
#main { margin-top: -1px; }
Adjust the negative top margin if necessary.
Best regards,
IsmaelDecember 10, 2013 at 5:35 am #198411Hi Ismael – when I add that it fixes the bottom of the site, but the image no longer displays under the menu.
I tried it with both removing the current ‘#main {padding-top: 0 !important;}’ and leaving it in with no luck.December 10, 2013 at 4:46 pm #198584Hey!
What browser is this with? On my end there is no longer any top border/margin/padding like in your screenshot. So it appears correct with the 1px negative margin from Ismael’s css.
Cheers!
DevinDecember 10, 2013 at 4:56 pm #198589I Devin,
My goal is to have a semi-transparent menu sitting on top of the full-screen image. With Ismael’s solution the menu is not on top of the image. With Josue’s solution it it on top of the image, but the image does not go fully to the bottom of the screen due to the padding-top being 0px.
I’ve set it back to Josue’s solution so you can see the issue I’m having at the bottom.
December 11, 2013 at 6:19 am #198844Hi!
Please remove Josue’s code then use this instead to move the main container:
#main { top: -88px; position: relative; }
Regards,
IsmaelDecember 11, 2013 at 4:00 pm #199030Hi Ismael – thanks for the help. Unfortunately I’m still experiencing the same thing, and the image is not going all the way to the bottom of the page. It looks to me like we are going to have to add 88px to the full-screen slider somewhere, but nothing I have tried has worked.
Thanks!
JohnDecember 11, 2013 at 8:45 pm #199186I see what you mean now. You would need to remove the header from being calculated into the height of the fullscreen slideshow. You can do so in js>shortcode.js. Look for:
$.AviaFullscreenSlider.defaults = { //height of the slider in percent height: 100, //subtract elements from the height subtract: '#wpadminbar, #header, #main>.title_container' };
December 11, 2013 at 9:07 pm #199196Thanks Devin! That’s exactly what I was looking for, just didn’t know where to look.
If others need to know how to accomplish this, I removed:
#header from the //subtract elements from the height
I appreciate the help!
- This reply was modified 10 years, 10 months ago by sundialstudios.
-
AuthorPosts
- The topic ‘Transparent Main Menu with Full Screen Slider’ is closed to new replies.