Slideshow is moving under my overlay-header

• 

  seachangeeditor · Member · Apr 26, 2017 at 4:13 pm

  • Copy link
  • Add topic to favorites

  Hello, I added a slideshow to my home page trying to reduce the gap between the slideshow and the top menu. I have been playing around with some code but when I change my view from tablet and phone, the slideshow is sliding under my menu. I tried reducing the size of my slideshow but couldn’t get it to work. So I ended up moving the slideshow top position to -300px and reducing my header image to max-height of 500px. I would like the slideshow to be centered in my header.

  Here is my code.

  #gallery-783-1-slideshow {
  	top: -300px;
  	background-color: transparent;
  	border: 0 !important;
  }
  
  #gallery-783-1-slideshow .slideshow-controls {
  	display: none;
  }
  
  .home-page-banner {
  	background-size: contain;
  	max-height: 500px !important;
  }
  
  .header {
  	background: rgba(0,0,0,0) !important;
  	position: fixed !important;
  }

  Is there a way to make the menu fixed and not an overlay?

  Is there a way to have the max-height of my header change when the view changes from desktop, tablet, phone? Like 500px for desktop, 300px for tablet, and 200px for phone?

  Thank you for your time and help on this topic.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Apr 27, 2017 at 3:46 am

  • Copy link

  Hi there, this is turning out to be quite the challenge. Just wanted to let you know I’m working on it and hope to have a solution in the next half hour or so.

• 

  thesacredpath · Member · Apr 27, 2017 at 4:01 am

  • Copy link

  Ok, whew! First off, remove top:-180px; from your #gallery-783-1-slideshow and also remove max-height:500px !important; from the .home-page-banner rule. Then add the following to the very bottom of your custom CSS and test on all devices and all orientations. In my testing, all seems good, but verify that and let me know.

  @media screen and (min-width: 1024px) {
    #header .row {
  	  background-color: #025E6D;
  	  position: fixed;
  	  z-index: 10;
    }
  	#gallery-783-1-slideshow {
  		top: -180px;
  	}
  	.home-page-banner {
  		max-height: 500px !important;
  	}
  }
  
  @media screen and (max-width: 1023px) {
  	#gallery-783-1-slideshow {
  		top: calc(-100vw / 3.1);
  	}
  	.home-page-banner {
  		max-height: 370px !important;
  	}
  }
  
  @media screen and (max-width: 768px) {
  	#gallery-783-1-slideshow {
  		top: calc(-100vw / 3.3);
  	}
  	.home-page-banner {
  		max-height: 300px !important;
  	}
  }
  
  @media screen and (max-width: 600px) {
  	#gallery-783-1-slideshow {
  		top: calc(-100vw / 2.6);
  	}
  	.home-page-banner {
  		max-height: 250px !important;
  	}
  }
  
  @media screen and (max-width: 480px) {
  	#gallery-783-1-slideshow {
  		top: calc(-100vw / 2.2);
  	}
  }

• 

  thesacredpath · Member · Apr 27, 2017 at 4:04 am

  • Copy link

  Oh yeah, I forgot to mention that the first rule in the 1024px media query fixes your top menu and sets a background color for it so that it is still visible when it is over the white content area. I limited this to only when the full menu is visible (1024px and wider).

• 

  seachangeeditor · Member · Apr 27, 2017 at 1:10 pm

  • Copy link

  thesacredpath, thank you for your time and help on this. @media screen is a clever rule I wasn’t aware of. This solved my problem but I noticed it changed all menus on all my pages. I added .homepage infront of #header .row . That looks like it solved my issue.

  If you have the time, I would love to know more the first rule you designed and why the top menu background color is changed. Can I set it to transparent? I didn’t see the white content area getting close to the menu because the slideshow was between them. Was this code added to help the other pages? I limited your first rule to only the homepage now.

• 

  seachangeeditor · Member · Apr 27, 2017 at 6:14 pm

  • Copy link

  I think I see what happen. Since the top menu is fixed, you need to have a background color because it stays on the page. And the z-index is used for stacking priority, I noticed my logo over some text.

• 

  thesacredpath · Member · Apr 28, 2017 at 5:45 am

  • Copy link

  Yes, you are right. When you scroll down far enough, even on the home page, the menu ends up floating over the content area, which has a white background, so the menu items sort of disappear. Adding the background color keeps them visible.