my code stock.com

// EXAMPLE:
@include website-topnav ($topnav-text-color, 50px, 0 49px, normal, uppercase, 15px, no) {
    @include breakpoint($level-2) {
      @include topnav-05($accent-color);
    }
}

Snippet options

Download: Download snippet as top-nav.scss.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

@mixin topnav-02($text-color: $topnav-text-color, $topnav-height: 40px, $line-color: $topnav-hover-color-1, $duration: .3s) {
    #tnav-toplevel {
        > li {
            @include transition-duration($duration);
            &:hover {
                background-color: transparent !important;
                box-shadow: inset 0 -#{$topnav-height} 0 $line-color;
                
                a { color: $text-color !important; }
            }
        }
    }
}


@mixin topnav-04 ($line-color: $accent-color, $line-height: 5px, $position: bottom) {
    #tnav-toplevel {
        > li {
            @include transition-timing-function(ease-in-out);
            @include transition-duration(0.25s);
            @include transition-property(background-size);

            a {
                @include transition-timing-function(ease-in-out);
                @include transition-duration(0.25s);
                @include transition-property(color);
            }

            @include background-image(linear-gradient(to left, $line-color, $line-color));
            @include background-size(0% $line-height);

            background-repeat: no-repeat;
            background-position: left $position;

            &:hover {
                @include background-size(100% $line-height);
            }
        }
    }
}


@mixin topnav-05($text-color: $topnav-text-color, $line-color: $topnav-hover-color-1, $height: 4px, $duration: .3s) {
    #tnav-toplevel > li {
    position: relative;
    
        & > a:before {
            @include transition-duration($duration);
            content: "";
            left: 50%;
            right: 50%;
            height: $height;
            background-color: $line-color;
            position: absolute;
            bottom: 0;
        }
    
        &:hover {
            background-color: transparent !important;

            & > a {
                color: $text-color !important;

                &:before {
                    right: 0;
                    left: 0;
                }
            }
        }
    }
}


@mixin topnav-06($text-color: $topnav-text-color, $line-height: 4px, $line-color: $topnav-hover-color-1, $duration: .3s) {
    #tnav-toplevel {
        > li {
            @include transition-duration($duration);
            &:hover {
                background-color: transparent !important;
                box-shadow: inset 0 -#{$line-height} 0 $line-color;
                
                a { color: $text-color !important; }
            }
        }
    }
}

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.