[Resolved] SVG Separator After Navigation

[Jackie]

Hi,

I am currently redeveloping our website on a separate domain and am trying to add an SVG separator after the navigation.

I have the options enabled to use the navigation as the header and am using the generate_after_header hook to add the inline SVG.

The issue I am having is when it comes to the sticky navigation. I am using the sticky nav that is hidden on scroll up and animates into view on scroll down.

I have tried adding CSS animations to the fixed SVG to match the sliding of the sticky navigation but haven’t achieved the best results so far.

I assume the sticky nav animation works by using JS, is there any way I can use the exact same animation on the SVG so it animates perfectly with the sticky nav or would there be an easier way of achieving the same result?

I have included the link to the site in the Private information section so you can see where I have got to so far with this.

Many thanks for your help in advance.

[Elvin]

Hi,

Instead of hooking it in as an element, can we try a pseudo element CSS approach?

Try saving your SVG separator as a file and upload it to your media library.

To do that, you must first add SVG support to your WordPress site so it allows for SVG file upload.

You can install plugins for this. Try installing “Safe SVG” plugin.

Once you’ve uploaded the SVG file, you can add this CSS:

nav#site-navigation:after, nav#sticky-navigation:after {
    content: "";
    width: 100%;
    height: 25px;
    display: block;
    position: absolute;
    background-image: url(URL of your .svg file here);
}

Here’s a demo site of this in action: Demo site

[Jackie]

Hi Elvin,

Thanks for your recommendation.

I have commented out the inline SVG, uploaded the SVG to the media library and tried the pseudo element approach as suggested.

It’s close to working but when you scroll down to the point where the sticky nav is triggered (as in all of the css classes such as is_stuck are added to the #sticky-navigation element) there is some strange behaviour happening with the separator and I’m not sure what’s causing this.

You can see the updated example on the link provided in the private information box again.

Any further help you could provide would be really appreciated.

Many thanks.

[Ying]

Hi Jackie,

Try to add this CSS:

nav#sticky-navigation:not(.sticky-nav-scrolling-up) {
    top: -120px !important;
}

Let me know how it works 🙂

[Jackie]

Hi Ying,

I’ve added that code as well and it removes the strange behaviour so thanks for your help with this.

The only slight issue now is that when the sticky navigation is fixed and you scroll further down the page the navigation snaps away instead of fading up. Is there a way to resolve this issue?

Updated example in private information again.

Many thanks for your help so far with this.

[Ying]

Hi Jackie,

I can see the issue here, I’m afraid it will require some custom JavaScript solution which is beyond the scope of this support forum.

Thanks for your understanding.

[Jackie]

Hi Ying,

No problem, I thought this might be the case.

Thanks for your help anyway.

[Ying]

You are welcome!
Btw beautiful site 🙂

[Author]

Posts