Tagged: , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • December 9, 2013 at 11:38 pm #198256
    sundialstudios

    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 #198273
    Josue

    Hey!

    It appears to fill the whole screen in my end, can you post a screenshot of your view?

    Best regards,
    Josue

    December 10, 2013 at 12:06 am #198278
    sundialstudios

    Here you go: https://www.dropbox.com/s/a5w1qd33dkdaqli/Screenshot%202013-12-09%2017.05.42.png

    Thanks!

    December 10, 2013 at 5:29 am #198408
    Ismael

    Hi!

    Please add this on your custom.css or Quick CSS:

    #main {
margin-top: -1px;
}

    Adjust the negative top margin if necessary.

    Best regards,
    Ismael

    December 10, 2013 at 5:35 am #198411
    sundialstudios

    Hi 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 #198584
    Devin

    Hey!

    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!
    Devin

    December 10, 2013 at 4:56 pm #198589
    sundialstudios

    I 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 #198844
    Ismael

    Hi!

    Please remove Josue’s code then use this instead to move the main container:

    #main {
top: -88px;
position: relative;
}

    Regards,
    Ismael

    December 11, 2013 at 4:00 pm #199030
    sundialstudios

    Hi 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!
    John

    December 11, 2013 at 8:45 pm #199186
    Devin

    I 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 #199196
    sundialstudios

    Thanks 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!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Transparent Main Menu with Full Screen Slider’ is closed to new replies.