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