Solved: Enfold theme WooCommerce store message overlapping menu and logo

Kriesi Enfold Theme preview image in WordPress
Kriesi Enfold Theme preview image in WordPress

Using Enfold theme one may stumble upon an issue with the store message of WooCommerce overlapping menu and logo partially.

Annoying and could have been avoided if the theme were designed more properly. When looking at how the store message is propagated to the top of the page, you will discover its code actually is loaded below the footer of the page and positioned then absolutely and fixed-ly to the top of the page.

I tried many ways via JavaScript to make the header position dependent on the top message being present or not, but so many ways tried, I still failed. So I have to present a method that will solve the problem only PARTIALLY. And btw, it is recommended by the Enfold developers as well.

Partial, not too good, but still a method how to solve the Enfold theme WooCommerce store message overlapping issue

  1. Go to Appearance -> Customize
  2. At the bottom of the left menu select Custom CSS
  3. To the custom CSS box paste this CSS style
    header {padding-top: 27px !important;}
  4. Publish changes
  5. Reload page to see the message and header pushed down a bit

PS, if you accidentally closed the store message already, you can easily just see it again by opening an incognito browser window.

The issue with this solutinon

The issue remains is that when users click to Hide the store message, the room (padding-top) at the top remains. So it is not a perfect solution. But still – many cases this can be used to solve it.

If I will have more time I will look into it more deeply how to solve it dynamically so that closing the store message also reduces the newly set padding of the header to 0.


Post Author: Tom Pai