Z – Index

Hello there,

Is this what you want?

If you want to move your slider indicator to the back of the menu overlay, you can change your css from this:

@media only screen and (min-width: 10px)
div.superSlider .iconIndicator {
    position: absolute;
    z-index: 111;
    top: calc(50% - 15px);
    font-size: 30px;
    cursor: pointer;
    color: #222;
}

to this:

@media only screen and (min-width: 10px)
div.superSlider .iconIndicator {
    position: absolute;
    z-index: 2;
    top: calc(50% - 15px);
    font-size: 30px;
    cursor: pointer;
    color: #222;
}

Note that you only have to lower the z-index value from 111 to 2.

Hope that helps.

• This reply was modified 1 year, 7 months ago by Saad Ahyat Hasan.

Thank You very much Saad Ahsan , The above code is working fine when I change it in the Inspect Element but , there is no change when I put the exact code in the CSS Stylesheet of WordPress Custom CSS.

Is there something to do with index /directory because in the Inspect ,you can see some line of Index in the above code .

Just look at it once more please.Would be very kind of you .

It’s not uncommon for changes to CSS to sometimes not take effect immediately due to browser caching. To ensure that your recent CSS updates are applied correctly, I recommend performing a “hard refresh” of your website. This will force your browser to fetch the latest version of the page and its associated assets, including the updated CSS.

To perform a hard refresh, please follow these steps based on your operating system and browser:

Windows:

1. With your browser window open, press Ctrl + F5 on your keyboard.

macOS:

1. With your browser window open, press Command + Shift + R on your keyboard.

After performing a hard refresh, revisit your website to see if the CSS changes have taken effect. If you still don’t see the changes, here are a few additional steps you can take:

1. Clear Browser Cache: Clearing your browser’s cache will remove stored versions of web pages and assets, ensuring that you’re seeing the most up-to-date content. Instructions for clearing the cache vary by browser, but you can typically find this option in your browser’s settings or preferences menu.
2. Check CSS Code: Double-check the CSS code you’ve added or updated to ensure that there are no typos or errors that might be preventing the changes from being applied.
3. Inspect Elements: Use your browser’s built-in developer tools (usually accessible by right-clicking on the page and selecting “Inspect” or pressing F12) to inspect the elements on your website. This can help you verify if the updated CSS is being loaded and applied correctly.
4. Temporary Deactivate Caching Plugins: If you’re using any caching plugins on your WordPress site, temporarily deactivate them while you’re making and testing CSS changes. Caching plugins can sometimes delay the appearance of updates.

If you’ve followed these steps and are still experiencing issues, please don’t hesitate to reach out to us for further assistance. We’re here to help you get your CSS changes applied and ensure your website looks just the way you want it to.

Thank You very much Saad Ahsan . It’s working fine now . The above code was correct ,only braces for Media Query was missing . The problem was happening because of Cache . It worked automatically after few hours , once the cache got updated.

Thank You for the time , the site is now ready to launch .