Webflow sync, pageviews & more.
NEW
Answers

How can I disable fullPage.js on mobile view in Webflow? I have tried setting related Div Blocks to "Hide on Phone Portrait" but it doesn't seem to work. Is there a way to add a few lines of JavaScript code to achieve this?

To disable fullPage.js on the mobile view in Webflow, you can indeed use a few lines of JavaScript code. Here's how you can achieve this:

1. First, make sure you have added the fullPage.js library to your Webflow project and set it up correctly. Ensure that you have connected the necessary CSS and JavaScript files.

2. Next, go to your Webflow project and navigate to the page where you want to disable fullPage.js on mobile. Open the page settings by clicking on the gear icon in the Pages panel.

3. Inside the page settings, click on the "Custom Code" tab. Here, you'll find two sections: "Head Code" and "Footer Code". We'll be adding the JavaScript code in the "Footer Code" section.

4. In the "Footer Code" section, add the following JavaScript code:

```javascript

```

The code checks if the device accessing the page is a mobile by using the `navigator.userAgent` property. If it detects a mobile device, it calls the `destroy()` method provided by fullPage.js to remove its functionality completely.

5. Save the changes you made to the page settings.

Now, when users access the page on a mobile device, the fullPage.js functionality should be disabled, allowing the page to scroll normally.

Note that this method assumes you have correctly set up fullPage.js in your Webflow project. It's important to ensure that you have connected the necessary files and set up the appropriate classes and configuration options for fullPage.js to work properly.

Rate this answer

Other Webflow Questions