Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1193533

    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.

    #1193725

    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 1 year, 3 months ago by  Rikard.
    #1199039
    This reply has been marked as private.
    #1200961

    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

    #1202618

    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

    #1202855

    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

    #1209094
    This reply has been marked as private.
    #1209171

    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

    #1209887

    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

    #1209925

    Hi,
    I adjusted your layerslider slide for mobile, first I copied your layers:
    2020-05-05_064224.png
    then I set the slide preview window to show the mobile view:
    2020-05-05_065338.png
    Then I set the new layers to only show for mobile:
    2020-05-05_064440.png
    and the old layers to not show on mobile:
    2020-05-05_064610.png
    then for the new mobile layers I adjusted the font size, I set to 80px as a guess, but you can adjust to suit:
    2020-05-05_064830.png
    Now on mobile it looks much better:
    2020-05-05_065002.png
    Please clear your browser cache and check.

    Best regards,
    Mike

    #1209973

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

    Best,
    Marion

    #1210147

    Hi Marion,

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

    Best regards,
    Nikko

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

The topic ‘Uppercase in H3 within the Footer, transparency Header / changing font colors’ is closed to new replies.