Not sure if this will help, but I reviewed my browser history and found I referenced this:

I don’t recall that I added that to the Custom CSS though.

Hi Ismael.
Thanks for your reply.
The images are indeed moved above the title, but they are blurry.
The theme is probably using a small image, which is enlarged to full screen with the code provided, thus degrading the quality of the photos.
Furthermore, in landscape view on a smartphone, the image origin is not the center but the top margin.
And the CSS code provided does not resolve the dotted line issue.

Hi Ismael,

thank u, it works :)
BUT – only desktop.
On mobile I’ll be shown a message, that I’Ve to install a fallback-picture.
In addition, do you’ve any solution for that issue.

thx in advance
Andreas

Dear Enfold Experts, I am not too sure what Envatojlc’s comments have to do with my original question but this has not been addressed so far anyhow, so might have slipped through.

The situation is the following:
a) WP Accessibility Plugin activated
b) small green border configured in WP Accessibility to mark where the Keyboard Tab key jumps to for all Buttons / links that can be addressed via Keyboard
c) Entering the Home Page
d) Press Tab Key once => jumps to change contrast button from Accessibility Plugin, green border, all fine. 2nd time Tab key pressed => jumps to change font size from Accessibility Plugin, green border, all fine. 3rd Time Tab pressed => jumps to top of page, no button visible, no green border, looks like a jump into nowhere, totally unclear where the cursor is.

When checking this with the Firefox Inbuild Dev Tool for accessibility it states for the Header Banner: clickable elements need to be interactive and focused. So there is something in the Header generation that fails. Can you please check? And of course I would like a future feature (similar to the link color configuration in the theme) to configure the Keyboard accessible elements Coloring or Settings in the Enfold theme instead of outsourcing that to WP Accessibility.

thanks Anja

I think I got it. You are awesome. Please check to see if correct :

/* TEXT SHADOW FOR – Fullwidth Easy Slider – Headline: */
.avia_transform .av_slideshow_full .active-slide .avia-caption-title,
.avia_transform .av_fullscreen .active-slide .avia-caption-title
{text-shadow: 1px 1px 1px #717070;}

/* TEXT SHADOW FOR – Fullwidth Easy Slider – Caption Text: */
#top .avia-slideshow .av-slideshow-caption .avia-caption-content p {
text-shadow: 1px 1px #717070;
}

/* TEXT SHADOW FOR – ALL H1 headlines: */
.av-special-heading h1 {
text-shadow: 1px 1px #717070;
}

/* TEXT SHADOW FOR – SPECIFIC H1 headlines: */
.av-special-heading.av-nlr5x-bb365aeef7c91c871c871ed41100301d h1 {
text-shadow: 1px 1px #717070;
}

/* TEXT SHADOW FOR – subheading text: */
#top .av-subheading p {
text-shadow: 1px 1px #717070;
}

#header_meta a, #header_meta span {
font-size:16px !important;
}

.phone-info {
font-size: 18px;
}

@media only screen and (max-width: 1023px) {
#header {
position: fixed !important;
height: 120px !important;
max-height: 120px !important;
}

#top #header.av_header_transparency #header_meta {
background-color: transparent;
}

#header_main {
border-bottom: none;
}

#header:not(.av_header_transparency) #header_main {
box-shadow: 0 5px 5px rgba(182,182,182,0.75);
}

.responsive #top .av-logo-container ,
.responsive #top .logo a,
.responsive #top .logo img,
.responsive #top .logo svg {
height: 120px !important;
max-height: 120px !important;
line-height: 120px !important;
}

.responsive #top .av-main-nav .menu-item-avia-special a {
height: 120px !important;
line-height: 120px !important;
}

.responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
background-color: transparent !important;
}

#top .header_bg {
background-color: transparent !important;
}

#top #header:not(.av_header_transparency) .header_bg {
background-color: #FFF !important;
}

.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate,
.responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
display: block !important;
}

.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img,
.responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
opacity: 0;
}

/*** das hier individuell anpassen je nach dem ***/
#top #header.av_header_transparency #header_meta .phone-info * {
color: #FFF !important;
}

.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner,
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::before,
.html_mobile_menu_tablet .header_color #header.av_header_transparency div .av-hamburger-inner::after {
background-color: #FFF;
}
.html_mobile_menu_tablet .header_color #header.av_header_transparency .menu-item-search a:before {
color: #FFF;
}
.responsive.html_header_top.html_mobile_menu_tablet #top #main {
padding-top: 120px !important;
}
.responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet #top #main {
padding-top: 0 !important;
}
}

@media only screen and (max-width:1023px) {
#avia-menu .menu-item {
display:none
}
.av-burger-menu-main.menu-item-avia-special {
display:block
}
}

@media only screen and (max-width:767px) {
.responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet #top #main #av_section_1 .content {
padding-top: 150px
}
}

• This reply was modified 8 months ago by bemodesign.
• This reply was modified 4 months ago by Yigit.

I am using this and it is working, but I am getting a bunch of extra padding under the Logo/burger:
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
position: fixed;
}

see the image below – the top is where the anchor link lands now due to sticky and transparent header.
I’d like it to land like the 2nd image, with the top of the color section at the top of the page (under the header).
Is that possible?
thanks
Nancy

Hi Ismael,

Thank you for your reply, but none of those fix this issue with the theme. I need to insert a page into the product description so I have one source of truth across many products. This shortcode clearly works when previewing, but the theme throws issues when it is live.

As there doesn’t seem to be any support from Enfold devs on this, to get around this, for anyone who finds this thread in future (like I have with many other topics in this forum) and runs into the same issue – I have been able to do exactly what I want using the plugin “Insert Pages” by Paul Ryan.

ok
Can you tell me how to have it on PC so the links land right at the top of the color section instead of above it like it is now?
I think my sticky header (height is 80px) is interfering with the position.
I changed the name of the links – see below
I tried using this from your link to have a transparent mobile header, but it’s not working:

/* Transparent Header For Mobile */
@media only screen and (max-width: 990px) {
.responsive.html_mobile_menu_tablet #top #wrap_all #header { 
        position: absolute!important;
}
.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
	background: transparent!important;
}
}

Can you see what’s wrong there?
thanks
Nancy

• This reply was modified 8 months, 1 week ago by Munford.
• This reply was modified 8 months, 1 week ago by Munford.