Pular para o conteúdo principal

Destaques

Postado por

12HRS de CSS

 Só para deixar marcado o quanto eu não tenho noção de CSS ta ai o tanto de comentario que foi teste em cima de teste até eu conseguir manipular toda a parte de navbar no meu site deixando a experiencia mobile e desktop quase a mesma.



//
// Navbar
//

#mainNav {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: $gray-900;
    height: 27%;
   

    .navbar-toggler {
        padding-top: 1rem;
        padding-bottom: 1rem;
        //padding: 0.75rem;
        font-size: 0.75rem;
        font-family: $headings-font-family;
        text-transform: uppercase;
        font-weight: $font-weight-bold;
        background-color: $gray-900;
    }

    .navbar-brand {
        color: $primary;
        font-family: $headings-font-family;
        font-weight: $headings-font-weight;
        letter-spacing: $headings-letter-spacing;
        text-transform: uppercase;
        width:50%;
        background-color: $gray-900;
        //height:100%;

        //img {
            //height: 2.5rem;
           // fill:red;
       // }
    }

    .navbar-nav {
        background: $gray-900;
        .nav-item {
            background: $gray-900;
            .nav-link {
                font-family: $headings-font-family;
                font-size: 0.95rem;
                color: #8B5FBF;
                letter-spacing: $headings-letter-spacing;
                background: $gray-900;
                padding-left: 3%;

                &.active,
                &:hover {
                    color: $primary;
                }
            }
        }
    }
}

// Responsive styling for screen width equal to or greater than the large breakpoint
@include media-breakpoint-up(lg) {
    #mainNav {
        //padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        border: none;
        //background-color: transparent;
        transition: padding-top 0.3s ease-in-out,
            padding-bottom 0.3s ease-in-out;

        .navbar-brand {
           // font-size: 1.5em;
            transition: font-size 0.3s ease-in-out;
            width: auto;
            height: auto;
            background: transparent;
           // fill: turquoise;

           // img {
               
             //   width: 180%;
            //    height: 180px;
             //   max-height: 100%;
              //  object-fit:cover;
              //  object-position: bottom;
                //position: bottom;
             //   background: transparent;
           // }
        }

        // Styling for when the navbar shrinks on larger screens
        &.navbar-shrink {
            padding-top: 1rem;
            padding-bottom: 1rem;
            background-color: $gray-900;
            height: auto, 40%;

            .navbar-brand {
                padding-top: 1rem;
                padding-bottom: 1rem;
                font-size: 1.25em;
                //height: 80px;
                width: auto;
                height: auto;
                position:top;
                //padding-top: 7%;
                background: transparent;

              //  svg,
                img {
                   // height: 80px;
                   // width: 80px;
                    //height: 1.5rem;
                    //position: absolute;
                    top:auto;
                    left:auto;
                    width:70%;
                    height: 70%;
                   // position: center;
                 //   object-fit: cover;
                    //object-fit: cover;
                    //transform:rotate(45deg);
             }
           // path{
             //   color:Red;
          //  }
        }

        .navbar-nav{
            background: $gray-900;
            .nav-item {
                margin-right: 1rem;
                font-size: 0.95rem;
                color: $yellow;
                letter-spacing: $headings-letter-spacing;
                background: $gray-900;
           
                &:last-child {
                    margin-right: 0;

                }
            }
        }
    }
    }

    // Responsive styling for screen width equal to or greater than the medium breakpoint
    @include media-breakpoint-up(md) {
        #mainNav {
            padding-bottom: 100px;

            .navbar-brand {
                width: auto;
                height: auto;
                position:bottom;
                padding-top: 7%;

                //img {
                //    height: auto;
                //    width: auto;
                 //   position: flex;
                  //  object-fit: cover;
               // }
            }
        }
    }
}
img {
    height: 70%;
    width: 70%;
    position: relative;
    object-fit: cover;
    background: transparent;
}

    // Responsive styling for screen width equal to or greater than the    

Comentários

Postar um comentário