Tips for avoiding tagline text overlapping with other content

I'm facing a dilemma with my Bootstrap template where my tagline overlaps all other content on the page.

When I scroll down, the text lays over my logo and navbar, creating a messy look especially on smaller screens. Despite trying to adjust the z-index, the text disappears completely when I position the elements. Can someone help me out? Here are some snippets of my code: 

HTML (h1 headers causing the issue)
    <span id="index.html">
        <section class="creative-banner">
            <div  data-nav-dots="false" data-nav-arrow="true" data-items="1" data-sm-items="1" data-lg-items="1" data-md-items="1" data-autoplay="true">
                <div class="item"> <img class="img-fluid" src="images/home.jpg" alt="person sitting on bench">
                    <div class="creative-text text-left">
                        <h1 class="iq-font-white iq-mt-10"><strong>Go Ahead, Share Your Idea <br>With The World</br></strong></h1> <!--Original class = "text-uppercase iq-font-white display-3"-->
                        <h1 class="iq-font-white iq-mt-10"><strong>We'll Help</strong></h1>
                    </div>
                </div>

CSS: .

owl-item.active .creative-text.text-left h1 { animation: 1s .2s fadeInRight both; }
cssbootstrap-4

Answer №1

After a thorough review, it was determined that the issue stemmed from the z-index settings in the CSS file. The text had a z-index of 999, while the header only had a z-index of 9. By adjusting the z-index of the header to 1000, the problem was resolved.

CSS for header: header { position: fixed; left: 0; top: 0; display: inline-block; width: 100%; z-index: 1000; padding: 25px 100px 0; background: #fff; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; }

CSS for Text: .creative-text { position: absolute; top: 55%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); padding: 100px; z-index: 999; display: inline-block; width: 100%; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

:hover doesn't fully implement background color on list items

When I hover over the dropdown items in my navigation menu, I would like the background color to change for the entire list item. Currently, the background color only changes when hovering over the text itself and reverts back to its original color when mo ...

htmllistcss

Error: Type Error - 'style' is not defined in the Progress Bar Project

Having recently started learning Javascript, I have been engaging with various tutorials and projects in order to gain familiarity with the language. One particular tutorial that caught my attention is a Progress-Bar tutorial by "dcode" available at this l ...

javascripthtmlcssprogress-bartypeerror

Is there a way to differentiate the color of an active link from an inactive one, so users can easily identify which link they are currently viewing?

How can I customize the color of text for the active page on my website's sidebar? For example, I have two hyperlinks, one for HOME and one for ABOUT. When a user clicks on the HOME link, I want the text color to change to green while the ABOUT link r ...

javascriptjqueryhtmlcsswordpress

Should we combine social icons into a sprite image, or keep them separate?

Currently in the process of developing an HTML/CSS template, with plans to incorporate social media icons from the following source: These icons are available as 41 individual .png files. The goal is to integrate them into the template using CSS classes f ...

htmlcss

Position the previous and next buttons next to the thumbnail images

I've implemented the cycle2 jQuery plugin on my website successfully, but I'm facing an issue with positioning the prev and next buttons next to my thumbnails. I want them to be aligned with the first and last thumbnail without relying on absolut ...

javascriptjqueryhtmlcss

React - Sort and Display Filtered List

I am looking to display only values greater than 0 on each row without removing the entire row. I attempted filtering for black > 0, but it resulted in the removal of the entire row. I am aiming to replace 0 with an empty string. Check out my website ...

cssreactjsreact-hooks

Contrasts in Bootstrap 5.3 color schemes between development and live environments

Currently in the process of building a website using Astro [^2.2.1], Bootstrap [5.3.0-alpha3], and Svelte [^3.58.0]. Most components are functioning correctly, except for some elements like buttons where the foreground and background colors seem off. I&apo ...

csssassbootstrap-5astrojs

Leverage the power of Bootstrap 5 to showcase multiple form input-groups side by

Is there a way to showcase multiple form input groups side by side using Bootstrap 5? I attempted the following, but the input group components ended up stacking on top of each other: <div class="container"> Your username is <div class= ...

cssbootstrap-5

Boot strap default version cannot be identified

After developing a web app with Visual Studio .NET Core 3.1, I noticed that Bootstrap was included by default. However, when I attempted to use the accordion example from Bootstrap by copying and pasting it into my project, it did not render properly. I ch ...

asp.net-corebootstrap-4

Challenges experienced during the process of uploading a website to the server

I seem to have encountered an issue where the Navigation background image is missing after uploading my website onto the server. Surprisingly, everything else seems to be working perfectly. What could possibly be the cause of this discrepancy? navbar-de ...

javascripthtmlcss

What is the proper way to utilize the "active" class in conjunction with PHP?

I'm currently facing an issue in my PHP code where I am trying to dynamically assign the "active" class to a navigation link based on the value of the $CURRENT_PAGE variable. Below is the snippet from my navigation.php file, which is included across ...

phphtmlbootstrap-4

Position multiple divs at the bottom of aligned divs

I'm currently facing issues with aligning divs at the bottom within multiple vertically aligned divs. <p>Top of page</p> <div id="container"> <div class="message">area1</div> <div class="message">area2</ ...

htmlcss

Tips on completing landing page animations and displaying the main page of a website by utilizing React JavaScript

https://i.stack.imgur.com/M4VgY.pngIs there a way to stop the landing page animation after 2-3 seconds and show the main page instead? Can I achieve this by using setTimeOut function in JavaScript? [ export default Loader; ...

javascripthtmlcssreactjs

Issue with PrimeFaces radiobutton styles not updating after being clicked programmatically

My setup includes a p:selectOneRadio constructed like this: <p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom" required="true" requiredMessage="Please select ...

javascriptcssjsfprimefaces

Tips for arranging columns and rows in a mat-dialog box

In my Angular project, I am working on a mat dialog box and trying to achieve a layout with 1 row at the top and 3 rows at the bottom, similar to the image below. However, I am facing issues in making it work properly. Additionally, I want to hide the hori ...

cssangularlayoutangular-material

"Learn how to properly load the style.css file from the root directory into your WordPress page.php and single.php files

Having an issue with my WordPress theme. The style.css stylesheet does not seem to be loading in the page.php contents. I noticed that when I add <div class=w3-red"> <button class="w3-btn w3-red"> and other related codes while editing a post in ...

phpcsswordpressthemeswordpress-theming

Problem with child divs escaping outside the boundaries of the parent div

I'm encountering an issue with my HTML/CSS code. I have a parent div called "secClass" which contains two child divs - secClass1 and secClass2. The problem is that the content within the child divs is not staying contained within the parent div. Can y ...

htmlcss

What could be causing the submit button to malfunction on bootstrap models?

My submit button's modal doesn't stay open long enough when clicked. The purpose of the modal linked to the submit button is to prevent users from moving to the next page if there are empty fields in the form (using validation rules). In my setup ...

phpcodeigniterbootstrap-4

What is the best way to add the current date to a database?

code: <?php session_start(); if(isset($_POST['enq'])) { extract($_POST); $query = mysqli_query($link, "SELECT * FROM enquires2 WHERE email = '".$email. "'"); if(mysqli_num_rows($query) > 0) { echo '<script&g ...

javascriptphpjqueryhtmlcss

Is the HTML encoded character displaying strangely due to spacing issues?

I'm having trouble creating a link with a right chevron that has a larger font size. The issue I'm facing is that the right chevron appears to have excessive top margin, causing a significant gap between it and the line above. Additionally, I wa ...

htmlcss