Site logo

Archived topic

particle.js cover the Whole website

12 replies · Started by Antonio on April 28, 2017

Viewing posts 1–13 of 13

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?

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

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

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

Of course!! This fixed the problem.

Thanks Tom. Amazing Theme and support!

Glad I could help :)

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

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

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

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.

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 ...

This archived topic is closed to new replies.