[Resolved] menu tabs gradually cover header element on decreasing browser width

[Daniel]

I’ve activated a header element on the front page that includes a slide show.

1. I’m trying to understand why the primary navigation covers the slideshow when a second line of menu tabs appears (as I decrease the size of the browser window). I thought having the .metaslider container be position:relative; would take care of that, but it doesn’t.
2. I’d like to add an overlay to the slideshow with a partial transparency so I can add text on top. How do I create the color overlay?

Thanks!

[David]

Hi there,

1. edit the Header Element and on the Site Header tab change the Merge with Content to No Merge.
This will stop the content from sliding behind the navigation.

2. Slightly tricker go the Page Hero tab :

a. In the Element Classes field add: hero-has-overlay
b. Add this HTML below the Slider Shortcode:

<div class="hero-overlay">
<!-- put your text content in here -->
</div>

c. Save the Header Element and add this CSS to your site:

.hero-has-overlay {
    position: relative;
}
.hero-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
}

[Daniel]

Bam! Both worked like a charm. This is such a great plugin. My experience with support and with the product itself have been excellent. Thank you.

[David]

Awesome – glad to hear that and to be of help.

[Author]

Posts