Question posted in
The full documentation can be found here.

WordPress Divi Builder: nav bar turn from transparent to white upon scrolling or reaching a certain point on the page

so i’m redesigning our companys wordpress webpage with the divi builder and for the last two days i was searching for a way to get the nav bar to change css class upon scrolling.

I found a lot of info about this topic on various sites including stackoverflow but i can’t seem to find a solution specific to the Divi builder.

i tried to mess around with the provided html, css and javascript from this link and some other sites, but i can’t get it to work:

http://codepen.io/taylorleejones/pen/KJsvz

HTML:

<nav class="nav">
  <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

CSS:

.nav {
    background-color:transparent;
    color:#fff;
    transition: all 0.25s ease;
    position:fixed;
    top:0;
    width:100%;
    background-color:#ccc;
    padding:1em 0;
    /* make sure to add vendor prefixes here */
}

.nav.past-main {
    background-color:#fff;
    color:#444;
}

#main {
  height:500px;
  background-color:red;
}

#below-main {
  height:1000px;
  background-color:#eee;
}

Javascript:

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll',function(){

    // we round here to reduce a little workload
    stop = Math.round($(window).scrollTop());
    if (stop > mainbottom) {
        $('.nav').addClass('past-main');
    } else {
        $('.nav').removeClass('past-main');
   }

});

Here is an example how the result should turn out:

https://www.arvato.com/de.html

I want our nav bar to do the same thing, be transparent when on top and turn white when scrolling down or reaching a certain point.

I guess my biggest problem is that i don’t know where add html in divi.

Thanks in advance for the answers and help.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Okay after a good 1-2 hours of debugging a coworker and i managed to make it work.

    The problem is you can't add html direcly in divi, so we used some Javascript to get around that, made some small adjustments to the CSS and the jquery link was at the wrong position so we moved it to the correct section.

    Here is the working Code if anyone needs it in the future.

    CSS:

    .nav {
    background-color:transparent;
    color:#fff;
    -webkit-transition:all 0.25s ease;
    -moz-transition:all 0.25s ease;
    transition: all 0.25s ease;
    width:100%;
    background-color:transparent;
    padding:1em 0;
}

.past-main {
    background-color:#fff !important;
    color:#444;
}

#main-header {
background-color:transparent;
}

#below-main {
  height:1000px;
  background-color:white;
}

    Javascript:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var mainbottom= 100;
$(document).ready(function(){

});
$(window).on('scroll',function(){

    stop = Math.round($(window).scrollTop());
    if (stop > mainbottom) {
        $('#main-header').addClass('past-main');
    } else {
        $('#main-header').removeClass('past-main');
   }

});
</script>

    The CSS gets added in the "Costum CSS" section of the Divi ePanel and the Javascript needs to be in the "Body" section of the "Integration Tab" from the "ePanel", not in the Head section.


  2. 0

    The scroll script you have at the moment requires JQuery, do you have JQuery on the site?

    If you add an ID to your Nav (“nav”) bar this should work.

    window.onscroll = function() {
  showHideNav()
};

function showHideNav() {
  var Nav = document.getElementById("nav")
  if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
    Nav.className = 'nav past-main';
  } else {
    Nav.className = 'nav';
  }
}
    .nav {
    background-color:transparent;
    color:#fff;
    transition: all 0.25s ease;
    position:fixed;
    top:0;
    width:100%;
    background-color:#ccc;
    padding:1em 0;
    /* make sure to add vendor prefixes here */
}

.past-main {
    background-color:#fff;
    color:#444;
}

#main {
  height:500px;
  background-color:red;
}

#below-main {
  height:1000px;
  background-color:#eee;
}
    <nav class="nav" id="nav">
  <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
<div id="below-main">#below-main</div>

    You can run the snippet to see it working. You would have to change the ’25’ to whatever the height of your nav bar is in pixels.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search