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

Home Forums Support menu tabs gradually cover header element on decreasing browser width

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1163119
    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!

    #1163131
    David
    Staff
    Customer Support

    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);
    }
    
    #1163174
    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.

    #1163223
    David
    Staff
    Customer Support

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.