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

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

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

Advanced JS Notes

 Advanced JS Notes : Arrow Functions:  Code:  let sumIs = ( a , b ) => a + b console . log ( sumIs ); let randomIs = () => Math . random ; document . addEventListener ( 'click' , () => console . log ( "click" );) Spread Operator // Spread Operator arr = [ 1 , 3 , 1 ]; let sum = ( a , b ) => a + b ; let s = sum (... arr ); // console.log(s); arr2 = [ 2 , 5 , 5 ]; let b = [... arr , ... arr2 ]; //Concating arr using spread console . log ( b ); // Spread With Obj let obj1 = {   name : "Mihir" ,   age : 24 ,   favStar : "TrishCollins" , }; let obj2 = { ... obj1 , name : "Rahul" , favStar : "SRK" }; // Object manipulation using spread operator console . log ( obj2 );
Post a Comment
Read more