Freeze Revolution Slider above Masthead

Support
#1

Hi All,

I’m looking for the easiest way to do this, and the way I ask for might not be the easiest to implement and maintain, so let me know if there is a better way.

Pages at realhdr.com need to have an image at the top that contains a logo, with the navbar below the image. I’m using a Rev Slider now only because a wide image needs to appear on desktop and a narrow image needs to appear on mobile, like this:

Desktop:

Mobile:

The thing I need that I don’t have right now is a way to lock the Rev Slider to the top of the page so that scrolling the desktop leaves the logo at the top with the navbar below it, but keeping the image and navbar responsive to desktops and mobiles. Having the logo and navbar scroll completely off the mobile like it does right now is fine.

The navbar now is stacked with the logo turned off. I don’t need any “slider” features, so will be glad to adapt the stacked navbar if you can show me how to rig it with one image for mobile and a different one for desktop. Or I can add css or php to lock the rev slider into place if that’s a better alternative. I use a child theme, so changing a file is not a problem.

It’s hard to remember what I did without X and your great support!

Alan

#2

Hi There,

Instead of using Revolution Slider, use the image on your stacked header and to change the logo for mobile you can add the following Javascript to Theme Options JS

(function($) {
  if ($(window).width() < 980) {
    $(".x-brand img").attr("src", "http://kammscafe.com/wp-content/uploads/2016/03/kamms-cafe-logo-horizontal.png")
  }
})(jQuery);

Let’s change the URL of image with your another version of logo’s URL.

Once you do that, you can reach us for further adjustments.

Cheers!

#3

Thanks. It needs a lot of those further adjustments you mentioned! :grinning:

  1. The logo image still scrolls off the top of the page and the navbar is sticky, just like when the slider was above the masthead. A logo image that sticks to the very top of the desktop page with the navbar stuck to the bottom of the logo image is what I need.

  2. Neither image is responsive; both sizes are static.

  3. The 1200x200px desktop logo is stuck in what looks like about a 50px high div. I inspected it and see .x-brand img {width:600px;}. I can turn that off in the Inspector and the 1200x200 image goes to full height and padded to the right, but we still need it to be responsive like the picture of the girl below the navbar. I can’t locate any .x-brand img statement in any of the limited css I’ve added, and yours is the only js I’ve manually put in.

  4. The 800x200px mobile only activates when the js runs on a page refresh, but can we make it so that it doesn’t need a refresh in case a mobile user crosses the size boundary when they rotate their device?

  5. I really don’t mind the rev slider if we can lock it into place; it already knows how to be full-time responsive.

  6. I left the images in place with your js in Theme Options > js

#4

Hi There,

Javascript just runs once the browser starts, so it will work on mobile or if your browser starts small, but won´t respond to re-size.

You can make your logobar sticky and navbar looks similar to what you want by adding the following CSS to theme options CSS

.x-brand img {
    
    width: 100%;
}
.x-logobar .x-container {
  width: 100% !important;
  max-width: 100% !important;
}
.x-navbar.x-navbar-fixed-top.x-container.max.width {
  width: 100%;
}
@media(min-width: 969px) {
.x-navbar {
margin-top: 100px;
}
.x-logobar {
position: fixed;
top: 0;
right: 0;
left: 0;
}
}

Revolution Slider cannot be sticky, and also the logobar itself is not made to be sticky, unfortunately providing further customizations would be out of the scope of our support, I recommend you hiring a developer to help you to achieve the looking you are looking for or being flexible to a different layout.

Hope it helps