Uppercase in H3 within the Footer, transparency Header / changing font colors - Support

Tagged: Color, font, h3, transparent header

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
March 16, 2020 at 4:57 pm #1193533

marion
Participant

Hi there,

first of all: really like your theme, easy to handle, nice demos!
I stuck with 2 detail settings:
1. Within the Footer Section / Widgets, I inserted 2 text elements. The Headline is default H3, I set in the Enfold settings, that H3 should not be uppercase, but it still is. How can I change that?
2. I use the transparency header and I’d love to have it similar to your demo 2017 header – when transparent / dark the font should be white, when it changes to a white background in the header, the font should have a different color. I know where to set those parameters in general, and I tried different settings there but can’t exactly identify, which color setting is for which “situation”. I’ve also compared with your default settings, but didn’t work.

March 17, 2020 at 5:02 am #1193725
Rikard
Keymaster
Hey theearlybirds,

Thanks for using Enfold :-)

1. You can set that under Enfold->Advanced Styling, look for the Widget title option. Set the text transform option to none.

2. You can change the transparency colour of your menu items under Enfold->Header->Transparency Options. If that is not working then please post admin login details in private so that we can have a closer look.

Best regards,
Rikard
- This reply was modified 4 years, 8 months ago by Rikard.
March 30, 2020 at 11:18 am #1199039

marion
Participant

This reply has been marked as private.

April 5, 2020 at 1:21 pm #1200961
Mike
Moderator
Hi,
Thanks for the login, I added this css to your Quick CSS to set your text-transform to none.
```
#footer .widgettitle {
    text-transform: none !important; 
}
```
For your menu I added this css:
```
.header_color.av_header_transparency .main_menu ul:first-child > li.current_page_item > a {
	color: #ffffff;
}
.header_color.av_header_transparency .main_menu .current-menu-item > a > .avia-menu-fx {
	background-color: #ffffff;
}
.header_color.av_header_transparency .main_menu ul:first-child > li > a {
	color: #dadada;
}
```
Please clear your browser cache and check.

Best regards,
Mike
April 10, 2020 at 9:38 am #1202618

marion
Participant

Thanks Mike!
1 point “open”: How can I define the size of the fonts in the header image on mobile? As you can see, the text itself is too small within the mobile screen.
Thanks and best,
Marion

April 11, 2020 at 7:58 am #1202855
Rikard
Keymaster
Hi Marion,

Please try this CSS as well:
```
@media only screen and (max-width: 767px) {
.home #layer_slider_1 p {
  font-size: 14px !important;
}
}
```
Best regards,
Rikard
May 2, 2020 at 2:20 pm #1209094

marion
Participant

This reply has been marked as private.

May 2, 2020 at 11:23 pm #1209171
Mike
Moderator
Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
```
@media only screen and (max-width: 767px) { 
#top.home #layerslider_2 > div.ls-inner > div > div:nth-child(4) > div > p {
	font-size: 9px !important; 
}
#top.home #layerslider_2 > div.ls-inner > div > div:nth-child(5) > div > h1 {
	font-size: 9px !important;
}
#top.home #layerslider_2 > div.ls-inner > div > div:nth-child(6) > div > p {
	font-size: 18.07801px !important; 
    width: 200.539px !important; 
    height: 26.695px !important; 
}
#top.home #layerslider_2 > div.ls-inner > div > div:nth-child(6) > div {
	left: 59.05px !important; 
}
#top.home #layerslider_2 > div.ls-inner > div > div:nth-child(4) > div {
	left: 47.1489px !important; 
}
#top.home #layerslider_2 > div.ls-inner > div > div:nth-child(5) > div {
	left: 82.454px !important; 
}
}
```
After applying the css, Please clear your browser cache and check.

Best regards,
Mike
May 5, 2020 at 11:22 am #1209887

marion
Participant

Hi Mike, thanks for your input. But unfortunately the font style and especially size is the same as before… and too small on mobile. When I change the px in the code above, the spacing and alignment doesn’t fit anymore. Maybe you can have a look to the backend? Would be great. Thanks in advance!

Best,
Marion

May 5, 2020 at 12:52 pm #1209925

Mike
Moderator

Hi,
I adjusted your layerslider slide for mobile, first I copied your layers:

then I set the slide preview window to show the mobile view:

Then I set the new layers to only show for mobile:

and the old layers to not show on mobile:

then for the new mobile layers I adjusted the font size, I set to 80px as a guess, but you can adjust to suit:

Now on mobile it looks much better:

Please clear your browser cache and check.

Best regards,
Mike

May 5, 2020 at 2:31 pm #1209973

marion
Participant

Thanks Mike, great! And also thank you very much for your detailed explanation so I can follow your thoughts! Really appreciate.

Best,
Marion

May 6, 2020 at 12:15 am #1210147

Nikko
Inactive Moderator

Hi Marion,

We’re glad to hear that :)
Thanks for using Enfold and have a great day!

Best regards,
Nikko
Author

Posts