Scribd Logo
Upload

Welcome to Scribd!

  • Todo Css

    Uploaded by

    Pablo Ignacio
    13 views2 pages
    This CSS code defines the styling for a responsive navigation menu. It sets the colors, positioning, and other visual properties for the navigation links and responsive menu toggle. When the screen width shrinks below 580px, the regular vertical menu is hidden and replaced with a horizontal responsive menu that can be toggled open and closed with a button.

    Original Description:

    Original Title

    Todo css

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This CSS code defines the styling for a responsive navigation menu. It sets the colors, positioning, and other visual properties for the navigation links and responsive menu toggle. When the screen width shrinks below 580px, the regular vertical menu is hidden and replaced with a horizontal responsive menu that can be toggled open and closed with a button.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    13 views2 pages

    Todo Css

    Uploaded by

    Pablo Ignacio
    This CSS code defines the styling for a responsive navigation menu. It sets the colors, positioning, and other visual properties for the navigation links and responsive menu toggle. When the screen width shrinks below 580px, the regular vertical menu is hidden and replaced with a horizontal responsive menu that can be toggled open and closed with a button.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 2

    .

    nav__responsive-ul {
    display: none;
    }

    nav {
    background-color: #483;
    border: none;
    }

    .nav__li {
    display: inline-block;
    padding: 12px;
    color: #fff;
    }

    .nav__li:hover > a {
    color: #bbb;
    }
    .nav__li a {
    color: #fff;
    text-decoration: none;
    }

    .nav__li i {
    width: 30px;
    box-sizing: border-box;
    margin-right: 5px;
    }

    .nav__li i:hover {
    color: #bbb;
    }

    .nav__responsive-button-container {
    position: absolute;
    width: 100%;
    font-size: 25px;
    background-color: #69c;
    margin-top: -40px;
    z-index: 100;

    .nav__responsive-button {
    padding: 6px 20px;
    text-align: right;
    width: 100%;
    margin-left: -37px;
    }

    @media only screen and (max-width: 580px) {


    .nav__ul {
    display: none;
    }
    .nav {
    height: 37px;
    width: 100%;
    background-color: #69c;
    }
    .nav__responsive-ul {
    display: block;
    width: 100%;
    position: absolute;
    margin-top: 12px;
    padding-top: 27px;
    height: 37px;
    }

    .nav__li-conteiner {
    position: relative;
    top: -1000px;
    height: calc(100vh - 300px);
    transition: all 1s;
    background: #7af;
    z-index: 1;
    width: 75%;
    }

    .nav__responsive-li {
    width: 100%;
    padding: 60px 30px 10px 50px ;
    }

    .nav__responsive-li i {
    box-sizing: border-box;
    text-align: center;
    margin-right: 5px;
    width: 30px;
    color: #016;
    }

    .nav__responsive-li a {
    color: #016;
    text-decoration: none;
    }

    .nav__responsive-ul:hover > .nav__li-conteiner {


    top: -27px;
    }
    }

    You might also like