Hi,
Thank you for your patience I changed this css:

@media only screen and (min-width: 990px) {
    .av-logo-container .inner-container {
        display: flex;
        flex-direction: row-reverse;
    }

    @media only screen and (min-width: 990px) {
        /* Add your Desktop Styles here */ .av-logo-container .inner-container .widget #searchform {
            width: 100%;
            min-width: 500px;
        }
    }

    .av-logo-container .inner-container .widget {
        display: flex;
        order: 3;
        flex-basis: 80%;
        right: -15%;
        top: -5%;
    }

    #header_main > .widget {
        display: none;
    }

    .av-logo-container .inner-container .widget #searchform {
        width: 100%;
    }

    .av-logo-container .inner-container .widget #searchform .ajax_search_response {
        background-color: #fff;
        z-index: 3;
    }

    .header_color #search-6 input[type=submit] {
        background-color: #da291c;
        color: #fff;
    }

    .header_color #search-6 input[type=submit]:hover {
        background-color: #da291c;
        color: #fff;
    }

    #top #header.header_color .widget input[type=text] {
        border-color: ebebeb;
        border-radius: 3px;
    }

    #top #header.header_color .widget #searchsubmit {
        border-radius: 0 3px 3px 0;
    }

    #top #header.header_color .widget #searchform #searchsubmit {
        font-size: 16px;
    }

    .av-logo-container .inner-container #menu-item-shop {
        display: flex;
        order: 2;
    }
}

to this:

@media only screen and (max-width: 989px) {
	#header_main > .widget {
	display: none;
}
}	
@media only screen and (min-width: 990px) and (max-width: 1439px) {
  .av-logo-container .inner-container .widget #searchform {
    width: 100%;
    min-width: 500px;
  }
  .av-logo-container .inner-container .widget {
	display: flex;
    order: 3;
    flex-basis: 65%;
    right: -15%;
    top: -5%;
}
}
@media only screen and (min-width: 1440px) { 
    .av-logo-container .inner-container .widget {
        display: flex;
        order: 3;
        flex-basis: 80%;
        right: -15%;
        top: -5%;
    }
    .av-logo-container .inner-container .widget #searchform {
    width: 100%;
    min-width: 380%;
  }
}	
@media only screen and (min-width: 990px) {
.av-logo-container .inner-container {
	display: flex;
    flex-direction: row-reverse;
}

#header_main > .widget {
	display: none;
}  
.av-logo-container .inner-container .widget #searchform {
	 width: 100%;
}
.av-logo-container .inner-container .widget #searchform .ajax_search_response {
	background-color: #fff;
    z-index: 3;
}
.header_color #search-6 input[type=submit] {
    background-color: #da291c;
    color: #fff;
 }
.header_color #search-6 input[type=submit]:hover {
    background-color: #da291c;
    color: #fff;
 }
  #top #header.header_color .widget input[type=text] {
	border-color: ebebeb;
	border-radius: 3px;
}
#top #header.header_color .widget #searchsubmit {
    border-radius: 0 3px 3px 0;
}

#top #header.header_color .widget #searchform #searchsubmit {
 	font-size: 16px;
}
.av-logo-container .inner-container #menu-item-shop {
	display: flex;
    order: 2;
}
}

to update your live site copy your snippet named “header widget placement css” to your live site.

Best regards,
Mike

Hi,

The reason why the CSS is only applying on mobile is because you have placed it after an open media query:

@media only screen and (max-width:767px) {
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    font-size: 20px;
    color: white !important;
}

I added the CSS at the top for you, and it’s working as expected. Please review your site and close the media query at the proper location.

Best regards,
Rikard

Hi,

Thanks for the clarification. Please try this instead:

@media only screen and (max-width: 767px) {
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul .current-menu-item {
    background: red;
  }
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:active,  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:focus  {
    font-size: 20px;
    color: yellow !important;
  }
}

Best regards,
Rikard

Hi,

Thanks for that. Please try this instead:

@media only screen and (max-width: 767px) {
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul .current-menu-item {
    background: red;
  }
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li.current-menu-item  a {
    font-size: 20px;
    color: yellow !important;
  }
}

Best regards,
Rikard

Hi,
Thanks Guenni007, your transfer_fontsize_to_backgroundsize script is a nice touch :)

Best regards,
Mike

Hi,
This thread covers a couple of different methods and I think that it might be confusing.
So if you want to use color icons, then you would use Guenni007’s example, the easiest path is to upload the png images to your media library and then for each one choose a existing theme icon that you would probably never use as a placeholder, for example the keyboard ( ue83a ):

and then use this css to replace it with your image:

[data-av_iconfont="entypo-fontello"][data-av_icon="\e83a"]:before{font-size:0;width: 40px;display: inline-block;background-image: url(/wp-content/uploads/2024/05/tree.svg) !important}

now whenever you use the keyboard icon on your site your new image will show:

If you want to use B&W icons you can take the B&W PNG images and convert them to SVG, then follow Guenni007’s steps to fix them for Fontello then upload the SVG to Fontello to create your icon font:

then download the new icon font zip file and upload it to Enfold Theme Options ▸ Import/Export ▸ Iconfont Manager and then they will show in your icon list.

Best regards,
Mike

Hi,

Thank you for the inquiry.

1.) You can adjust the style of the burger menu items in the Enfold > Advanced Styling panel. Look for the element under the Main Menu (Icon) section. You can also use this css code:

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li {
    line-height: 1em;
    font-size: 2em;
}

Please make sure to toggle the Enfold > File Compression settings and purge the cache.

2.) Add this script to the functions.php file to make the close icon fade out on scroll down and fade in again on scroll up.

function ava_custom_script_fade_scroll()
{
    ?>
    <script>
        (function ($)
        {
            $(document).ready(function () {
                var lastScrollTop = 0;
                var element = $('.av-hamburger.av-hamburger--spin.av-js-hamburger.av-inserted-main-menu.is-active');
                $(window).scroll(function () {
                    var st = $(this).scrollTop();
                    if (st > lastScrollTop) {
                        element.fadeOut();
                    } else {
                        element.fadeIn();
                    }
                    lastScrollTop = st;
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_fade_scroll');

Best regards,
Ismael

Hi,

Thank you for the info.

We adjusted the code in the Quick CSS field a bit. Please make sure to purge the cache before checking the page.

  #menu-item-shop .cart_dropdown_link {
    padding: 10px;
    font-size: 20px
  }

  .responsive.html_cart_at_menu #top .main_menu .menu>li:last-child {
    padding-right: 0;
    margin-right: 10px;
  }

Best regards,
Ismael

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

header .menu .avia-menu-text {
    text-transform: uppercase;
}

it is the css from your file: https://jabonescalvo.com/c/themes/jabonescalvo/css/app.css perhaps you will want to add it to your staging site Quick CSS:

/* TAG REDEF */
body, 
h1, h2, h3, h4, h5 {
	text-rendering: optimizelegibility;
	-webkit-font-smoothing: antialiased;
}

/* ENFOLD REDEF */
.av-special-heading .av-subheading { /*font-family: 'Playfair Display', serif;*/ }

/* HEADER */
header.av_header_transparency #header_meta .phone-info.with_nav span, 
header.av_header_transparency #header_meta .sub_menu a { /*color: #000 !important;*/ }
header .menu .avia-menu-text { text-transform: uppercase; }

/* HOME */
#home_slider img { margin-right: 50px; }

/* BREADCRUMBS */
.rank-math-breadcrumb { font-size: 14px; }

/* PAGINAS */
#cabecera_pagina .content { padding-bottom: 15px; }
#cabecera_pagina .avia_textblock { text-decoration: underline; }

/* BARRA LATERAL PAGINAS */
aside .widget_text {
	/*background: url(); */
	padding: 20px;
}

/* CATEGORIES */
.slide-meta { display: none; }

/* POST */

/* CONTACT */

/* LANDINGS */
body.page-landing-base .av_font_icon, 
body.page-auditoria-web .av_font_icon { display: inline-block; } 
body.page-landing-base .av_font_icon a, 
body.page-auditoria-web .av_font_icon a { text-decoration: none !important; } 

/* FOOTER & SOCKET */
#footer #text-4 { margin-bottom: 0; }
#footer .avia_combo_widget { margin-top: 0; }
.cookie-notice-container a { 
	color: #fff; border: 1px solid #eaeaea; 
	padding: 3px 5px;
	border: 1px solid #eaeaea; 
}

/* MQs */
@media only screen and (max-width: 767px) {
	h1 { font-size: 32px !important; }
	h2 { font-size: 28px !important; }
}

Best regards,
Mike

Hey Guenter,

The filters are in ..\enfold\css\dynamic-css.php line 129ff.

‘avf_dynamic_css_additional_vars’:

Is located inside :root{ …. }
Simply return additional vars (pseudo code only):

function my-xxx( $output )
{
$output .= "--your-font-size-theme-h3: 20px;\n";
$output .= "--your-font-size-theme-h4: 20px;\n";

return $output;
}

‘avf_dynamic_css_additional_vars’ is the same but outside any selectors. You are free to return anything you like – it must be valid CSS rules
e.g. a media query with vars.

Best regards,
Günter

Hi,
To change the h1 font size on single posts try this css:

#top.single-post #wrap_all .all_colors .post-entry h1.post-title.entry-title {
	font-size: 20px;
}

I’m not sure what you mean by changing your image size, when you upload an image WordPress creates thumbnails of it to be used in different situations, often cropping your image, but for best results you should resize you image before you upload it, here is a free online resizer. If you need further help with this please open a new thread and explain in more detail including the sie you want the image to show and what size you are uploading.
Please note that we ask that you create a new thread for each issue, this helps other users find solutions based on the opening subject line quicker and helps keep the thread length manageable and on topic for multiple mods to assist. Thank you for your understanding.

Best regards,
Mike

Hey Christian,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
(function($) {
  $(function() {
    function replaceElementTag(targetSelector, newTagString) {
      $(targetSelector).each(function(){
        var newElem = $(newTagString, {html: $(this).html()});
        $.each(this.attributes, function() {
          newElem.attr(this.name, this.value);
        });
        $(this).replaceWith(newElem);
      });
    }
    replaceElementTag('.post-entry h2.post-title.entry-title ', '<h4></h4>');
  });
}(jQuery)); 
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
In the code change: <h4></h4> to suit. Note that this may not change the font size, if you also want to change the font size try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title {
	font-size: 20px;
}

and adjust to suit.
If this doesn’t help please include the url to the page in question so we can take a closer look.

Best regards,
Mike

Hi,
To change the post h2 font size, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .all_colors .post-entry h2.post-title.entry-title {
	font-size: 20px;
}

adjust the font-size to suit.

Best regards,
Mike

Hi,
Perhaps try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .all_colors h2.tribe-events-widget-events-list__header-title {
	font-size: 20px;
	font-weight: 600;
	font-family: "open sans";
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike