[Resolved] Different Header Settings for Front Page

[Dee]

For some reason the navigation on my front page is styled differently than the rest of my site. When inspecting an element it points to the style.min.css file in the parent theme, not the child theme.
How do I manage the color settings for the front page to match the rest of the site?

[Tom]

Hi there,

Your navigation looks the same to me everywhere. Did you fix this issue?

Let me know 🙂

[Dee]

The navigation is transparent on the first page.
So when you scroll down and get the floating nav, or you hover over the services menu item, you will see the transparency on the first page and not the others.

I am tweaking some colors in the navigation, and the front page does not change, but I cannot see where to make modifications on the front page.

[Leo]

There isn’t a specific setting for the front page sticky nav setting by default.

Can you disable any caching plugins you might be using so I can see the source of the code?

Thanks 🙂

[Dee]

I disabled all caching, and I changed the color of the navigation background via the customization panel So you can clearly see it is different on the first page.

Please note the sticky nav is NOT the issue here.

It is the first page nav colors and transparency are not the same as the rest of the site. The transparency just shows up with the sticky nav and the the drop down under SERVICES.

[Leo]

I see this custom CSS on the home page but not the pages with solid color:

 .main-navigation, .main-navigation ul ul {
    background-color: rgba(255, 255, 255, 0.7); 
}

Looks like it’s in Elementor:
https://www.screencast.com/t/mrx2WTFvZn

[Dee]

I have no idea where that came from, or how to change it.
There is nothing in elementor to make that change. I have looked through all of the options.

[Leo]

Hmm unfortunately the screenshot is all I can see. Does the issue disappear if you disable Elementor?

[Dee]

So, I have figured this out – Sort of.

I never found how to correct the elementor page coding, so I recreated the page.

A couple of the complex sections I attempted to save and reuse, but the embedded CSS was included with the sections as well.

I ended up recreating the page completely, and the issue is solved for now.

I suspect but I am not sure, I modified the elementor CSS file when I had the Elementor setting to use an external file, I then started using Short Pixel, and it wants the elementor setting as embedded CSS, so I made that change. I suspect the CSS got picked up that way, but never showed up again in the external files when I toggled the elementor setting.

[Leo]

Glad you’ve figured out 🙂

[Author]

Posts