Hey DermaBBSaar,
Thanks for your question, but the site that you have linked to doesn’t seem to be built with Enfold and doesn’t use the LayerSlider.
For Enfold & the LayerSlider on mobile, typically Enfold doesn’t have a transparent header for mobile, so on mobile the LayerSlider will be below the header, while on desktop with a transparent header the LayerSlider shows to the top behind the header.
Also in the LayerSlider, typically the desktop slider is in a landscape format, but mobile devices use a portrait format, so a desktop slider will scale down to show the whole slider.
Typically people will create two sliders one of desktop and the other in a portrait layout to show on mobile, if they want more that a scaled down slider.
If you have some experience with the LayerSlider, it is possible to use one slider and have the desktop and mobile elements and layout set for all devices, but this can be tricky, here is a basic example of the LayerSlider device options used to show different elements and different sizes. You could also watch some YouTube tutorials. But it is a lot easier to use two sliders and display one or the other.
So if this describes your situation please give this a try.

Best regards,
Mike

Hey bbarasa,
To change the text-transform of H tags you can go to Enfold Theme Options ▸ Advanced Styling ▸ All Headings (H1-H6) and change the text-transform to none:

or you can try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .template-page .entry-content-wrapper h1,#top .template-page .entry-content-wrapper h2 {
    text-transform: none;
}

To change the HR element, choose the custom option and then adjust to suit:

I didn’t see a HR element on the page that you linked to.

Best regards,
Mike

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

@media only screen and (min-width: 768px) and (max-width: 1023px) { 
#top.home .entry-content-wrapper .no_margin.av_one_third {
	width: 50%;
}
#top.home .entry-content-wrapper .no_margin.av_one_third.first {
	clear: right;
}
}

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,
The code Ismael posted above worked for me changing the backend “portfolio” labels to “sites” after I adjusted it some:

add_action('after_setup_theme', function() {
	remove_action('init', 'portfolio_register');
});

add_action('init', 'portfolio_register_mod');
function portfolio_register_mod()
{
	global $avia_config;

	$labels = array(
		'name' => _x('sites', 'post type general name','avia_framework'),
		'singular_name' => _x('sites', 'post type singular name','avia_framework'),
		'add_new' => _x('Add New', 'sites','avia_framework'),
		'add_new_item' => __('Add New Sites Entry','avia_framework'),
		'edit_item' => __('Edit Sites Entry','avia_framework'),
		'new_item' => __('New Sites Entry','avia_framework'),
		'view_item' => __('View Sites Entry','avia_framework'),
		'search_items' => __('Search Sites Entries','avia_framework'),
		'not_found' =>  __('No Sites Entries found','avia_framework'),
		'not_found_in_trash' => __('No Sites Entries found in Trash','avia_framework'),
		'parent_item_colon' => ''
	);

    $permalinks = get_option('avia_permalink_settings');
    if(!$permalinks) $permalinks = array();

    $permalinks['portfolio_permalink_base'] = empty($permalinks['portfolio_permalink_base']) ? __('sites', 'avia_framework') : $permalinks['portfolio_permalink_base'];
    $permalinks['portfolio_entries_taxonomy_base'] = empty($permalinks['portfolio_entries_taxonomy_base']) ? __('sites_entries', 'avia_framework') : $permalinks['portfolio_entries_taxonomy_base'];

	$args = array(
		'labels' => $labels,
		'public' => true,
		'show_ui' => true,
		'capability_type' => 'post',
		'hierarchical' => false,
		'rewrite' => array('slug'=>_x($permalinks['portfolio_permalink_base'],'URL slug','avia_framework'), 'with_front'=>true),
		'query_var' => true,
		'show_in_nav_menus'=> true,
		'taxonomies' => array('post_tag'),
		'supports' => array('title','thumbnail','excerpt','editor','comments')
	);

	$args = apply_filters('avf_portfolio_cpt_args', $args);
	$avia_config['custom_post']['portfolio']['args'] = $args;

	register_post_type( 'portfolio' , $args );

	$tax_args = array(
		"hierarchical" => true,
		"label" => "Sites Categories",
		"singular_label" => "Sites Category",
		"rewrite" => array('slug'=>_x($permalinks['portfolio_entries_taxonomy_base'],'URL slug','avia_framework'), 'with_front'=>true),
		"query_var" => true
	);

 	$avia_config['custom_taxonomy']['portfolio']['portfolio_entries']['args'] = $tax_args;

	register_taxonomy("portfolio_entries", array("portfolio"), $tax_args);

	//deactivate the avia_flush_rewrites() function - not required because we rely on the default wordpress permalink settings
	remove_action('wp_loaded', 'avia_flush_rewrites');
}

but to change the permalinks from ‘portfolio-items’ to ‘sites’ you will need to adjust the permalink field and then resave the permalinks:

then the database will be updated:

You will need to do this because you can not overwrite the register-portfolio.php file in the child theme and the original file still add the portfolio function, otherwise you will have your new CPT and the portfolio CPT both showing in the permalinks options.
Or you can try laptophobo’s plugin option.

Best regards,
Mike

Hi,
Thanks for sharing Guenni007, since you also want a simple black arrow with no outline also add this css to Guenni007’s:

#top .avia-slideshow-arrows a {
    color: #000;
}

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,
Try adding padding to suit, this is an example:

@media only screen and (min-width: 767px) { 
.js_active .av-tab-section-tab-title-container {
display: flex!important;
justify-content: space-around;
align-items: flex-end;
padding: 0 50px;
}
}
#top .av-inner-tab-title {
    text-transform: none;
}

note the added code: padding: 0 50px;

Best regards,
Mike

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

#top:not(.home) #wrap_all .container_wrap_first {
    min-height: 75vh;
    background-image: url(/wp-content/themes/enfold/images/background-images/floral-dark-compressed.png) !important;
    background-repeat: repeat;
}

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 Tilman,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 767px) { 
.js_active .av-tab-section-tab-title-container {
display: flex!important;
justify-content: space-around;
align-items: flex-end;
}
}
#top .av-inner-tab-title {
    text-transform: none;
}

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,
To have a second blockquote color like green, you will need to add a custom class the blockquote, it looks like you are using Text Elements like this:

so switch to the Text tab and add the class: green

then add the css:

#top #wrap_all .all_colors blockquote.green {
    border-color: green;
}

this is the expected results:

Best regards,
Mike

Hey UPON,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .formcraft-datepicker .ui-datepicker-title select {
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    box-shadow: none;
    padding: 0 0.5em!important;
    height: 2.9em;
    vertical-align: top;
    margin: 0;
    border: 0;
    background: 0 0;
    cursor: pointer;
    width: auto;
    display: inline-block;
    font-size: inherit;
    border-radius: 0;
}

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.
This in the expected results:

Best regards,
Mike

Hey Dave,

You can find this custom code you added in the Appearance > Customize > Additional CSS at line 7 ( https://i.imgur.com/k0kQJeY.png ):

li.dropdown_ul_available:not(#menu-item-5472)::after {
    content: "▼";
    color: #210e23;
    position: absolute;
    top: 31px;
    left: -3px;
	 font-weight: bold;
}

After removing it, make sure to clear any server-side, plugin-based, and browser caches.

Regards,
Yigit

Hey,

Please try using the following code instead:

#top .avia-logo-element-container .slide-image
{
  background: transparent;
}

Cheers!
Yigit

Hi,

Thanks for the update. The Tabs and Tab Section are different elements, so they don’t have the same options unfortunately. You have the option to put the tabs on the top or bottom with the Tab section, but not on the side. We’ll look at the possibility to implement such a feature in the future though.

Best regards,
Rikard

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

#top #wrap_all .all_colors blockquote {
    border-color: red;
}

and change the color to suit, and then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hey Anouk,
For your blog page, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.html_elegant-blog #top .post-entry .post-title, 
.html_elegant-blog .avia-content-slider .slide-entry-title {
    text-transform: none;
    color: red;
}

Feel free to change 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 northorie,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .av-social-link-instagram:hover a, #top #wrap_all .av-social-link-instagram a:focus {
    color: #fff;
    background-color: purple;
}

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 sophiasbiti,
To align your two icons side-by-side and center them in the page, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.page-id-3264 .avia-builder-el-20 {
	text-align: center;
}
#top.page-id-3264 .avia-builder-el-20 .avia-image-container {
	display: inline;
}

the expected results:

To have the icons closer you will need to choose images with less empty space around them, here you can see the empty space:

Best regards,
Mike

Hey Hector Moya,
Thanks for your question, but we don’t have any experience with the Kadence blocks, and I’m not sure how you would be able to use a block plugin within the Enfold Advanced Layout Builder since it doesn’t support “blocks”. Typically we don’t recommend using any other builders as they tend to conflict with the ALB, and the ALB can not be removed from Enfold.
I don’t see a practical way to create your pages with the Gutenberg editor and use the functionality of the Enfold elements.
I took a look at your page, specifically the header, but it seems to be fullwidth. Perhaps if your create a test page where you can demonstrate the issue, we can recommend so css, but I’m not sure if you will experience more conflicts as you create your site using the Kadence blocks, I would recommend using the Enfold elements to create your site.
That said if I had to use the Kadence blocks for a full-width hero header, I would try to use the Kadence blocks shortcode and inject the hero header using the ava_after_main_container hook, here is an example
If Kadence blocks doesn’t have a shortcode you could create one, or try some css like this to make the child element fullwidth when the parent is not:

.hero_container {
  width: 100vw !important; 
  position: relative !important; 
  left: calc(-50vw + 50%) !important; 
}

Please note that using the contact form which is not appropriate for support questions, please log in to the support forum and open a new thread if you need further assistance.
If you are unable to login to the support forum because you don’t have a activate support contract, please try going to your Theme Forest account and renew your support and then log in to the support forum and open a new thread.

Best regards,
Mike

Hey Lene,

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

@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks {
    display: block;
}
}

Best regards,
Rikard