Viewing 30 results - 1 through 30 (of 18,723 total)
  • Author
    Search Results
  • Hi,
    Try this css:

    .avia-button.avia-size-large.av-1b88t-1848646851a5a8989084337c098e76b2 {
    	font-size: 20px;
    }

    Best regards,
    Mike

    This will work!

    How can I make the font size larger?

    #1495600

    Hi,
    For that page try adding this css:

    .page-id-4370 .iconbox_left_content.avia-builder-el-9 .avia-icon-pos-left.av_font_icon{
      float: none;
      margin-right: 0;
      vertical-align: middle;
      display: inline-block;
      padding-left: 0.5em;
    }
    .page-id-4370 .iconbox_left_content.avia-builder-el-9 .iconbox_content_container strong {
      font-size: 15px;
    }

    Best regards,
    Mike

    #1495553

    Hi,

    Odd. This is not the menu style I saw yesterday. Please try to use this css code instead:

    #av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
        color: #ffffff;
        font-size: 0.8em;
    }

    To add a submenu indicator, try to add this css code:

    .av-width-submenu > a::after {
        content: "›";
        display: inline-block;
        margin-left: 6px;
        transform: rotate(90deg);
        font-size: 0.9em;
    }
    
    .av-width-submenu.av-show-submenu > a::after {
        content: "";
    }

    Best regards,
    Ismael

    #1495508

    Hi,

    Thank you for the inquiry.

    Try this css code to adjust the color and font size of the submenu items.

    .html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul li ul a {
        color: rgba(255,255,255) !important;
        font-size: 0.8rem;
    }

    The menu items with submenus should have angled brackets (>) by default.

    Best regards,
    Ismael

    #1495453

    Hey dreyerjm,
    Try is css:

    .page-id-3710 .iconbox_left_content.avia-builder-el-4 .avia-icon-pos-left.av_font_icon{
      float: none;
      margin-right: 0;
      vertical-align: middle;
      display: inline-block;
      padding-left: 0.5em;
    }
    .page-id-3710 .iconbox_left_content.avia-builder-el-4 .iconbox_content_container strong {
      font-size: 15px;
    }

    Then clear your browser cache.

    Best regards,
    Mike

    #1495394
    dreyerjm
    Participant

    Hi, I have a plugin that is showing me the newest events but the colors, fonts, and sizes dont match. How would I get those to match the theme? I highlighted the text on the website so you can see it – it is black

    #1495199

    when I upload, the server is putting the file I zipped titled “fontello-d16d12c1.zip” into the folder structure WordPress content > uploads > 2026 > 02 > fontello-d16d12c1.zip

    When I ask google etc for what to do it says a folder named avia_fonts must be placed in the uploads fold and an uncompressed folder must be placed there.
    What should the folder be named? the folder with the config.json file and css folder and font folder on the root? ipage.com is my service provider. the files created at https://fontello.com create the files. It appears the svg file is a blank file. that isn’t right. I can create a svg vector file in it but I wouldn’t know what size to make the vector file. This is a mild PITA.

    #1495147

    Thanks again, I worked with Claude to get this script I could drop in the child theme functions file, so I don’t have to copy any of the files to the child theme — lmk if you think it’s a problem. With the script and css below I got everything looking and working as it was, but now with “buttons”. After all that work, I’m wondering (and should’ve asked earlier): Do you even agree the sorting items as links were an accessibility issue? If it all looks good to you, feel free to close this thread.

    /* JavaScript to convert sorting links to buttons */
    add_action('wp_footer', 'child_masonry_links_to_buttons', 999);
    function child_masonry_links_to_buttons() {
        ?>
        <script>
        jQuery(document).ready(function($) {
            // Convert all masonry sort links to buttons
            $('.av-masonry-sort a[data-filter]').each(function() {
                var $link = $(this);
                var $button = $('<button type="button"></button>')
                    .attr('data-filter', $link.data('filter'))
                    .attr('class', $link.attr('class'))
                    .html($link.html());
                
                $link.replaceWith($button);
            });
            
            // Re-bind click events to buttons
            $('.av-masonry-sort').off('click', 'a').on('click', 'button', function() {
                var current = $(this),
                    linktext = current.html(),
                    selector = current.data('filter'),
                    masonry = current.parents('.av-masonry').eq(0),
                    container = masonry.find('.av-masonry-container').eq(0),
                    links = masonry.find('.av-masonry-sort button'),
                    activeCat = masonry.find('.av-current-sort-title');
    
                links.removeClass('active_sort');
                current.addClass('active_sort');
                container.attr('id', 'masonry_id_' + selector);
    
                if(activeCat.length) {
                    activeCat.html(linktext);
                }
    
                // Trigger isotope filtering
                var filters = selector ? {filter: '.'+selector} : {};
                filters['layoutMode'] = 'packery';
                filters['packery'] = {gutter:0};
                filters['percentPosition'] = true;
                filters['itemSelector'] = "a.isotope-item, div.isotope-item";
                filters['originLeft'] = $('body').hasClass('rtl') ? false : true;
    
                container.isotope(filters);
                
                setTimeout(function() { $(window).trigger('debouncedresize'); }, 500);
                return false;
            });
        });
        </script>
        <?php
    }
    /* sorting menu styling accessible buttons */
    .main_color .av-sort-by-term button {
        border: none;
        color: #fff;
        background: #0076a8;
        padding: 6px 15px 8px;
        text-transform: capitalize;
        font-size: 15px;
    	margin: 3px 3px 0 0;
      	font-family: 'sarabun',Helvetica,Arial,sans-serif;
    }
    .main_color .av-sort-by-term button:hover {
        background: #b6bd00;
    	transition: .25s;
    }
    .main_color .av-sort-by-term button.active_sort {
        color: #fff;
    	background: #b6bd00;
    }
    #1495129
    pelgrimrat
    Participant

    Dear people at the support forum,
    I have an issue I need your help with:
    A website I am creating is using a burger menu (also on big screens) and when activated, the website logo stays on top of the menu overlay instead of being covered by the overlay like the rest of the page.
    Website (temporary domain):

    I know this issue is created because I am using this code in the customizer:

    #top div .logo {
        z-index: 101;
        position: relative;
    }

    This code is necessary because I am using a custom layout for the header:
    menu icon left – logo middle – Instagram icon right.
    When I remove the z-index: 101 rule, the logo isn’t clickable anymore in normal circumstances (burger menu overlay not activated).

    So, is there a possibility to move the logo underneath the burger menu overlay, without loosing the normal functionality of the logo when the overlay is not active?

    This is the CSS code I use for the header layout:

    #top div .logo {
        z-index: 101;
        position: relative;}
    
    .responsive #top #wrap_all .main_menu {
        display: flex !important;}
    
    #top .main_menu, 
    #top .avia-menu {
      width: 100%;}
    
    #avia-menu #menu-item-search {
      position: absolute;
      right: 0;
      left: auto;}
    
    #top #wrap_all .av-hamburger-inner {
      display:block;
      top: 0;
      margin-top: 4px;}
    
    .html_header_top #top #wrap_all .av_logo_right #header_main .logo {
      position: relative;
      left: 50%;
      right: auto;
      margin-left: unset;
      margin-right: unset;
      transform: translateX(-50%);
      width: auto;}
    
    .responsive #top #wrap_all  .main_menu {
      width: 100%;
      display: flex !important;
      flex-flow: row nowrap;
      justify-content: space-between;
      height: inherit;}
    
    #top #wrap_all .menu-item-avia-special {
      display: block ;}
    
    .responsive #top #wrap_all #header .main_menu ul.social_bookmarks {
        display: flex;}
    
    #top #wrap_all .main_menu ul.social_bookmarks li a {
      height: 30px;}
    
    #top .main_menu .social_bookmarks li {
      width:40px;
      margin-left:5px;}
    
    @media (max-width: 767px) {
    	#top .main_menu .social_bookmarks li {
    	margin-top: -5px;}
    }
    
    #top .main_menu .social_bookmarks li.avia-svg-icon img[is-svg-img="true"],
    #top .main_menu .social_bookmarks li.avia-svg-icon svg:first-child {
      height:1.1em;
      width: auto;
      margin-top: 4px !important;}
    
    @media and (max-width: 767px) {
      .responsive #top #wrap_all .container {
        width: 95%;
        max-width: 95%;}
    
      .html_header_top #top #wrap_all .av_logo_right #header_main .logo {
        max-width: 200px;
        transform: translateX(-57%);  /* depends on how many social icons are present */ }
    }
    
    #top #wrap_all .social_bookmarks li a {
    width: 40px!important; 
    line-height: 40px!important; 
    min-height: 40px!important; 
    font-size: 26px!important;}
    
    #top #wrap_all .social_bookmarks li {
    height: 40px!important; 
    width: 60px!important;}
    
    #top #wrap_all .social_bookmarks {
      height: 60px!important;}
    
    #top #wrap_all .social_bookmarks, #top #wrap_all .social_bookmarks a, #top #wrap_all .social_bookmarks li {
    	    margin-right: -16px;}
    
    .social_bookmarks > li:hover > a {
           color: #ffffff !important;
     background: #1e251b !important;}
    
    .social_bookmarks a:visited {
        color: #1e251b !important;
        background: #ffffff !important;}

    Your help will be greatly appreciated!

    #1495095

    Meanwhile i could solve this.
    Text is visible inside the block.

    BUT when i click on it, it opens the background image which is the blue color. How can i change the url link for this one specific block? or deactivate the lightbox here? This is the code i used for:

    .referenzen  .grid-entry  .inner-entry {  overflow: hidden !important}
    
    .referenzen .grid-content {
      display:flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      position: absolute;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      padding: 10px;
      background: #1b2640 !important;
      z-index: 0;
      text-align:center;
      pointer-events: none;
    }
    
    .referenzen .grid-content * {  background: transparent !important; }
    .referenzen .image-overlay {  display: none !important; }
    .referenzen .grid-content .avia-arrow { display: none; }
    
    .referenzen .grid-entry-excerpt { font-size: 15px!important;  font-style: normal!important;  margin-bottom: -2px; color:#ffffff !important;  font-family: ffclanproregular !important; }
    
    
    • This reply was modified 2 weeks, 6 days ago by xeovision.

    Hi Ismael

    Thank you for coming back.

    Nothing special (standard plugins like staging, Yoast, etc.) and only custom CSS:

    /*Menue Button*/
    /*#top #wrap_all .header_color li#menu-item-10312.av-menu-button-colored > a .avia-menu-text {background-color:#FA7D19;}*/

    #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {background-color:#FA7D19 !important; border-color:#FA7D19 !important;}

    #menu-item-10312 .avia-menu-text {background-color:#FA7D19 !important; border-color:#FA7D19 !important;}

    /*Desktop*/
    @media only screen and (max-width: 1920px) {
    .indicates-required {display:none !important;}
    .mc-field-group label {display:none !important;}
    .mc-field-group {clear:none !important; width:32% !important; float:left !important; margin-right:13px;}
    .mc-field-group input {font-size:16px !important; padding:13px !important;}
    #mc_embed_signup .button {background-color:#2d5c88 !important; border-color:#0b3a66 !important; width:32% !important;border-radius:2px !important; height:45px !important; line-height:23px !important;}
    #mc_embed_signup .button:hover {background-color:#3d71a1 !important; border-color:#1b5080 !important;}
    }

    /*Mobil – Tablet*/
    @media only screen and (max-width: 768px) {
    .mc-field-group input {margin-bottom:0px !important;}
    .mc-field-group {clear:none !important; width:100% !important; float:left !important; margin-right:13px; margin-bottom:0px !important;}
    #mc_embed_signup .button {width:100% !important;}
    }

    /*News Übersicht Seite – Datum deaktiviert*/
    .html_elegant-blog .avia-content-slider .slide-meta {display:none !important;}
    /*Zwei Border Linien Blog Seite deaktiviert*/
    .html_elegant-blog #top .post-entry .post-meta-infos {display:none !important;}

    #top .av-menu-button > a .avia-menu-text {border-radius: 20px !important;}

    /*P-Tag move font size*/
    .p-move-h2 {font-size:40px !important; font-weight:bold;}

    /* CSS Enfold-Mailchimp-Newsletter Input fields*/
    #top .avia_ajax_form.avia-mailchimp-form input[type=’text’] {
    background: #c4dff6;
    color: #00334e;
    }
    #top .avia_ajax_form.avia-mailchimp-form .required{
    display: none;
    }

    Any thoghts?

    Thank you.

    Philipp

    #1494955

    In reply to: Icon size in Icon Box

    Hey EstudioNOVO,

    Thank you for the inquiry.

    The font size of the title and content can be adjusted directly in the Iconbox editor. To adjust the icon size, you can use the following css code:

    .iconbox_content header .iconbox_icon svg {
        width: 30px !important;
        height: 30px !important;
        left: -3px;
        position: relative;
        top: -4px;
    }

    This assumes you have selected an SVG icon.

    Best regards,
    Ismael

    Hey JennyGr,

    1. The font size can be set in the element options, look in the Styling tab. I’m not sure which button you are referring to?

    2. If you are referring to text like “A Morning in the Kindergarten”, then that is a b tag, not strong. Try using a strong tag instead, or use CSS to change it:

    b {
      color: red;
    }

    Best regards,
    Rikard

    JennyGr
    Participant

    Hi I made some adjustments to font styling which I am struggling to amend.(see web page and log in detail in provate content).

    1. Font size – I previously changed the font size for certain elements across the site and can’t work out where to change this.
    On this webpage the font for the ‘Book now’ button and the Accordion titles is too small. Where do I change this – I’d like to make a site wide change so that these content elements across the site aren’t too small.

    2. The strong colour in the accordion is magenta and I want it to to match the strong colour in the body text at the top (dark grey). I thougth I had set this site wide in Advanced Styling but it is not applying to strong text in an accordion.

    I seem to remember possibly making changes not only in the Theme styling options, but possibly in custom CSS, maybe to relative font size?
    I think I had to may have had to add some custom css to get the sidebar navigation to show larger.

    Many thanks

    #1494570

    Hi,

    Thank you for the update.

    We adjusted the css code slightly. Please make sure to purge the cache before testing. You can also adjust the font size for different screen sizes in the Styling > Font Sizes panel of each slide.

    Best regards,
    Ismael

    #1494499

    get familar with dev tools of your browser. point to the menu-item and choose on context menu : inspect or similar .

    or you can just count the li’s without knowing the ID’s:

    #av-burger-menu-ul > li .av-submenu-indicator {font-size: 30px; opacity: 1}
    #av-burger-menu-ul > li .av-submenu-indicator:before {content: "\E875";font-family: 'entypo-fontello';}
    
    #av-burger-menu-ul > li:nth-child(1) .av-submenu-indicator {color: #FFF}
    #av-burger-menu-ul > li:nth-child(2) .av-submenu-indicator {color: yellow}
    #av-burger-menu-ul > li:nth-child(3) .av-submenu-indicator {color: lightgreen}
    #av-burger-menu-ul > li:nth-child(4) .av-submenu-indicator {color: lightskyblue}

    maybe it is better to set this burger menu to be placed at a top position – try and look what is better:

    #top #av-burger-menu-ul {
      vertical-align: top;
      padding: 200px 0 !important;
    }
    #1494476

    Hey jnightingale,

    Thank you for the inquiry.

    Try to add this css code to adjust the font size of the title on mobile view:

    @media only screen and (max-width: 767px) {
      /* Add your Mobile Styles here */
      #top #wrap_all .avia-slideshow .av-slideshow-caption.av-iakm6m-705446e7ab1d9a74581bf52b6294a15c__0 .avia-caption-title {
        font-size: 42px;
      }
    }

    fsxhGku.md.png

    Best regards,
    Ismael

    Hi,

    Thank you for the information.

    To remove the background and border of the cells and place them side by side on mobile view, please add this css code:

    .main_color .av-custom-table tr:nth-child(odd),
    .main_color .av-custom-table tr:nth-child(even) {
        background: transparent;
        border: 0;
    }
    
    .av-custom-table, .av-custom-table td, .av-custom-table th {
        background: transparent;
        border: 0;
        font-size: 15px;
    }
    
    .av-custom-table tr {
        display: flex;
        gap: 10px;
    }
    

    fsxopK7.md.png

    Best regards,
    Ismael

    Hello again!

    I found it! Did it with the code-block and it worked! Sorry, that i didn´t find earlier!

    But I still have following problems/questions:
    1. When the screen size gets small (mobile), the year switches above the text and doesn´t stay beside the text. The text can switch into a second line but should stay beside the year. Do you know, what i mean? How can i change this?
    2. How can I remove the frame and the grey background of the table? I would need a table without any frame and background.
    3. How can I edit the font and the font size?
    Thanks for your help
    Johannes

    #1494378

    Why don’t you post the page in question? It’s much easier to give advice that way.
    As mentioned above, unfortunately there is no demo page where this hamburger variant is set.

    find the menu-item ID and :

    .menu-item-556 .av-submenu-indicator {
      color: green;
      font-size: 40px;
      opacity: 1;
    }
    
    .menu-item-556 .av-submenu-indicator:before {
      content: "\E875";
      font-family: 'entypo-fontello';
    }

    the last rule is for heaving a little bolder icon

    #1494267

    Hi,
    I believe Ismael’s solution is for the masonry items (posts) were a custom field can be added, but you want to use masonry gallery images where the custom field is not an option.
    Instead try this function in your child theme functions.php:

    /**
     * Add SOLD overlay to specific masonry gallery items based on the data-av-masonry-item attribute
     */
    function add_sold_overlay_to_masonry_gallery() {
        // Define which masonry items should show as SOLD
        $sold_items = array(973, 866, 865);
        
        // Convert to JavaScript array
        $sold_items_js = json_encode($sold_items);
        ?>
        <script>
        jQuery(document).ready(function($) {
            // Items to mark as sold
            var soldItems = <?php echo $sold_items_js; ?>;
            
            // Add sold-item class to each specified masonry item
            soldItems.forEach(function(itemId) {
                $('.av-masonry-gallery .av-masonry-entry[data-av-masonry-item="' + itemId + '"]').addClass('sold-item');
            });
        });
        </script>
        
        <style>
        /* SOLD overlay styles */
        .av-masonry-entry.sold-item {
            position: relative;
        }
    
        .av-masonry-entry.sold-item::before {
            content: "SOLD";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 0, 0, 0.85);
            color: white;
            font-size: 24px;
            font-weight: bold;
            padding: 10px 30px;
            z-index: 10;
            letter-spacing: 2px;
            border: 3px solid white;
        }
    
        .av-masonry-entry.sold-item::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0);
            z-index: 9;
        }
        </style>
        <?php
    }
    add_action('wp_footer', 'add_sold_overlay_to_masonry_gallery');

    At the top of the function define which masonry items should show as SOLD in this line:

    $sold_items = array(973, 866, 865);

    these are the media library attachment IDs
    f6RZUyN.png
    this is the result:
    f6RmCAl.png

    Best regards,
    Mike

    #1494234

    Hello Ismael,
    the code is not working, I cannot see any visible difference in the front end.

    If I put instead this code

    .woocommerce form .password-input {
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    	position: relative
    }
    .woocommerce form .password-input input {
    	padding-right: 2.5rem !important;
    	margin-bottom: 0;
    }
    .woocommerce form .password-input input::-ms-reveal {
    	display: none
    }
    .woocommerce form .show-password-input {
    	background: transparent;
    	border: 0;
    	color: #222;
    	cursor: pointer;
    	font-size: inherit;
    	padding: 0;
    	position: absolute;
    	right: .7em;
    	top: 50%;
    	transform: translateY(-50%);
    }
    .woocommerce form .show-password-input.display-password {
    	color: #999
    }
    .woocommerce form .show-password-input::after {
    	font-family: WooCommerce;
    	speak: never;
    	-webkit-font-smoothing: antialiased;
    	content: "\e010" !important;
    	margin-top: -2px;
    	vertical-align: middle;
    	display: inline-block
    }

    Which I found on the other thread, I see a rectangle instead of the eye, because clearly the content: “\e010” !important; is not linking anything properly,
    Any clue?

    #1494205

    Hey ricedean,

    Thank you for the inquiry.

    You can try this filter in the functions.php file:

    add_filter( 'avf_masonry_loop_entry_content', 'avf_masonry_loop_entry_content_mod', 10, 4 );
    
    function avf_masonry_loop_entry_content_mod( $content, $entry, $entries, $key ) {
        $is_sold = get_post_meta( $entry->ID, 'sold', true );
    
        if ( $is_sold ) {
            $content .= '<span class="av-masonry-sold-overlay">SOLD</span>';
        }
    
        return $content;
    }
    

    Then add this css code:

    .av-masonry-entry {
        position: relative;
    }
    
    .av-masonry-sold-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 48px;
        font-weight: 900;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #ff0000;
        background: none;
        z-index: 10;
        pointer-events: none;
    }

    You’ll need to add a custom field named “sold” to each entry.

    Best regards,
    Ismael

    #1494097
    Jan Thiel
    Participant

    Hey there,

    running Enfold 7.1.3 on WordPress 6.9 with PHP 8.2.
    WordPress Multisite.

    We face an issue where a site hits the OOM with 512M Memory configured when opening any Icon Font Related Avia Builder Element Popup in the wp-admin editor.

    Tracing the issue down we pinpointed the SVG handling to be quite an issue regarding memory usage.

    The site uses 9 Icon Fonts with a total size of ~7M. Only a part of that is actually SVG content. So let’s assume we talk about 1,5MB SVG files.

    $ wp-content/uploads/dynamic_avia/avia_icon_fonts/
    `
    1.3M ./font-awesome-bold-01
    1.4M ./font-awesome-bold-02
    911K ./font-awesome-bold-03
    1.9M ./font-awesome-brands
    454K ./font-awesome-regular
    42K ./k-iconpack01
    283K ./k-iconpack02
    46K ./m-icon-set-01
    24K ./m-signet
    `

    Parsing these files lead to memory allocations of around 700MB.

    Related files are “class-font-manager.php” and “class-svg-images.php” with the functions around set_svg_markup and get_icon_html. As well as followup native PHP functions down the stack trace (simplexml_load_string and substr_replace in particular).
    Besides the OOM the SimpleXML calls consume about 1s alone processing time.

    We identified several issues with the current implementation that could lead to this issue without being able to easily provide a “fix” as everything is quite tightly couples around the in-memory “cache” handling:

    Unlimited cache: The protected $cache stores complete SVG strings without size limits → uncontrolled increase in RAM usage.

    Unvalidated input loading: file_get_contents / curl_exec load entire files/responses without upfront limits → large memory spikes.

    cURL without abort callback: Remote downloads can grow arbitrarily large (no Content-Length or progress checks).

    String operations create copies: substr_replace, preg_match_all, str_replace on large strings increase peak memory consumption.

    DOM parsing with SimpleXML: isColoredSVGWithGradients uses simplexml_load_string → the entire XML tree is loaded into memory, potentially multiplying memory usage and introducing XXE/DoS risks.

    Missing size validation: No limits are enforced before parsing or caching (local or remote).

    Potential format-parsing risks: Regex-based extract_svg_attributes on large inputs can be computationally expensive.

    We use Datadog to create Traces and Profile of our application. We were able to confirm that the SimpleXML related code as well as the regex based ops on the SVG file content trigger the OOM in most cases.
    I can easily share the Flame Graphs of the Memory Allocation and the Processing Times if you like. We find them to be most helpful in understanding what actually happens at the runtime in code :-)

    The issue is reproducible for this single site so the issue will be most certainly based on the actual icon font files although they are valid SVG. So we are happy to give any fix a test before any coming release. As we operate a server cluster, just provide me the diffs / changes and we will apply and test them ourselves.

    Let me know if you need any more information. I shared a link to the icon font files in the private content section.

    Best Regards,
    Jan

    #1494087

    Hi,

    Thank you for the update.

    Are you referring to the h1 in the Text Block element? The font size is added as an inline style, so you’ll need to remove it or override it with custom css.

    <span style="font-family: montserrat, sans-serif; font-size: 64px;">Passerelles et Compétences</span>
    

    Example:

    @media only screen and (max-width: 767px) {
    
      /* Add your Mobile Styles here */
      section.av_textblock_section.av-mfe046ge-53ca3090203dd5a03e44d0f3d1765a66 .avia_textblock h1 span {
        font-size: 42px !important;
      }
    }

    Best regards,
    Ismael

    #1494037

    Hey SurigliaStudio,
    When I test your site the “Taglie” button doesn’t create a mobile style flyout menu, I assume that you now have the plugin disabled, but I think that I understand. I have created a custom function that will create a mobile style overlay menu from a sticky button on the right using a image that you can choose:
    fUawEAX.md.png
    fUaOLwF.md.png
    and on mobile the overlay is about 95% of the screen.
    The function uses the Named Menus from your WordPress menus to show:
    fUaQF6B.md.png
    In Configuration there is a line to choose your menu image/icon and the default menu to show on all pages:
    fUcd32j.md.png
    and below you can add as many additional menus with an array of pages that they will show on:
    fUcFI4e.md.png
    The code also has all of the css built-in for styling if you want to adjust.
    Add this code to your child theme functions.php file, if you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:
    fUcTO4R.jpg
    then add the above code and save.

    /**
     * Add Sticky Button with Fly-out Menu
     * Add this to your Enfold child theme's functions.php
     */
    
    function custom_sticky_menu_button() {
        // Configuration - Change these values as needed
        $button_image = '/wp-content/uploads/2026/01/menu.png'; // Update path to your PNG
        $menu_slug = 'sticky menu'; // Default menu slug - change as needed
        
        // Optional: Set different menu based on page ID
        $current_page_id = get_the_ID();
        // Example: Use different menu for specific pages
         if (in_array($current_page_id, array(1028, 1080, 1031, 1034))) {
            $menu_slug = 'sticky menu two';
         }
    	if (in_array($current_page_id, array(1376, 1331, 1277, 1283))) {
            $menu_slug = 'sticky menu three';
         }
        
        // Get the menu
        $menu_items = wp_get_nav_menu_items($menu_slug);
        
        if (!$menu_items) {
            return; // Exit if menu doesn't exist
        }
        ?>
        
        <!-- Sticky Button -->
        <div id="sticky-menu-btn" class="sticky-menu-button">
            " alt="Menu">
        </div>
        
        <!-- Fly-out Menu Overlay -->
        <div id="flyout-menu-overlay" class="flyout-menu-overlay">
            <div class="flyout-menu-close">×</div>
            <nav class="flyout-menu-content">
                <?php
                wp_nav_menu(array(
                    'menu' => $menu_slug,
                    'container' => false,
                    'menu_class' => 'flyout-nav-menu',
                    'fallback_cb' => false
                ));
                ?>
            </nav>
        </div>
        
        <style>
            /* Sticky Button Styles */
            .sticky-menu-button {
                position: fixed;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
                width: 50px;
                height: 50px;
                border-radius: 50%;
                cursor: pointer;
                z-index: 9998;
                transition: opacity 0.3s ease;
                box-shadow: 0 2px 10px rgba(0,0,0,0.3);
                overflow: hidden;
            }
            
            .sticky-menu-button img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            
            .sticky-menu-button.hidden {
                opacity: 0;
                pointer-events: none;
            }
            
            /* Fly-out Menu Overlay */
            .flyout-menu-overlay {
                position: fixed;
                top: 0;
                right: -100%;
                width: 25%;
                height: 100vh;
                background: #fff;
                z-index: 9999;
                transition: right 0.4s ease;
                box-shadow: -2px 0 10px rgba(0,0,0,0.2);
                overflow-y: auto;
            }
            
            .flyout-menu-overlay.active {
                right: 0;
            }
            
            /* Close Button */
            .flyout-menu-close {
                position: absolute;
                top: 20px;
                right: 20px;
                font-size: 36px;
                cursor: pointer;
                color: #333;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                transition: color 0.3s ease;
            }
            
            .flyout-menu-close:hover {
                color: #000;
            }
            
            /* Menu Content */
            .flyout-menu-content {
                padding: 80px 30px 30px;
            }
            
            .flyout-nav-menu {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            
            .flyout-nav-menu li {
                margin: 0 0 15px 0;
            }
            
            .flyout-nav-menu a {
                display: block;
                padding: 12px 0;
                color: #333;
                text-decoration: none;
                font-size: 16px;
                transition: color 0.3s ease;
                border-bottom: 1px solid #eee;
            }
            
            .flyout-nav-menu a:hover {
                color: #000;
            }
            
            /* Sub-menu styles */
            .flyout-nav-menu .sub-menu {
                list-style: none;
                margin: 10px 0 0 20px;
                padding: 0;
            }
            
            .flyout-nav-menu .sub-menu a {
                font-size: 14px;
                padding: 8px 0;
            }
            
            /* Mobile Styles */
            @media (max-width: 768px) {
                .flyout-menu-overlay {
                    width: 95%;
                }
            }
        </style>
        
        <script>
            (function() {
                var btn = document.getElementById('sticky-menu-btn');
                var overlay = document.getElementById('flyout-menu-overlay');
                var closeBtn = document.querySelector('.flyout-menu-close');
                
                // Open menu
                btn.addEventListener('click', function() {
                    overlay.classList.add('active');
                    btn.classList.add('hidden');
                    document.body.style.overflow = 'hidden'; // Prevent body scroll
                });
                
                // Close menu
                closeBtn.addEventListener('click', function() {
                    overlay.classList.remove('active');
                    btn.classList.remove('hidden');
                    document.body.style.overflow = ''; // Restore body scroll
                });
                
                // Close on overlay click outside menu
                overlay.addEventListener('click', function(e) {
                    if (e.target === overlay) {
                        overlay.classList.remove('active');
                        btn.classList.remove('hidden');
                        document.body.style.overflow = '';
                    }
                });
            })();
        </script>
        
        <?php
    }
    add_action('wp_footer', 'custom_sticky_menu_button');
    

    Adjust the image, menus, and page IDs to suit.

    Best regards,
    Mike

    #1493972

    Topic: Even more CSS Problems

    in forum Enfold
    Sonno
    Participant

    Hi Enfold Support Team,

    I’m experiencing persistent CSS issues with the Enfold theme on my WordPress site that are affecting responsiveness and styling, particularly for mobile and desktop layouts. Custom CSS added via Quick CSS or the child theme’s style.css often fails to apply, gets overridden, or doesn’t update despite clearing all caches (browser, plugins, server-side). Changes to theme options like advanced styling, colors, or typography also don’t reflect on the frontend reliably.

    Specific Problems
    Caching/Loading Issues: Styles revert or show defaults even after disabling CSS/JS merging and compression in Enfold > Performance.

    Responsive Design Breaks: Headings get cut off on iPad/smaller screens (e.g., change font-weight to bold, font-size smaller, text-transform uppercase based on viewport).

    Typography Overrides: Headings and text styles (bold, small caps, uppercase/lowercase transforms) fail to adapt responsively across devices, requiring constant !important hacks that still don’t stick.

    Overrides and Conflicts: Theme options ignore inputs; unclosed Quick CSS blocks break everything; plugin conflicts (e.g., forms, checkouts) exacerbate issues.

    Troubleshooting Steps Tried
    Cleared caches everywhere and tested in incognito mode across browsers (Chrome, Safari, Firefox).

    Disabled caching plugins, performance optimizations, and child theme customizations temporarily—no fix.

    Updated WordPress, Enfold, PHP (tested 7.4 vs. 8), and relevant plugins; issue persists across devices including Mac OS.

    A staging site/credentials can be provided for testing. Any guidance on debugging responsive heading styles, CSS caching, or fixes would be greatly appreciated!

    • This topic was modified 1 month, 3 weeks ago by Sonno.
    #1493926

    here is a way to have the option by classes to style those sticky posts by an own selector:

    /**
     * Add a custom CSS class to sticky posts for styling purposes
     */
    function add_sticky_classes( $classes, $class, $post_id ) {
        if ( is_sticky($post_id) ) {
            $classes[] = 'is-sticky-post';
            $classes[] = 'stickypost-' . $post_id;
        }
        return $classes;
    }
    add_filter( 'post_class', 'add_sticky_classes', 10, 3 );
    /* Style sticky items in Masonry */
    .is-sticky-post .av-inner-masonry::after {
        content: 'Featured';
        position: absolute;
        top: 10px;
        right: 10px;
        background: #000;
        color: #fff;
        padding: 2px 8px;
        font-size: 10px;
        text-transform: uppercase;
        z-index: 5
    }
    #1493820

    In reply to: Text Align Justified

    because your css is merged – i can not say where you set this rule – but this might be the reason for it:
    it is in this css block – with comment:

    /**handles:avia-module-blog**/
    /* ======================================================================================================================================================
    #Blog Styles
    ====================================================================================================================================================== */
    #top .fullsize .template-blog .post .entry-content-wrapper {
      text-align: justify;
      font-size: 1.15em;
      line-height: 1.7em;
      max-width: 800px;
      margin: 0 auto;
      overflow: visible;
    }

    if you do not find it – you can overwrite that rule by higher selectivity:

    #top #wrap_all .fullsize .template-blog .post .entry-content-wrapper {
      text-align:  left;
    }

Viewing 30 results - 1 through 30 (of 18,723 total)