Skip to main content

Responsive Nav Bar (CODE)

 


CSS:


nav {
    background: #373B69;
    height: 60px;
    width: 100%;
    border-bottom: 2px solid rgba(0, 0, 0, 1);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2);
}

label.logo{
    color: whitesmoke;
    font-size: 25px;
    line-height: 60px;
    padding: 0px 80px;
    font-weight: bold;
}

nav ul {
    float:  right;
    margin-right: 0 10px;
}

nav ul li {
    display: inline-block;
    line-height: 60px;
    margin: 0 5px;
}

/* p {
    max-width: 90%;
    padding-left: 50px;
    padding-top: 30px;

} */
nav ul li a{
    color: black;
    font-size: 15px;
    padding: 7px 13px;
    border-radius: 3px;
    text-transform: uppercase;
}

a.active, a:hover{
    background: #EBE5E2;
    transition: 0.5s;
}

.checkbtn {
    font-size: 25px;
    color: aliceblue;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}

#check {
    display: none;
}


@media(max-width: 952px) {
    label.logo {
        font-size: 30px;
        padding-left: 50px;
    }
    nav ul li a {
        font-size: 16px;
    }

}
@media (max-width: 858px) {
    .checkbtn {
        display: block;
    }

    ul {
        position: fixed;
        width: 100%;
        height: 60%;
        background: #13688C;
        top: 80px;
        left: -100%;
        transition: all 0.3s;
        text-align: center;
    }
    nav ul li {
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }
    nav ul li a {
        font-size: 20px;
    }
    a:hover, a.active {
        background: none;
        color: white;
    }
    #check:checked ~ ul {
        left: 0;
    }
}




html :

 <nav>
      <input type="checkbox" id="check" />
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">MihirX</label>
      <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">Codding</a></li>
        <li><a href="#">Me Time</a></li>
        <li><a href="#">Fun</a></li>
        <li><a href="#">Work</a></li>
      </ul>
    </nav>



Comments

Post a Comment

Popular posts from this blog

VERCEL DEPLOYMENT ERROR

 VERCEL DEPLOYMENT ERROR Options | NextAuth.js (next-auth.js.org) Step 1 : cmd $ openssl rand -base64 32 (Copy generated key) Step 2: Go to Project Environment Variables Add NEXTAUTH_SECRET : Key  Step 3: Redeploy
Post a Comment
Read more

Using Same Firebase for Web App as well as Android App

Using Same Firebase for Web App as well as Android App Create Android app in that project go to project setting click on iso or android or web icon.  Go to authentication select Google then enable select email Get client id from web sdk - Create.env.local  GOOGLE_CLIENT_ID=259eklrjelkjr GOOGLE_CLIENT_SECRET=GOlkelkrjer NEXTAUTH_URL=https://localhost:3000 - Restart the server/app - Create folder in pages/auth/signin.js
Post a Comment
Read more

Topic Learned!

 Topic Learned! State : State is updated whenever user want to update it. Example : ToDo List Props:           Props would be whatever the current state is! useEffect:            componentDidMount() {             // Run This code while the app is loading          Example fetchUser();      } Alternative For componentDidMount(): In functional components    //On Every Render   useEffect (() => {     console . log ( "I re-rendered" );   }); Alternative For componentDidMount() but runs only in first Render: //On First Render/Mount - componentDidMount   useEffect (() => {     console . log ( "Component Is Mounted" );   }, []); Alternative for componentDidUpdate(): //On First Render + whenever the component changes   //componentDidUpdate alternative   useEffect (() => {   ...
Post a Comment
Read more