4 comments

Hi Templatedeck,

I've purchased your template and it's looking great on desktop but it's got a few issues when displaying on small devices.

I thought maybe I messed up but even the Live Previews on WrapBootstrap show issues when you switch to small device mode in Chrome.

Do you have any upgrades planned that might address its use on small devices?
Answering my own question :)

O'Bannon uses a parallax scrolling JS called skrollr but that library seems quite dated now and the author no longer supports it saying this in its github page:

"skrollr hasn't been under active development since about September 2014 (check out the contributions graphs on https://github.com/Prinzhorn/skrollr/graphs/contributors) and I don't have any plans for doing major changes to it. Please consider this before using skrollr in production as problems with new browser versions, especially on mobile, will most definitely surface. "

It's a shame as I really love the look of the O'Bannon template on desktop browsers. I wonder how difficult it would be to replace the skrollr with some other animator?
I found a replacement for the now deprecated skrollr JS library: AOS.

To get it working you need to import the AOS css and js and initialize it skrollr was previously initialized. Then...

I changed the menu "nav" element to have this:

<nav class="navbar navbar-inverse navbar-transparent wow fadeIn"
data-aos="bgfade"
data-aos-anchor="#menu-bg-trigger"
data-aos-anchor-placement="top-top"
style="border-bottom:1px solid rgba(255,255,255,.1);"
>

and added this to my CSS:

// AOS background transition to almost opaque
[data-aos="bgfade"] {
background-color: rgba(0,0,0,0);
transition-property: background-color;
}

[data-aos="bgfade"].aos-animate {
background-color: rgba(0,0,0,0.9);
}

and now O'Bannon works on mobiles!!!! Whoooohooooh!
and one more thing I forgot to mention...

Add id="menu-bg-trigger" to the hero div

<!-- Hero area -->
<div class="wrapper-shadow"
id="menu-bg-trigger"
>

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase

$20
25Purchases

Licenses: Details »

Single application $20
Version:1.0.2.1
Type:
  • HTML Template
Bootstrap: Compatible with 3.3.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Category:
Labels: animate, app, bower, css3, landing page, parallax, sass, slider
Item#:WB0292T0K
Released:2 years ago
Updated:2 years ago
Sold exclusively on WrapBootstrap
templatedeck

templatedeck

Signed up 5 years ago

Need an admin template?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running:

  • Responsive 12-column grid
  • 12 custom, modular jQuery plugins
  • CSS styles for forms, navigation & more
  • Dozens of reusable components
  • Components are scaled according to a range of resolutions and devices
  • Built with Sass (CSS included)
  • Complete styleguide documentation