World's Biggest University

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget iaculis dui, quis dapibus diam. Etiam tellus erat, consectetur eget eros sit amet, tincidunt consectetur erat

Visit Us To Know More ) is showing in the menu and it should be behind the nav it so the red nav should show only half the text

this is the problem enter image description here and it should look like this enter image description here

this is the code

@media(max-width: 700px) {
    .text-box h1 {
        font-size: 20px;
    }

    .nav-links ul li {
        display: block;
    }

    .nav-links {
        position: absolute;
        background: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: 0;
        text-align: left;
        z-index: 2;
    }
}

this is the whole css code

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.header {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./img/banner.png);
    background-position: center;
    background-size: cover;
    position: relative;
}

nav {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
    position: sticky;
}

nav img {
    width: 150px;
}

.nav-links {
    flex: 1;
    text-align: right;
}

.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.nav-links ul li::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #a85d58;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-links ul li:hover::after {
    width: 100%;
}

.text-box {
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.text-box h1 {
    font-size: 62px;
}

.text-box p {
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}

.hero-btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.hero-btn:hover {
    border: 1px solid #f44336;
    background: #f44336;
    transition: 1s;
}

@media(max-width: 700px) {
    .text-box h1 {
        font-size: 20px;
    }

    .nav-links ul li {
        display: block;
    }

    .nav-links {
        position: absolute;
        background: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: 0;
        text-align: left;
        z-index: 2;
    }
}

and this is the html code

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>

<body>

    <section >
        <nav>
            <a href="index.html"><img src="img/logo.png"></a>
            <div >
                <i ></i>
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">COURSE</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </div>
            <i ></i>
        </nav>

        <div >
            <h1>World's Biggest University</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget iaculis dui, quis dapibus diam.
                Etiam tellus erat, consectetur eget eros sit amet, tincidunt consectetur erat</p>
            <a href="" >Visit Us To Know More</a>
        </div>


    </section>

</body>

</html>

CodePudding user response：

If the goal is to have the test "Visit Us To Know More" behind the red nav then you can just add a z-index: 1000; to the nav. This will make the nav layer over the text. But then you won't be able to read the text of course.

Edit: so after a little playing around I added some grid-template-areas to your code so the text isn't overflowing into eachother.

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
</head>

<body>
    <header >
        <nav>
            <a href="index.html"><img src="img/logo.png"></a>
            <div >
                <i ></i>
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">COURSE</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </div>
            <i ></i>
        </nav>
    </header>
    <main>
        <div >
            <h1>World's Biggest University</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget iaculis dui, quis dapibus diam.
                Etiam tellus erat, consectetur eget eros sit amet, tincidunt consectetur erat</p>
            <a href="" >Visit Us To Know More</a>
        </div>
    </main>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    display: grid;
    height: fit-content;
    grid-template-areas:
        'header'
        'section'
    ;
}

main {
    grid-area: section;
    display: flex;
    width: auto;
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./img/banner.png);
    height: 100vh;
    vertical-align: middle;
}

.text-box {
    background-color: gray;
}

header {
    grid-area: header;
    width: auto;
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./img/banner.png);
    background-position: center;
    background-size: cover;
    position: relative;
}


nav {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    z-index: 1000;
}

nav img {
    width: 150px;
}

.nav-links {
    flex: 1;
    text-align: right;
}

.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.nav-links ul li::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #a85d58;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-links ul li:hover::after {
    width: 100%;
}

.text-box {
    padding-top: 5rem;
    height: 100%;
    width: 100%;
    color: #fff;
    margin: 0 auto;
    text-align: center;

}

.text-box h1 {
    font-size: 62px;
}

.text-box p {
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}

.hero-btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.hero-btn:hover {
    border: 1px solid #f44336;
    background: #f44336;
    transition: 1s;
}

@media all and (max-width: 700px) {
    body {
        display: grid;
        grid-template-areas:
            'section header'
            'section header'
        ;
    }

    .text-box h1 {
        padding-top: 10rem;
        font-size: 20px;
    }

    .nav-links ul li {
        display: block;
    }

    header {
        background: #f44336;
        text-align: left;
    }
}

CodePudding user response：

This is very closely related to the other answer, but styled in the way that you showed in the image. I commented in sections I changed. If the other answer is what you were looking for, please select it as your answer to your question. If this answer is the correct response, please do the same.

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body{ 
    z-index: 0;
}

.header {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./img/banner.png);
    background-position: center;
    background-size: cover;
    position: relative;
}

nav {
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
    position: sticky;
}

nav img {
    width: 150px;
}

.nav-links {
    flex: 1;
    text-align: right;
}

.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.nav-links ul li::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #a85d58;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-links ul li:hover::after {
    width: 100%;
}

.text-box {
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.text-box h1 {
    font-size: 62px;
}

.text-box p {
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}

.hero-btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.hero-btn:hover {
    border: 1px solid #f44336;
    background: #f44336;
    transition: 1s;
}

@media(max-width: 700px) {
    .text-box h1 {
        font-size: 20px;
    }

    .nav-links ul li {
        display: block;
    }

    .nav-links{
        position: absolute;
        background: #f44336;
        height: 100vh;
        width: 200px;
        top: 0;
        right: 0;
        text-align: left;
        z-index: 20; /*This index brings forth the nav links */
    }
    nav {
        z-index: 19; /* this brings the nav forward as well */
    }
}

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>University</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
   <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<!--This is the correct link to the fontawesome icons you want-->
</head>

<body>

    <section >
        <nav>
            <a href="index.html"><img src="img/logo.png"></a>
            <div >
              <i ></i><!--This is a 6.2.1 version icon-->
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">COURSE</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </div>
            <i ></i><!--This is a 6.2.1 version icon-->
        </nav>

        <div >
            <h1>World's Biggest University</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget iaculis dui, quis dapibus diam.
                Etiam tellus erat, consectetur eget eros sit amet, tincidunt consectetur erat</p>
            <a href="" >Visit Us To Know More</a>
        </div>


    </section>

</body>

</html>