Hi,

Thank you for the update.

We just tested the code again and it seems to be working as it should.

Have you tried removing this css code?

#top #header.header-scrolled a {
    color: #ffffff !important;
}

Please provide a screenshot of the element that you’d like to change. You can use platforms like Savvyify, ImgBB, PostImages or Dropbox.

Best regards,
Ismael

Hey collinsfgc2025,

Thank you for the inquiry.

You have to look for the View icon in the top right corner of the editor. Please check the screenshot below:

Let us know if you have more questions.

Best regards,
Ismael

Hey ti2media,
Try adding this snippet to your child theme functions.php:

function add_sticky_info_box() {
    ?>
    <style>
        .sticky-info-box {
            position: fixed;
            bottom: 120px;
            right: 20px;
            width: 300px;
            height: 300px;
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 20px;
            box-sizing: border-box;
            transition: opacity 0.3s ease;
        }
        
        .sticky-info-box.hidden {
            display: none;
        }
        
        .sticky-info-box-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .sticky-info-box-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin: 0;
            flex: 1;
        }
        
        .sticky-info-box-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease;
        }
        
        .sticky-info-box-close:hover {
            color: #333;
        }
        
        .sticky-info-box-message {
            flex: 1;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            overflow-y: auto;
        }
        
        .sticky-info-box-button {
            background: #0073aa;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-box-button:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle {
            position: fixed;
            bottom: 120px;
            right: 50px;
            width: 50px;
            height: 50px;
            background: #0073aa;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-toggle:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle.visible {
            display: flex;
        }
    </style>
    
    <div class="sticky-info-box" id="stickyInfoBox">
        <div class="sticky-info-box-header">
            <h3 class="sticky-info-box-title">Important Information</h3>
            <button class="sticky-info-box-close" id="closeInfoBox" aria-label="Close">×</button>
        </div>
        <div class="sticky-info-box-message">
            <p>This is your information box! You can customize this message to display any content you'd like to share with your visitors.</p>
        </div>
        <a href="/your-page-url" class="sticky-info-box-button">Learn More</a>
    </div>
    
    <button class="sticky-info-toggle" id="infoToggle" aria-label="Show information">ℹ</button>
    
    <script>
        (function() {
            var infoBox = document.getElementById('stickyInfoBox');
            var closeBtn = document.getElementById('closeInfoBox');
            var toggleBtn = document.getElementById('infoToggle');
            
            // Close the info box
            closeBtn.addEventListener('click', function() {
                infoBox.classList.add('hidden');
                toggleBtn.classList.add('visible');
            });
            
            // Show the info box again
            toggleBtn.addEventListener('click', function() {
                infoBox.classList.remove('hidden');
                toggleBtn.classList.remove('visible');
            });
        })();
    </script>
    <?php
}
add_action('wp_footer', 'add_sticky_info_box');

Then adjust the title, message, buttone text & link to suit. You can also adjust the CSS to change colors, etc.
It places the box & info button 120px from the bottom so they are above the scroll-top button, ratio than have them move if the scroll-top shows, which would not be so good.

Best regards,
Mike

Hi,

Please continue here: https://kriesi.at/support/topic/color-section-not-showing-color-or-image-background/#post-1492088

Best regards,
Ismael

Hi,

Thank you for the link.

Add this code in the functions.php file to load the Cairo font:

function av_load_google_fonts() {
    wp_enqueue_style(
        'google-fonts-cairo',
        'https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap',
        array(),
        null
    );
}
add_action('wp_enqueue_scripts', 'av_load_google_fonts');

After that, add the following css to make the font the default body text:

#top, body, p, span, li, a, h1, h2, h3, h4, h5, h6, input, textarea, button {
    font-family: 'Cairo', sans-serif;
}

Let us know the result.

Best regards,
Ismael

Hey ti2media,

Thank you for the inquiry.

The color of the email field is different due to this css code:

#top .kontaktformular input[type='text'] {
    background-color: #ffffff !important;
    border: none !important;
    color: #0d3c63 !important;
}

To correct it, please replace it with the following css:

#top .kontaktformular input[type='text'], #top .kontaktformular input[type='email'] {
    background-color: #ffffff !important;
    border: none !important;
    color: #0d3c63 !important;
}

Then add this css code to adjust the width of the form fields:

#top fieldset {
    margin-bottom: 20px;
    overflow: hidden;
}

Best regards,
Ismael

Hey ti2media,

Please try this CSS as well:

#scroll-top-link.avia-svg-icon svg:first-child {
  margin-top: 7px;
}

Best regards,
Rikard

Hey jimmiemoreland,

Thank you for the inquiry.

You can add this css code to make the header sticky on mobile. Make sure to adjust the top padding based on the header’s height.

@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }

  .responsive.html_header_top #top #main {
    padding-top: 120px !important;
    margin: 0;
  }
}

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

Try to add this css code to show the full image:

#top .fullsize .template-blog .big-preview img {
    min-width: 300px;
    background-size: contain;
}

Best regards,
Ismael