Change the WordPress Divi Builder nav bar to switch from transparent to white when scrolling or upon reaching a specific point on the page

Currently, I am in the process of revamping our company's WordPress website using the Divi Builder. For the past couple of days, I have been scouring the internet trying to find a solution that would allow the navigation bar to change CSS classes as the user scrolls.

Although I came across plenty of information on this topic from various sources, including Stack Overflow, I haven't been able to locate a solution tailored specifically for the Divi Builder.

I attempted to play around with the provided HTML, CSS, and JavaScript from resources like this link without much success:

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;
}

.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');
   }

});

For reference, you can check out how the end result should look like here:

I aim to achieve a similar effect with our navigation bar - being transparent at the top and turning white when scrolling down or hitting a specific point.

My main challenge lies in figuring out where to incorporate HTML in the Divi theme.

Thank you in advance for any assistance and guidance provided.

Answer №1

Is JQuery installed on your website for the current scroll script to work properly?

If you assign an ID ("nav") to your navigation bar, the script should function as intended.

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>

To see the script in action, run the snippet and adjust the '25' value to match the pixel height of your navigation bar.

Answer №2

After spending a considerable amount of time debugging, my colleague and I were able to successfully resolve the issue.

We discovered that adding HTML directly in Divi was causing problems, so we utilized some Javascript as a workaround. Additionally, we made minor adjustments to the CSS and relocated the jQuery link to the appropriate section.

If anyone encounters a similar issue in the future, here is the functioning code:

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 should be added in the "Custom CSS" section of the Divi ePanel, while the Javascript should be placed in the "Body" section of the "Integration Tab" in the ePanel, not in the Head section.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to stop Ajax calls initiated with Dajaxice?

Utilizing Dajaxice with my Django-based website has proven to be highly convenient. However, I occasionally encounter the need to cancel Ajax requests and I'm unsure how to do so when they are wrapped with Dajaxice. The documentation for Dajaxice is ...

Form popup that closes without refreshing the page upon submission

My goal is to make this form close when the button is pressed without refreshing the page, as Ajax code will be added later. The form functions as a pop-up, so it needs to close once the button is clicked. Currently, I can click the button without a refres ...

Contrast: Colon vs. Not Equal Sign (Typescript)

Introduction Hello everyone, I am new to Typescript and currently grappling with some fundamental concepts. When defining a parameter for a function, I typically specify the type like this: function example(test: string){...} However, as I delve deeper ...

What is the best way to select an element that is currently visible but hidden underneath another element?

I have developed a circular graphic using primarily HTML and CSS, with some JavaScript and JQuery functionalities incorporated for text curving and planned interactions in the future. However, I've encountered an issue where clicking on the upper rig ...

Await that's locked within a solo asynchronous function

async function submitForm(e){ e.preventDefault() console.log(e.target) try { const response = await axios.post('/api/<PATH>', {username, password}); console.log(response.data); const token = response.data.token if (t ...

Replace Euro symbols in JavaScript Regexp with grouping

Need assistance creating a Regex pattern for &#8203; € 14,50. After the replacement is completed, only 14,50 Can anyone provide guidance? ...

Establish the height of the root to be the same as the height

As a newcomer to HTML and CSS, I am struggling with setting the background color of my root div on a webpage. My code is quite complex, but let me simplify the issue for you by providing a sample problem below. <style> #background{ background-c ...

Execute the function at the top of every hour

I need to trigger a jQuery function on the dot of every hour, like at 11:00, 12:00, 13:00 and so on. Below is the function I want to call: function flipIt() { $('#flip').addClass('animate pulse'); $('#flip').removeCl ...

Manipulate CSS Properties with Javascript Based on Dropdown Selection

I am currently working on implementing a feature that involves changing the CSS property visibility: of an <input> element using a JavaScript function triggered by user selection in a <select> dropdown. Here's what I have so far in my cod ...

Tips for personalizing the react-select module

I'm struggling with customizing the appearance of the react-select component. The official documentation lists all the style attributes that can be modified, but I'm having trouble removing the blue borders around the text and container. https:/ ...

Is there a way to access the value of a string variable with unicode characters from a different function than the one where it was originally defined?

Is there a way for me to access the 'result' variable outside of the initial function? The value of 'result' is a Unicode character like 'ﺏ' and I am still learning, so I could use some assistance. Thank you. Below is ...

Cannot assign type void to 'Intrinsic Attributes & Dispatch<SetStateAction<>>'

Just starting out with typescript and ran into this error: Error :Type '{ setTasks: void; }' is not assignable to type 'IntrinsicAttributes & Dispatch<SetStateAction<IStudy[]>>'. Property 'setTasks' does not e ...

The functionality of AngularJS routing is malfunctioning

I'm having trouble with implementing angularJS routing on my page. Initially, it was working fine but now the browser is not returning anything. Here's the code snippet: angular.module('myRoutingApp', ['ngRoute']) .conf ...

Detecting key press events with extended duration using the DOM keydown event

Is there a way to receive notification when a key is pressed down, but not until it is released? It seems that using keydown continuously triggers the onkeydown callback while the key is held down. ...

angular $stateProvider behaving unexpectedly with routing

Within my main file titled index.html, I have incorporated the following basic markup... <body ng-app="starter" ng-controller="AppCtrl"> <div ui-view></div> </body> In my separate file called app.js, I am utilizing $stateProvi ...

acquire information from a variable using angularjs

Given the following variable: var exampleVar = {"id": 0, "Nodeid": 1234, "title":"abc"}; I am looking to retrieve the Nodeid value from the above and save it in a new variable. The desired output should be: var newNodeID = 1234; ...

Encountering Issues with Ajax Request in the Google Play App

I am facing an issue with my Phonegap app. It functions perfectly in debug mode and when installed as an apk file from Phonegap. However, when I upload it to Google Play Store and then download it from there, my ajax requests stop working. I have added the ...

Having challenges retrieving information from MySQL in AngularJS

As a beginner in angularJS, I am trying to display all customers from MySQL. Here is the code I have written in the controller and service: app.controller('CustomersController', function ($scope, customersService, $http) { init(); function ini ...

Navigating with Angular/Routing through Dynamic Content

Exploring the best approach for managing dynamic content within an angular application has been my recent focus. Currently, I have an array containing phone numbers and aim to organize them based on their respective countries. For instance, all German phon ...

Tips for maintaining the menu state following a refresh

Is there a way to save the menu state when pressing F5? I'm looking for a similar functionality as seen on the Binance website. For example, clicking on the Sell NFT's submenu and then refreshing the page with F5 should maintain the menu state on ...