[Support request] sticky menu background partially transparent?

[Paul]

The way I setup the header (appearance>customize) was just a logo, and the BG color transparent (which I just changed to white), and no BG image.
The CSS on the contact page (http://pastorschaller.com/tg1/contact/) is…

.header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

The only other CSS is glocal, which fixed a black line under the sticky nav..

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

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

I disabled the Before Header and After header hooks you gave me here (https://generatepress.com/forums/topic/sticky-menu-background-partially-transparent/page/2/#post-252880)

APart from that theres no other customisation, and a plain page built in Elementor.. a section with a BG image

What can I try next? I think we are really close. Thank you!

[Tom]

The hooks I gave you here are necessary to achieve the effect I believe: https://generatepress.com/forums/topic/sticky-menu-background-partially-transparent/page/2/#post-252880

At least that’s how the site you linked to achieved it.

The padding will stop the content under the header from moving up behind your header.

[Paul]

Sorry, I should have explained why I temporarily disabled the 2 hooks. When enabled the sticky nav doesnt work. As you scroll it switches to the thin sticky nav, but then leaves as you scroll.
I enabled the hooks so you can see. Even when enabled the BG nav image is not bleeding over.
Thanks 🙂

[Tom]

Well this is proving to be very difficult 🙂

Okay, let’s start over – we’ll do it my way over what the example site did.

Scrap everything we’ve done so far including the background image, then:

1. Set your navigation background to white.

2. Set the inner navigation width to full: Customize > Layout > Primary Navigation.

3. Add this function:

add_action( 'generate_inside_navigation','tu_image_navigation' );
function tu_image_navigation()
{
    ?>
    <img class="nav-image" href="URL TO YOUR IMAGE" alt="" />
    <?php
}

4. Add this CSS:

.nav-image {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    z-index: 999;
}

#primary-menu,
.site-logo {
    position: relative;
    z-index: 1000;
}

Then let’s see where we’re at 🙂

[Paul]

Thank you for working with me on this 🙂
This is what I did..
1. Removed the BG primary nav image
2. Set prim nav BG color to white
3. set inner nav width to full
4. Removed the GP hooks previously added
5. Added the function you gave using ‘code snippets’ plugin, and incorporated my image URL

add_action( 'generate_inside_navigation','tu_image_navigation' );
function tu_image_navigation()
{
    ?>
    <img class="nav-image"href="http://pastorschaller.com/tg1/wp-content/uploads/2016/12/brush-BG-white-v2-1992x100.png" alt="" />
    <?php
}

6. Added the CSS you gave to my ‘contact’ page (http://pastorschaller.com/tg1/contact/)

.nav-image {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    z-index: 999;
}

#primary-menu,
.site-logo {
    position: relative;
    z-index: 1000;
}

Currently there is no sign of the torn edge image in the nav
Paul

[Tom]

What’s happening.. lol – I even tested it using developer tools. Your image is being rendered as 0x0 so it’s not showing.

Ok.. remove the PHP function – keep everything else.

Then add this..

#site-navigation:not(.is_stuck),
#mobile-header:not(.is_stuck) {
    position: relative !important;
}

#site-navigation:after,
#mobile-header:after {
    content: url(http://pastorschaller.com/tg1/wp-content/uploads/2016/12/brush-BG-white-v2-1992x100.png);
    position: absolute;
    bottom: -40px;
    display: block;
}

Here’s hoping 🙂

[Paul]

It works! Thank you for going the extra few miles on this!
Can I also get it to work on mobile?
This is what the ‘contact’ page looks like on mobile (straight edge on bottom of nav, instead of the torn effect)
http://screencast.com/t/ghH6gni109AJ
Thank you.

[Tom]

Just adjusted the CSS above to include the mobile header 🙂

[Paul]

This is so awesome.
Hopefully one last observation… I lost the hamburger menu on mobile.
Paul

[Tom]

Here’s the full code – you shouldn’t need anything else we talked about (I’ll trim this thread down so it’s easier for people to find in the future):

#site-navigation:not(.is_stuck),
#mobile-header:not(.is_stuck) {
    position: relative !important;
}

#site-navigation:after,
#mobile-header:after {
    content: url(http://pastorschaller.com/tg1/wp-content/uploads/2016/12/brush-BG-white-v2-1992x100.png);
    position: absolute;
    bottom: -40px;
    display: block;
    z-index:-1;
}

[Paul]

Works gloriously. Thank you again!

[Tom]

You’re welcome 🙂

[Paul]

Hi Tom
I know my thread is a little old but I noticed an issue and would ask for your help:
The brush effect image is 1900 wide which is perfect for desktop, but when viewed on a smaller device the page is still forced to be 1900 wide which creates a scroll bar at the bottom of the page.

Screenshot – https://www.screencast.com/t/tfOvXqIwNmk

Is there a tweak to the code you gave me that would allow the page to adjust properly on a mobile device?
Thank you

[Leo]

Can you link us to the site again? Thanks!

[Paul]

Done.
Thanks
http://pastorschaller.com/tg1/

[Author]

Posts