Changing The Header Menu z Index In OceanWP

I found an issue with the Elementor Mega Menus block with OceanWp header menus. The mega menus would appear on top of the OceanWP header menus if the dropdown overlaps a row of Elementor Mega Menus. To fix that use this small bit of custom css to change the z-index of the header.

#site-header {
z-index: 1000;
}

Continue Reading Changing The Header Menu z Index In OceanWP

Customizing The Header Background Image in Astra Theme For WordPress

Astra theme for WordPress, at least the free version does not allow background images in the header through the customizer. In order to add a background image to the header you will need to add some css. Go to Appearance/Customize/Additional CSS.

.main-header-bar {background-image: url("http://yoursite.com/wp-content/uploads/2017/10/your-header-logo.png");background-repeat: no-repeat;
}

Here’s a bit of CSS that addds a drop shadow and background color to the header.
.main-header-bar {background: #FFBC00;box-shadow: 0px 3px 3px #b8b8b8;background-image: url("http://yoursite.com/wp-content/uploads/2017/10/your-header-logo.png");background-repeat: no-repeat;
}

Continue Reading Customizing The Header Background Image in Astra Theme For WordPress

Hiding Woocommerce Description Tabs In OceanWP

Are you building a simple Woocommerce store using OceanWP? I have a simple store where I just want the short description area on top without the Description,  Additional Information and Reviews tabs.

The easiest way to do that is to hide those sections using a bit of css.

In WordPress go to Appearance/Customize/Custom CSS/JS and add this piece of css.

.woocommerce div.product .woocommerce-tabs {
display: none;
}

Continue Reading Hiding Woocommerce Description Tabs In OceanWP