Hey!

Try adding this code to the Quick CSS:

#top.woocommerce-page .av-parallax.avia-full-stretch {
    transform: none !important;
    height: 100% !important;
}

#top.woocommerce-page .av-parallax-inner {
    background-size: contain;
}

Cheers! 
Josue

Hey!

Try adding this at the very end of your theme / child theme functions.php file:

function add_category_name($classes = '') {
   if(is_single()) {
      $category = get_the_category();
      $classes[] = 'category-'.$category[0]->slug; 
   }
   return $classes;
}
add_filter('body_class','add_category_name');

That should set the category slug as a body class, that way you’d know if a Post of certain category is being show and adjust the CSS accordingly:

#top.category-events-rides #header .av-main-nav > li > a {color: #808080;}
#top.category-events-rides #header .av-main-nav > li#menu-item-523 > a {color: red;}

Makes sense?

Cheers!
Josue

Hey sundara88,

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

@media only screen and (max-width: 767px) {
div#header_meta.container_wrap.container_wrap_meta {
    min-height: 80px;
    padding-top: 10px;
}}

Best regards,
Vinay

Hey Freek,

Using the below code will make the content the heading “EEN HECHT TEAM DAT BREED INZETBAAR IS” a 2 col layout in mobile. It appears you are using 2 images a logo and “WHAT” in different col hence the list appears one below the other.

@media only screen and (max-width: 767px) {
.responsive #top.page-id-118 .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    width: 45%;
    float: left;
    display: inline-block!important;
}}

A workaround would be to enable custom css class name support http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and hide the logo and image in mobile using the below code.

/*Show only in mobile or desktop*/

@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}

@media only screen and (max-width: 768px) {
.only_desktop { display: none !important; }}

Best regards,
Vinay

Hey kilimats,

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

#top .avia-post-nav {
    max-width: 100px;
}

It’s not clear what you are trying to achieve? If the above don’t work for you please elaborate on the end result you want if possible with a mockup and a link to view the element in question. Kindly remove any custom code added to this element in question which is not working for you and let us know.

Best regards,
Vinay

• This reply was modified 9 years, 8 months ago by Vinay.