[Resolved] particle.js cover the Whole website

[Antonio]

Hi,

I am developing my Portfolio using GP and GP premium and I want to use the particles.js script in my page Header.

The problem is that the particles.js covers the whole website (also footer) and some elements (like the navigation) seems not working.

This is the website

https://ac-creativemind.com/

My CSS

#particles-js {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
}

Any Ideas?

[Tom]

Hi there,

I’m not seeing it cover your footer/content (no sections added yet).

To make it so your logo/navigation is clickable, try this:

#particles-js {
    z-index: 0;
}

.generate-merged-header .site-header {
    z-index: 1;
}

[Antonio]

Hi Tom,

Thanks for the CSS, that fixed the Logo/Navigation Problem.

But the particles.js still cover the content. I added a test section so you can have a look

Thanks in advance
Antonio

[Tom]

Try this (complete CSS):

.generate-merged-header .site-header {
    z-index: 1;
}

#particles-js {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 0;
}

.page-header-content {
    position: relative;
}

[Antonio]

Of course!! This fixed the problem.

Thanks Tom. Amazing Theme and support!

[Tom]

Glad I could help 🙂

[Pedro Chincoa]

Hi Tom,

How are you?

I’m creating my portfolio with GP at localhost.

I created a home page with a script (ParticleJS Background plugin) and 3 sections with text in H1 and H2.

I have disable all items.

The problem is that the links, whether created in the sections or with the menus, do not work and do not allow me to link to the other pages.

Excuse me, how can I fix it?

Thanks in advance

[Tom]

I would have to see the site with the issue present in order to give you a solution 🙂

[Pedro Chincoa]

Hi Tom,

Thanks for the reply.

I don´t know how to do it so you can see my localhost. So I made a screener with my settings:

https://drive.google.com/file/d/0Bw17luIXEVOzWWh5RFp1dHozREE/view

can you see it? Thank you very much

[Tom]

Hmm, any chance you can reproduce the issue on a live site?

[Pedro Chincoa]

At the moment, I’m just using GP in this personal portfolio.

I do not know if the video helps. The idea is to work locally and upload it while you are ready to network.

the links work when i disable the plugin,

I tried using the settings in this topic: https://generatepress.com/forums/topic/mobile-site-jumps-on-scroll/… but I did not get it.

[Pedro Chincoa]

Hi again,

I installed everything on: http://halalexperience.com/

But now the particles do not work and there is no problem with the links.
I could not tell you anymore. I have done exactly the same thing as in my local host …

[Tom]

You have a couple JS errors: https://www.screencast.com/t/mpz4ffp29ol

Make sure your particles file exists, and that you’re initializing particles exactly as they show you.

[Author]

Posts