[Resolved] Attaching Lower Image To Sticky Nav Header

[Michelle]

Whoops, lol. I added and removed the url several times in testing and left it out the last time. [Blush]

I deleted the custom header image in Elements and have only two concerns left.

1. On Desktop size, there is a hard line in the shadow area where the header ends and the content on the page starts:

https://imgur.com/KpYulLK

2. The deckled image doesn’t show up until scroll begins. I’d like it to be there even before scrolling starts.

I’m very happy that you were able to fix the issues I was having, as this header will add character to a site that will be filled with watercolor artwork.

[David]

Hi there,

1. Remove the background-color from your CSS ie.

nav#site-navigation:before,
#sticky-navigation:before {
    content: "";
    position: absolute;
    top: 100%;
    width: 100%;
    height: 50%;
    background-image: url(https://cdn.reachingmyworld.com/wp-content/uploads/2023/01/13023741/Final-deckle-copy.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

2. Add this CSS:

nav#site-navigation {
    position: relative;
}

[Michelle]

That’s improved, thank you! I still see a hard line on the bottom of the header though:

https://imgur.com/dfVFBn3

P.S. The bottom of my image is transparent and uploaded as a png. I am going to try adjusting my file in Photoshop so the transparent portion of the image is larger on the bottom, theoretically giving more room for the container beneath

[Michelle]

I wasn’t able to resolve this with Photoshop changes…

[David]

Where did the original image come from ?

[Michelle]

It was a royalty free image that I modified in Photoshop. Originally, it looked right with this code that Fernando gave me, but other things were problematic:

.gb-container.gb-container-05c87ebf {
    position: fixed;
    top: 20px;
    z-index: 1000;
    width: 100%;
}

.sticky-enabled nav.main-navigation.is_stuck {
    box-shadow: unset;
}

nav#site-navigation {
    z-index: 1001;
    position: relative;
}

[David]

In the original image is there more negative space below the shadowed area ? As you need that space to be included in the image, so you don’t have the harsh crop line where the shadow gets cut off.

[Michelle]

Hi David. I’ve made dozens of image changes, and can make the header look good on desktop, but not on tablet or mobile.

When the sizing is correct on desktop, these things go wrong in tablet/mobile:

1. the padding is too large beneath the logo (the logo is not centered)
2. scroll makes the logo zoom larger or smaller (messing up desktop if I change the sizing in Customizer)

I’m noticing that my svg logo doesn’t seem responsive. Shouldn’t it adjust for desktop/tablet/mobile?

I have a mess on my hands. Seems like it shouldn’t be this difficult. I’m embarrassed to keep asking for help but after hours of effort, I’m going in circles.

[David]

I am not sure i see the issue with #1 padding beneath logo.
For 2, in Customizer > Layout > Sticky Navigation you can set the Menu Item Height, and the logo scales to fit that. Try changing that to around 63px to match the non-sticky height.

[Michelle]

Thank you. I did change the sticky nav a few times. A menu item height of 63 is good for mobile, but then makes my desktop size wrong. Desktop needs to be 84. My end goal is to have both mobile and desktop logos stay the same on scroll.

[David]

Sorry, it should not be this difficult….

1. Change the Customizer > Layout > Sticky Navigation –> Menu Item Height, back to 84px to match the desktop.

2. Then add this CSS to set the mobile sticky logo size to 63px:

@media (max-width: 1024px) {
    .main-navigation.sticky-navigation-transition .site-logo img, 
    .main-navigation.sticky-navigation-transition .navigation-branding img {
        height: 63px !important;
    }
}

[Michelle]

Thank you. I put the menu item height back to 84px in Customizer>Layout>Sticky Navigation, and added the CSS, cleared cache, and my mobile sticky on scroll still jumps to 84px in size.

I noticed that I also have this CSS in my Additional CSS (apparently, I’ve had this issue for awhile): Forum Topic #2457334 I will go back and re-read the thread.

/*Prevents sticky logo on mobile from getting larger on scroll*/
@media (max-width: 768px) {
    #mobile-header.sticky-navigation-transition .site-logo img {
        height: 47px !important;
    }
}

[Fernando]

There are a couple of syntax errors in your Additional CSS.

Try copying and pasting everything in Additional CSS in CSS error checker tools like these:

http://csslint.net/
https://beautifytools.com/

I believe you can remove this code as well:

/*Prevents sticky logo on mobile from getting larger on scroll*/
@media (max-width: 768px) {
    #mobile-header.sticky-navigation-transition .site-logo img {
        height: 47px !important;
    }
}

It’s redundant with David’s code.

[Michelle]

What a relief! It works! 🙂

[Fernando]

Glad that worked! 🙂

[Author]

Posts