Home Forums Weaver Xtreme Theme header widget z index Re: header widget z index

#32645
scrambler
Moderator
OK, this is not as simple as to change the z-index.

The reason is that the only way the image would be above the menu bar is if its container (the header widget area) was above the menu bar.

But right now, you are creating the overlap by using a negative margin on the menu bar, which means the Whole menu bar would then be under the header Widget area, and therefore none of the menu items would be clickable.

Before devising the best method we should know what else is going to be in the header.
You should add all the other header widget area content, and remove the -100px top margin on the menu bar

Then we can check what is the best method to overlap the image on the menu bar.
It will probably be along adding the rule below in the Header Widget Area BG CSS+ box to make it over the menu bar
{z-index:2002;}
Then make the menu bar as high as you need but do not use a negative top margin
Then create the overlap by using a negative bottom margin on the image with the rule below in Main Options > FOnts & Custom > Custom CSS Rule box.
#header-widget-area .widget-1 img {margin-bottom:-100px;}

But there may be a better / easier way, which we can devise once all the header elements are in place