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 7 months ago by bemodesign.
• This reply was modified 3 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 7 months, 1 week ago by Munford.
• This reply was modified 7 months, 1 week ago by Munford.

on the text in the blue at the top of all of the pages
I put the plugin in, just not sure how to get it to work

also I could put that text int he heading box except it is falling outside of the box when I do that
I just set it that way on the home page so you can see
maybe something with the CSS that is used

thanks again!

Hi Mike,

Sorry if I didn’t explain myself well, my English isn’t very good. The button in the footer already works, as I explained in the previous email. Sorry, the Spanish page wasn’t created because it gave an error. Now you can test it. The only thing I’m missing is creating the footers for desktop, tablet, and mobile. But the button on mobile is separate from the world image, and I’d like it to be on the same line and centered like the rest of the text. If you narrow the screen you will be able to see it. I’m sending you an image of how it is and how I would like it.

Many thanks,

BR,

Antonio.