[Support request] sticky menu background partially transparent?

[Tom]

You can use my Simple CSS plugin to add page specific CSS using the meta box. That might be your best bet:

body {
    background-color: #whatever;
}

[Paul]

Works perfectly! Thank you

[Tom]

You’re welcome 🙂

[Paul]

So far so good, and the menu background is looking great! (http://pastorschaller.com/tg1/)
But if I use an image below the menu, is there a way to have the top 20px of the image be the background for the brushed edge of the navigation?
Currently its like this on the ‘catering’ page – http://screencast.com/t/AP9hgmkQE2I
Thanks!
BTW, Ive worked with approx 15 themes in the last 2 years and GP is the most flexible, easiest and fastest.

[Tom]

Hmm, unfortunately it’s not possible for a background image to display outside of the element it’s attached to.

To have it “bleed” over the edge, the entire image (not repeated) would most likely need to be position inside the navigation element and set using position:fixed.

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

Then your CSS:

.inside-navigation {
    position: relative;
    overflow-y: visible;
}

.nav-image {
    position: absolute;
    left: 0;
    bottom: -10px;
}

Something along those lines might work.

[Paul]

I assumed that I add the top piece of code to functions.php. Correct?
This is what I added to it:

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/11/chicken-tikka2.jpg" alt="" />
    <?php
}

I also added the CSS on the page. However the thin strip of background under the menu is not the image i specified.
This page has the extra CSS – http://pastorschaller.com/tg1/contact/

Thanks,
Paul

[Tom]

The image you would be adding is actually the “torn” effect of the bottom of the navigation.

This would be added instead of adding that as the background image to the navigation.

[Paul]

I added the torn effect image to functions.php
When you say.. ‘This would be added instead of adding that as the background image to the navigation’ does it mean I should remove it from ‘Background images > primary nav’ ?
I did try that but then I got this result – http://screencast.com/t/8lsnuYYDg
Thanks.

[Tom]

Your menu items have a white square as a background image.

I just took a look at how the site you originally linked to does it – if you can put your torn image effect back as a background image (like it was before) and then let me know, I’ll try it their way using developer tools and will give you the CSS 🙂

[Paul]

Awesome.
Yes, I restored the background image.
OK to remove the php and css you previously gave in reply #252189 in this thread? or leave it in for now?
I can provide a WP login if that makes it easier for you
Paul

[Tom]

Ok, so remove the white background from your menu items (to remove the squares around them).

Then in the “Before Header” hook, add an opening element:

<div class="header-container">

Then in the “After Header” hook, close it:

</div><!-- .header-container -->

Then you could do this:

body {
    padding-top: 200px; /* height of your header */
}
.header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

This will sit your header on top of your content below so it will overhang.

This means you can change the body background back to a global value as well.

Doing it this way is the same method your initial example is using.

[Paul]

Hi Tom
So I added the hooks:
http://screencast.com/t/N6c7jHcC9u

I added the CSS only to the menu page for now (http://pastorschaller.com/tg1/menu/)

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

As you can see the menu page header is transparent and the body content is at the very top
Can you see anything obvious that I did wrong?
Thanks for all your help

[Tom]

You may need to add some padding to your body element – I just adjusted the CSS here: https://generatepress.com/forums/topic/sticky-menu-background-partially-transparent/page/2/#post-252880

[Paul]

Tom
I added the following CSS to the ‘menu’ page, but the nav BG image is not overhanging.
My header and primary nav backgrounds are transparent (no color specified).

If I decrease the top padding to 140 in the CSS you can see the result here:
http://pastorschaller.com/tg1/contact/
The BG image for the nav does not overhang

body {
    padding-top: 165px; /* height of your header */
}
.header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Thanks
Paul

[Tom]

The .header-container element doesn’t seem to exist on that page.

[Author]

Posts