Appreciate the speedy reply. Sigh. Enfold magically does ALMOST everything. I am super happy with that almost. I will do this one little tiny thingie differently.
Thanks again for the speed, so I can look at different options.
Will see how much is the “cost” of loading EVERY element, but think probably not worth it.

Thanks, Ismael. Solved…removed Super Page Cache and replaced it with WP Fastest Cache.
Not blaming Super Page Cache…have used for ages, but something in MY setup didn’t quite work…think didn’t have Cache Everything rule proper, but can’t figure it out.
That said…I can now happily insert images!

Another quickie question…should I use the Theme Option -> Performance -> File Compression options or not? I am a little ocnfused by the updated explanation.
Am VERY happy with performance as is. However…every little bit is obviously appreciated.

You Enfoldians are just wonderful. Thank you, thank you, thank you!

Worked great, Ismael…and I learned lots while looking at what you did!

One last thing I tried was to move the social icons down from the word ‘Social Bookmarks’.

However, it seems to
A) Chop off the tops of the icons
B) Mess up the background cirlce on hover…it’s not centered any more.

This is the line I used that doesn’t quite work…
#top nav #av-burger-menu-ul .social_bookmarks {
margin: 0 auto;

//What I added.
margin-top: 25px!important;
}

Your stuff worked great…mine…not so great.
I’ll be finished with this if I can only figure out how to fix the hover circle and the chopped icons!

Thanks so much for your help…and so quickly!

Thanks to all for your suggestions. Sorry I didn’t respond more quickly.

I have only tried in debugger, but Guenni’s css worked really great.

Can’t work further tonight, but Friday will remove the css rules for navigation and use his suggestion\
Appreciate all your “thinking caps.” And..I learned something about the Enfold options. I usually try to keep to mixins and scss so I can transfer “looks” I like more quickly to another Enfold site. However, realize I have not been using Enfold’s stellar system.

I shall use the superior tool in the future.

Wow! Really blown away by your help. Thanks again.

Mike…I’m going to disable a few things, so don’t mess with it now. I’ll be back.
Thanks for your keen eye…

Sorry…solved…yet another cache refresh.

Thanks as always for your painstaking help!

Close this now, please

Perfectionate! If there’s not such a word, there should be!

Thanks so much…it works and also is taller…both hopes fulfilled!

Also, your suggestion about 2s vs 1000ms seemed to show me better what was happening. Good idea.

Thank you very much. Now I shall know how to do that in future and not bother you!

Yes! Your additonal padding did the trick! It prevented the header from coming down over the page title when correcting height of extra elements bar. Terrific!

However (and don’t you just hate that word), while trying to solve that problem, I messed up the animation and can’t get it to work for me.
I am not sure if I am messing up the METHOD or the SELECTOR. Below are the two methods I’m trying. I have removed them from my css so you can point me to the proper solution:

Please look at page: https://calvarybaptistdunnellon.com

Honestly, don’t care if from right or left, just would like to see animation working.

Thanks for checking this out…and appreciate the extra elements height solution.

Method #1
#top div.phone-info{
visibility: visible;
animation: caption-left 2s s cubic-bezier(0.985,0.005,0.265,1)!important;
}

Method #2
//https://kriesi.at/support/search/?bbp_search=animate+left+to+right

@keyframes slide-in-left {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
@keyframes slide-in-right {
from {
transform: translateX(100%);
}

to {
transform: translateX(0%);
}
}

//#top div.phone-info {
//.phone-info{
#top div.phone-info div {
animation: slide-in-right 1000ms!important;
//animation: slide-in-left!important;
}

Rikard, thanks for your help.

1. Removed the white space at the top of the screen, under sub_menu by using this css. Just in case someone else might need to delete such an item in future.

div#after_submenu_1 .content{
padding-bottom: 0;
}
div#after_submenu_1 div.av-section-cont-open:nth-child(1){display:none!important;}

2. I presume that the horizontal line I have circled with a red circle is a border on the color block? I want to remove it — or make it transparent — if removal is not possible.

This horizontal line is on all 3 color sections on the page, but you will see the one on the aqua to blue blocks circled in red.

As I said, it appears below where the scroll arrow pulses and is at very top of the svg divider. But I would like it to disappear!

This is the one-day link for the page.

Thanks again for looking at this.

Works great, Mike…thanks for answering so quickly.
This can now be closed.

Thanks, Mike! Perfect.
You can close this now.
Have a great day!

Thanks, Mike, for looking at it. I changed this code function, cleared cache, no logo is showing. Any other ideas?