Hey So Evolve,

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

#top .price {
    color: red;
}

Best regards,
Rikard

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

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

#top #header_meta .sub_menu * {
	line-height: 20px;
	height: 17px;
	width: auto;
	vertical-align: top;
}
#top #header_meta .sub_menu a:hover {
	color: red;
}

adjust the color to suit.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey vantagepointmg,
I recommend having your menu chang into a burger menu for 1366px and below. To do this try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 1366px) {
  #top #header .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header .av-burger-menu-main {
      cursor: pointer;
      display: block!important;
  }
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

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

#top a {
  text-decoration: underline;
}
#top #header a,
#top #footer a,
#top #socket a,
#top a.avia-button,
#top a.more-link {
  text-decoration: none;
}

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

Best regards,
Mike

Hey James,

Thank you for the inquiry.

You can try this script to toggle the display of the default menu and burger menu on scroll.

function av_custom_inline_script()
{
    wp_add_inline_script( 'jquery', 
        "
    (function($) {
        $(document).ready(function () {
            if (window.innerWidth > 989) {
                var burger = $('.html_header_sidebar #top div .av-burger-menu-main');
                var menu = $('.responsive.html_header_sidebar #header .av-main-nav > li').not('.av-burger-menu-main, .av-active-burger-item');
                $(window).scroll(function () {
                  if ($(this).scrollTop() > 200) {
                    burger.show();
                    menu.hide();
                  } else {
                    menu.show();
                    burger.hide();
                  }
                });
            } 
          });
    })(jQuery);
    "
    );
}
add_action( 'wp_enqueue_scripts', 'av_custom_inline_script' );

Best regards,
Ismael

• This reply was modified 2 years, 4 months ago by Rikard.

Hi,
So for example /village-walk/ is a page and not a post, nonetheless you can add a top padding with this css:

#top.page-template-default .container_wrap_first {
	padding-top: 50px;
}

please adjust the 50px to suit.

Best regards,
Mike

Hi,
The Classic Editor will not get new features, so in that term it will not be “updated” but it’s not going away, so you can always use it in the future.
Please see this article: How to Add or Remove Blank Space Between WordPress Blocks (4 Ways)
If you need space at the top of your posts that you created with the Classic Editor then please link to one, I didn’t find one. If you need space at the top of a post that was created with the ALB, then use the space element, like the post linked below.
But please remember to not “switch” posts or pages from one editor to another, the editors are not switchable.

Best regards,
Mike

Hey Michael,
The Enfold Theme Options ▸ Import/Export ▸ Custom Font Manager only works with Google Webkit Fonts, if you are not using a Google Webkit Font you will need to use the @font-face rule in your css or try the Use Any Font plugin and add css rules to apply your font.
Perhaps these threads will also help you:

Best regards,
Mike

Hey osi666,
There is not a specific setting for this layout, were you able to achieve the desktop layout that you wanted?
Please set the theme options so your desktop header is the way that you wish, and then link to your site so we can examine your mobile header to help.
What is the maximum width that you consider “mobile” 767px, 1024px, or 1366px ofr this layout?
Do you want the header to be sticky on mobile? The theme doesn’t offer this because the header would take too much room for small devices.
Please link to your site and try to explain fully, perhaps a screenshot of your expected results would help.

Best regards,
Mike

Hi,

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

Best regards,
Rikard

Hi,
To achieve this it would be best to use the ALB elements and columns to create this on your page and then set these elements to only display on mobile, while your other item only display on desktop. If you were only changing the order of the items it may be possible with some simple css, but also changing the page layout with new columns widths would be a big job with a lot of css. So it would be best to use the ALB elements and columns to create this on your page.

Best regards,
Mike

Hey ibgestionprivee,
This seems to be a duplicate of one of your other posts that has already been answered:
Unfortunately we don’t have a way that you can just import the menu, try reviewing our Maga Menu documentation, then choose your mega menu “pages” and then where you want the columns:

and drag the menu items in to stagger them.

Best regards,
Mike

Hey zweifelmedia,
For the arrow try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .avia-arrow {
	display: none;
}

and try using the “no scaling” image size if you want them to be different sizes.

Best regards,
Mike

Hi,
Thanks for the screenshots, unfortunately as Ismael pointed out your plugin has stripped the HTML out and all of the text is in one paragraph tag:

so ther is no way to style only half of the text.
But when I look at your webshop all of the items have the same text “Scarf in knittet and feltet pure wool” so based on this text we can add the italic to the text.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
function wrapText(node, text, wrapper) {
    if (node.nodeType === 3) {
        const idx = node.nodeValue.indexOf(text);
        if (idx !== -1) {
            const span = wrapper.cloneNode();
            const wordNode = node.splitText(idx);
            wordNode.splitText(text.length);
            span.appendChild(wordNode.cloneNode(true));
            wordNode.parentNode.replaceChild(span, wordNode);
        }
    } else if (node.nodeType === 1) {
        Array.from(node.childNodes).forEach(child => {
            wrapText(child, text, wrapper);
        });
    }
}

const textToWrap = "Scarf in knittet and feltet pure wool";
const wrapperSpan = document.createElement('em');

document.addEventListener("DOMContentLoaded", function() {
    wrapText(document.body, textToWrap, wrapperSpan);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_script', 99);

Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .all_colors p em {
    font-style: italic;
    font-family: "open sans";
    font-weight: 400;
}

then clear your browser cache and check.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
I added this css:

.avia-menu>ul.av-main-nav li.menu-item-top-level:not(#menu-item-287) {
    flex-grow: 1;
}

this added the flex-grow to every item except the last one giving us the trouble, I don’t think that it is noticeable because it’s a longer text length and it’s at the end, but this solves the other two issues.
Please clear your browser cache and check.

Best regards,
Mike

Hey Diana,
Thank you for the link to your site and the screenshots, some of them didn’t work, so as I understand this text link on your homepage is not landing correctly for you:

it is meant to land on a empty color section:

when I test it lands correctly, the blue in this screenshot is your empty color section:

I tested with Windows in Chrome & Edge and Mac in Safari & Chrome, and all worked correctly, only Firefox on both Windows & Mac didn’t work correctly, I’m not sure why firefox is having an issue, but to try to adjust for the firefox error I added this code to your functions.php:

function custom_smooth_scroll_to_id_for_firefox_script() { ?>
  <script>
function slowScrollToAnchor() {
  var urlHash = window.location.hash;

  if (urlHash) {
    var target = document.querySelector(urlHash);
    if (target) {
      var targetPosition = target.offsetTop;
      var startPosition = window.pageYOffset;
      var distance = targetPosition - startPosition;
      var duration = 1000;
      var startTime = null;

      function scrollAnimation(currentTime) {
        if (startTime === null) startTime = currentTime;

        var timeElapsed = currentTime - startTime;
        var scrollY = easeInOutQuad(timeElapsed, startPosition, distance, duration);
        window.scrollTo(0, scrollY);

        if (timeElapsed < duration) {
          requestAnimationFrame(scrollAnimation);
        }
      }
      function easeInOutQuad(t, b, c, d) {
        t /= d / 2;
        if (t < 1) return c / 2 * t * t + b;
        t--;
        return -c / 2 * (t * (t - 2) - 1) + b;
      }

      requestAnimationFrame(scrollAnimation);
    }
  }
}

window.addEventListener('load', slowScrollToAnchor);
</script>
  <?php
}
add_action('wp_footer', 'custom_smooth_scroll_to_id_for_firefox_script', 99);

and after clearing your site cacke and my browser caches for all of my test browsers the anchor link is now correct, even in Firefox. Most of my tests landed correctly even on firefox, but in one case on firefox the script scrolled the page backwards to land in the land place. So the script shows to correct the issue.
If you want to adjust the one second delay you can change var duration = 1000; to a higher or lower number 1000 equals one second, it seem to work good just the way it is.

BTW – your Header Footer Code Manager plugin don’t seem to allow PHP snippets, so if you are not going to use a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets.

Best regards,
Mike

Hi,

Thank you for the update.

The screenshot above is not accessible. Please try to use Savvyify, Imgur or Dropbox to upload and share the screenshot.

Did you add this css code somewhere?

.container {
    max-width: 1010px;
}

Please try to override it with this css code.

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

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

  /* Add your Desktop Styles here */
  #footer .container {
    max-width: 1360px;
  }
}

Or try to adjust the Maximum Container Width value in the Enfold > General Layout > Dimensions tab.

Best regards,
Ismael