[Support request] sticky menu background partially transparent?

[Paul]

Is it possible in GP to have a menu navigation bar like this..
As you scroll down the edges of the menu background image has a nice effect

Thanks

[Tom]

You could do something like this using the Backgrounds add-on. Basically you would have to design the image to repeat-x across the bottom of the navigation.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Paul]

Thanks Tom
I made progress and was able to use a transparent image as the menu background, but how can I force the navigation background to be transparent?

See screenshot – http://screencast.com/t/B0m6ftdYW

Thanks

[Jamal]

Hi

Leaving the background color value empty usually works, have you tried that?

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Paul]

Thanks for the help Tom and Jamal.

[Paul]

Also, is there a way to remove the thin line at the bottom of the menu background?

See in this screen shot:
http://screencast.com/t/x5wzrXiJ

Thanks

[Tom]

Try this:

.main-navigation.navigation-clone,
.main-navigation.is_stuck {
    box-shadow: 0 0 0 0 transparent;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Paul]

I added the ‘Simple Custom CSS’ plugin and added the CSS like so..

http://screencast.com/t/yj4O8ETveSs

But i still see the thin line

Paul

[Tom]

Can you link me to your site?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Paul]

Sure, its http://pastorschaller.com/tg1/

[Paul]

I redid it and it seems to be fine now
Thanks for the help though

[Tom]

Site is looking great! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Paul]

Ive almost succeeded but need a little more help.
So I want the jagged edge semi transparent menu, to be like this…
http://screencast.com/t/1RVxeTxBSSS7
But when at the TOP of the page the background under the jagged edge is also transparent and looses the look, and becomes this..
http://screencast.com/t/GCe3bBvofb

My setting are:
colors > Primary Nav > Background = transparent

The work around would be to make the menu background the same red color, but what if I want to use a picture instead of the red color on certain pages

Thanks for a great theme, and great support
Test site: http://pastorschaller.com/tg1/
Paul

[Tom]

You may need to make the body background that same red, and then make sure all of your sections have background colors (so they’re not red).

Also, try this for the shadow:

.sticky-enabled .main-navigation.is_stuck {
    box-shadow: 0 0 0 0 transparent;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Paul]

Tom the shadow fix works perfectly thank you!

So, I made the body background red which is perfect for the homepage since the top section is also red.
However look at the ‘catering’ link (http://pastorschaller.com/tg1/catering/)- How can I access the red under the jagged edge. Im using Elementor as my page builder, and I have GP Premium.
I did choose a background color for each section, but I dont see a way to nudge the ‘section’ 10px higher so it pushes the red out of the way. Or is there a way to independently choose a body background color on each page?
Thanks !

[Author]

Posts