Thursday

In HTML CSS Content hides my sticky navbar

Issue

i create a page in which i want to stick my navbar on top so i make it sticky and its work but when i scroll the page my other content hide my navbar.How can i hide the content behind the navbar.Also i when i treid to edit something in css it cannot working. So thats why i used inline css to make it sticky.

@model IEnumerable<eHouse.Models.RentModel>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @*<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />*@
    <title>Your Dream Home | Home.com</title>enter code here
    @*<link rel="stylesheet" href="css/rent_property.css">*@
    <link href="~/css/rent_property.css" rel="stylesheet" />
</head>

<body>
   
    <div class="navbar" style= "position :sticky; top: 0%;">
        <div class="navbar-margin">
            <div class="navbar-left-section">
                <a class="logo" style="text-decoration: none;" href="/"><b style="color: #22577e;">e</b>House</a>
                <span>
                    <a href="buy_property.html">Buy</a>
                    <a href="rent_property.html">Rent</a>
                    <a href="projects.html">Projects</a>

                    <a href="contact.html">Contact</a>
                </span>

            </div>
           
    

    <!-- Start Message -->
    <div class="message">
        <div class="tim_">
            <i class="fa fa-times"></i>
        </div>
        <h2>Get in Touch</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus labore dolorum sed eos nesciunt aliquid.
        </p><br>
        <form class="message_form" action="#" method="#">
            <input type="text" placeholder="Name" name="" id="">
            <input type="tel" name="" value="+92 " id="">
            <input type="email" placeholder="Email " name="" id="">
            <textarea name="" placeholder="What would you like to know " id="" cols="30" rows="10"></textarea>
            <button type="submit">Request Info</button>
        </form>
    </div>
    
</body>

</html>

CSS



* {
    padding: 0%;
    margin: 0%;
    font-family: "Open Sans", sans-serif;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    background-color: #fafafa;
    position: relative;
}
/* Started */

}
.navbar {
    height: 10vh;
    width: 100vw;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: sticky;
    top: 0%;
  border: 1px solid var(--border);
        }

Solution

Add the following CSS:

.navbar {
  z-index: 1;
}

Thursday

In HTML CSS Content hides my sticky navbar

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels