Hi,

Great, I’m glad that you found a the correct option. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thank you for the info.

The issue is due to this css code:

.responsive #top .avia-slideshow-inner, .responsive #top .avia-slideshow-inner img {
        height: 450px !important;
    }
}

What is it for? Please remove the css code or adjust it accordingly.

Best regards,
Ismael

Hi,

Thank you for the screenshot.

The elements hidden in the desktop view are also contained inside Columns and Color Sections, which have their own padding and margins, creating extra spaces. Please configure the visibility of the Columns or the parent element instead of the child elements. We also recommend grouping the elements intended for mobile devices in a single Color Section so that you don’t have to adjust the visibility of each element.

Best regards,
Ismael

Hi,

Thank you for the screenshot.

To align the flags, please add this css code:

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .menu-item-wpml-ls-58-en a, .responsive #top #wrap_all .menu-item-wpml-ls-58-da a {
    padding: 0 !important;
  }

  #top #wrap_all #header #av-burger-menu-ul li.menu-item-wpml-ls-58-en, #top #wrap_all #header #av-burger-menu-ul li.menu-item-wpml-ls-58-da {
    width: 100px;
    display: flex;
    flex-direction: row;
    left: 50px;
    position: relative;
    top: 30px;
  }

  .responsive #top #wrap_all .menu-item-wpml-ls-58-en .sub-menu, .responsive #top #wrap_all .menu-item-wpml-ls-58-da .sub-menu{
    margin-left: 10px;
    margin-top: 2px;
  }
}

Best regards,
Ismael

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,
When I check the svg logo is the same for mobile & desktop, but on desktop your header is transparent so the background color allows the light third line of text to be seen, while the mobile header is white so you can’t see the text.
You could add this css to make the third line of text green like the second line on mobile:

@media only screen and (max-width: 767px) { 
.av-contains-svg #Layer_1 .cls-3 {
  fill: #b0cf6b;
}
}

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thank you for the update.

To create space between the menu title and the social icons, try adding this css code:

#top nav #av-burger-menu-ul .only-burger.menu-item-social .social_bookmarks {
    margin-top: 0;
}

#top nav #av-burger-menu-ul .only-burger.menu-item-social > a {
    margin-bottom: 25px;
}

#top #wrap_all nav #av-burger-menu-ul .only-burger.menu-item-social .social_bookmarks li {
    line-height: 1.4em !important;
}

Best regards,
Ismael

Hey Steve,

Thank you for the inquiry.

You may need to use Columns instead of the Grid Row element and adjust the margins and padding to remove the default spaces between the columns. To make it overlap with the hero section, you can apply a negative top margin to the row. To do this, edit the first column in the row, enable the Row Settings > Row Margins > Custom Margins, and then configure the Custom Top and Bottom Margin as previously suggested. Let us know if this works.

Best regards,
Ismael

Hi,

Great, I’m glad to hear that you found a solution. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Where would you like to position the language switcher exactly? Please provide a screenshot. You can display them again in mobile view using this css code:

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

  /* Add your Mobile Styles here */
  .responsive #top .av-main-nav .menu-item-language {
    display: inline-block;
  }
}

To display the social icons in the footer, go to the Enfold > Footer panel, then toggle the Social Icons option.

Best regards,
Ismael

Hi,

1. Please try the following in Quick CSS under Enfold->General Styling:

.select2-container–default .select2-results__option–highlighted[aria-selected], .select2-container–default .select2-results__option–highlighted[data-selected], #top .select2-results {
color: #000 !important;
}

2. The background styling seems to be added inline in the paragraph, maybe the content was copied from somewhere? You can try to remove the styling directly in the content.

3. Please try the following in Quick CSS under Enfold->General Styling:

.woocommerce-terms-and-conditions-checkbox-text {
color: #fff;
}

Best regards,
Rikard

• This reply was modified 1 year, 7 months ago by Rikard.
• This reply was modified 1 year, 7 months ago by Rikard.

Hey CharlieTh,

Thank you for the inquiry.

1.) You can adjust the space between the menu items by adjusting the Line Height property of the Menu Links in overlay/slide out element in the Enfold > Advanced Styling panel. You can also use this css code:

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

2.) To move the social icons to the center, please add this css code:

#top nav #av-burger-menu-ul .only-burger.menu-item-social {
    display: flex;
    flex-direction: column;
}

#top nav #av-burger-menu-ul .social_bookmarks {
    margin: 0 auto;
}

Best regards,
Ismael

Hey laptophobo,

Thank you for the inquiry.

We’ve found a script error that might be related to the issue. What happens when you remove this script?

<script>
    (function($) {
        var int = '';
        function a() {
            var isMobile = $('.av-burger-menu-main').css('display')
              , htmlString = $('#header_main .social_bookmarks').find('li a')
              , mobileMenu = $('.av-burger-overlay')
              , socialString = [];

            if (isMobile == 'none')
                return;
            if ($('.burger-social').length)
                clearInterval(int);

            htmlString.each(function() {
                var socialClass = $(this).parent('li').attr('class')
                  , socialItems = $(this).wrap('<li class="' + socialClass + ' av-active-burger-items burger-social"></div>').parent().unwrap();
                socialString.push(socialItems);
            });

            $(socialString).each(function() {
                $(this).appendTo('#av-burger-menu-ul');
            });
        }

        $('#header').on('mousedown', '.av-main-nav-wrap', function() {
            int = setInterval(function() {
                a();
            }, 500);
        });

    }
    )(jQuery);
</script>

Best regards,
Ismael

Hey Munford,

Thank you for the inquiry.

The social icons and language switchers are intentionally hidden on mobile view due to the lack of space in the header. If you want to display them again, you can try this css code:

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header .social_bookmarks,
  .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
  }

  #top .av-burger-menu-main.menu-item-avia-special {
    left: auto;
  }
}

Best regards,
Ismael

Hi,
Odd, I’m not seeing that on my desktop when the css is added:

please use this screen resolution link to tell us when you see it.
Also ensure that you cleared your cache.

Best regards,
Mike

Hi,
I added this css for the search icon to show:

#top #content1 .av-main-nav > li.menu-item#menu-item-search {
	display: block!important;
}
#top #content1 .av-main-nav > li.menu-item#menu-item-search a {
	color: #92B743;
	text-align: left;
}
#top #content1 .main_menu .menu li#menu-item-search {
	float:none;
}

Best regards,
Mike

Hi,
Thanks, this page has a page ID class of: page-id-17847 and since there is only one scroll-down-link you can just use this:

#top.page-id-17847 .scroll-down-link {
color: red !important;
font-size: 150px !important;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4) !important;
}

Best regards,
Mike