Hey Marijke82,

Thank you for contacting us.

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:

/* CSS - Transparent header in mobile */

 @media only screen and (max-width: 767px) { 
#top #wrap_all .av_header_transparency, 
.av_header_transparency #advanced_menu_toggle {
  background: transparent!important;
  position: absolute!important;
}}

/* End CSS */

Please check this link for more info https://kriesi.at/documentation/enfold/header/#transparent-header-on-mobile

Best regards,
Vinay

Hi,

You may not see the changes after adding styles to your child theme because:

1. Please use pure CSS in the editor I noticed you are using another processing language.

2. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
3. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
4. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

Best regards,
Vinay

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:

/* CSS - Icon list spacing */

.avia-icon-list .iconlist_content_wrap {
    margin-left: 33px;
}

/* End CSS */

Result:

Best regards,
Vinay

Hi,

Glad we could help!
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)

Best regards,
Vinay

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:

/* CSS - full width header */

/* Custom width header */
#top #header .container {
    width:100%;
    max-width: 100%;
}

/* End CSS */

For more info please check https://kriesi.at/documentation/enfold/header/#custom-header-width

Result:

You may not see the changes until the cached files are cleared in your browser.

Please perform the below steps to clear the browser cache:

1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

Best regards,
Vinay

Hey bluemonkey36,

I checked the issue on your site, it appears you already figured out or in the process of adding a modification? I notice 2 cart icons.

If you still need a fix please try the below code in Quick CSS

#menu-item-shop.cart_dropdown {
    right: 0px!important;
    top: 70px!important;
    transform:translateX(-20%);
}

Best regards,
Vinay

Hi,

If you are not using a child theme Yes the changes will be lost when the theme get’s updated.

Please check this link for more info https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#why-child-theme

Best regards,
Vinay

Hi,

@eskitaco your site looks great!

Best regards,
Vinay

Hey soniavoice,

Would you mind providing a precise link to the page, showing the elements in question? We need to be able to inspect them in order to help :)

Best regards,
Vinay

Hi,

Your site is showing blank for me to test the font varaients.

To upload and manage fonts please use the latest version of the theme and upload the fonts from Enfold > Import Export tab.

It is much easier to manager your fonts this way :)

Best regards,
Vinay

Hey digitalprint2222,

Did you try the link to another page option?

If you still have an issue please elaborate the issue so we can help you better :)

Best regards,
Vinay

Hi,

Glad you got it figured out.
To know more about enfold features please check – http://kriesi.at/documentation/enfold/
Thank you for using Enfold :)

Best regards,
Vinay

Hey Rafa,

I’m not sure what is RGPD. Did you mean GDPR ( General Data Protection Regulation ) ?

Html does work if you add the code in “Cookie Consent Message”

Here is the HTML in the message area

Result:

You need to modify the cookie message bar height to view the additional content.

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:

/* CSS - */

.avia-cookie-consent {
    background-color: rgba(0,0,0,0.95);
    min-height: 200px;
}

/* End CSS */

If you still cannot see the changes for testing purpose please disable CSS and JS merging from Performance tab.

Best regards,
Vinay

Hey premedia,

To change the overlay background color go to Enfold > Advanced Styling > Menu Links in overlay/slide out > Menu Background
To change the burger menu icon color go to Enfold > Main Menu > Burger/Mobile Menu styling > Menu Icon Color

To push the menu towards the top Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:

/* CSS - */

#top #av-burger-menu-ul {
    display: block;
}

/* End CSS */

Please check our documentation for more info https://kriesi.at/documentation/enfold/menu/#toggle-id-3

Best regards,
Vinay

Hi,

Sorry for the delay, I checked your issue and removed the below CSS code from Enfold > General Styling > Quick CSS

@media only screen and (min-width:480px) and (max-width:767px) {
  .html_header_top.html_header_sticky body#top #wrap_all #main {
    padding-top: 30px !important;
  }
  li#menu-item-search a {
      top: 0px;
  }
  .responsive #top #wrap_all .main_menu {
      top: 60px;
  }
}

@media only screen and (max-width: 1024px) {
  nav.main_menu {
    display: block !important;
  }
  .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special, #menu-item-search {
    display: block;
  }
   .av-burger-menu-main.menu-item-avia-special a {
     line-height: 310px !important;
   }
}


@media only screen and (max-width:479px) {
  .html_header_top.html_header_sticky body#top #wrap_all #main {
    padding-top: 0 !important;
  }
}

@media only screen and (max-width: 479px) {
 li#menu-item-search a {
display: none !important;
     top: 0px;
 }
 .responsive #top #wrap_all .main_menu {
     top: 60px;
 }
}
.av-main-nav > li > a span.avia-menu-text, li#menu-item-search a { position: relative; top: 60px; }

And added this code to the Quick CSS section under Enfold > General Styling

CSS Snippet:

/* CSS - for mobile header */
@media only screen and (max-width: 767px) {
#top #menu-item-search {
    display: none;
}
.responsive .av-burger-menu-main {
    position: absolute;
    top: 46px;
    right:10px;
}

}
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
}
/* End CSS */

This is how your header looks now

The large gap you see is coming from custom.css

Did you add 245px top padding to the #main div?

It has an !important in the code due to which other codes do not affect please remove the !important rule and try adding the below code if you still notice the page please get back to us.

CSS Snippet:

/* CSS - Remove top padding in mobile */

@media only screen and (max-width: 767px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0px !important;
}
}

/* End CSS */

Best regards,
Vinay