LayerSlider Error on Homepage

Hey entrepreneurgirl,
Sorry for the late reply, the error you are seeing on your homepage is because you have a layerslider element on your homepage, but you have no sliders. To correct please remove the element from your page:

As you customize your site with new images or text you won’t need to worry about losing these changes when the site updates. As you make customizations in the “advanced stylings” panel you won’t lose any of those settings when you update either.

If you make css customizations and add the css to the Quick CSS field, this will also be safe from updates:

But if you plan to add functions in the functions.php file you will lose this when your site updates, so in this case installing the child theme will protect your changes when you add the functions to the child theme functions.php.
Please use our prebuilt Child Theme here.
For the preloader, you can have it show only on the homepage with a function, but we don’t have a function to show it only once per session. Please see this solution or this solution.
Please let us know if this helps.

Best regards,
Mike

Hi,
Glad to hear this worked for you. I tested your maintenance plugin by logging out and going to a few known page url’s and the plugin hid them from me, so your plugin is working well and I can’t think of a better one. Enfold does offer this functionality in the theme settings, but since you have the plugin in place you should go ahead and use it.

The images of guitars are actually products, to not have them not show on your “Shop” page, aka, your store, I found this function in the woocommerce documentation, and I added it to your child theme functions.php:

/**
 * Exclude products from a particular category on the shop page
 */
function custom_pre_get_posts_query( $q ) {

    $tax_query = (array) $q->get( 'tax_query' );

    $tax_query[] = array(
           'taxonomy' => 'product_cat',
           'field' => 'slug',
           'terms' => array( 'acoustic-guitars' ), // Don't display products in the clothing category on the shop page.
           'operator' => 'NOT IN'
    );


    $q->set( 'tax_query', $tax_query );

}
add_action( 'woocommerce_product_query', 'custom_pre_get_posts_query' );  

Best regards,
Mike

Hi,
When you want the category to so again remove the function above, or I could remove it for you now and you can change the items to draft status.
For the mega menu links, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.header_color .main_menu ul ul a {
	color: #000 !important;
}
.header_color .main_menu ul ul a:hover {
	color: red !important;
}

Best regards,
Mike

Hi,
To make the cells larger & the background image, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.home_section_2 .sub_banner_product {
    height: 100vh !important; 
}
.home_section_2 .sub_banner_product img {
    height: 100vh !important; 
}

This css makes the cells & image 100% of visual height (100vh), but this will stretch the image some unless you use images that have the same ratio, that is higher than wide.

For your last question, you asked for the image itself show FIRST and THEN the overlay when you rollover but this is what I’m seeing, perhaps you would like it the other way, or perhaps I misunderstood?
Please see the screenshot in Private Content area.

**As I review my answer I think I’m a little confused, is the site you linked to a shopify store that you wish to model and not the one you need css for? In this case the css will not help you, can you link to your page? I don’t see the same grid layout on your site.

Best regards,
Mike

Hi,
Thank you for the feedback, to change the overlay to hover, please go to the image in the grid, then Caption > Caption Appearance option and change it to “only display on hover”

I changed one as an example, please clear your browser cache and check.

As for the size of the images, you can use most any size image and it will be cropped, for the image in the cell that I adjusted for you it is 1500px by 630px, some of the other images are 1732px by 1155px. Please take a look at the images in the media library and click on them to see the details.

Best regards,
Mike

Hi,
Please note that when you removed the image from the second cell to test the image size you added the image back as a background image to the cell and not in an image element like all of the other cells. This is why you don’t have the same options. Please try adding the image to an image element within the cell.

For having the text show always and the background color only on hover, we do not have that option built-in, but I have created this effect in the first cell by changing the Caption > Caption Appearance option to “only display on hover” as above, and then adding this css in your Enfold Theme Options > General Styling > Quick CSS field:

/* to show text on grid cell image always & background color on hover */
#collections .av-image-caption-overlay {
    opacity: 1 !important; 
}
#collections .av-caption-image-overlay-bg {
	background-color: transparent !important; 
}
#collections .av-image-caption-overlay:hover .av-caption-image-overlay-bg {
	background-color: #6786a1 !important; 
}

Please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the late reply, since we don’t have an option to apply the hover effect while always showing the caption, the css I wrote before requires that the Image > Caption > Caption Appearance is set to “Only display on hover”

I have set this for you, please check.
I have adjusted the image for you so there is more space around the guitar and set the upload size to 1485×1200 so it will show as 495×400, please check.
I assume that you will have more images to resize like this so I’m attaching the PhotoShop file and the sample image I used for this in the Private Content area. If you don’t have PhotoShop you can send it to someone on Fiverr with your other images and have them all done for $5

Best regards,
Mike

Hi,
Well the documentation search bar is below the header which may be a little easier, for that you would just add a code block element to the top of your page and include the search shortage below.
But if you want it in your header you would first add a widget area to your header.
Then create the search shortcode using this function.
And then add some css to suit, I’m not sure if this css will suit you but we can assist after your search bar is in place.

Best regards,
Mike

Hi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.cart_dropdown_link > span:before {
	font-size: 30px !important;
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike