Hiding Bookmars Bar



  • Hey Guys,

    Currtently I'm using the following code snippet to hide my bookmarks bar:

    .bookmark-bar{
    	position: fixed !important;
    	width: 100%;
    	transform: translateY(-100%);
    	transition: transform 0.2s !important;
    	z-index: 1;
    }
    
    .bookmark-bar:hover{
    	transform: translateY(125%);
    }
    
    .toolbar:hover ~ .bookmark-bar{
    	transform: translateY(125%);
    }
    
    #header:hover ~ #main .bookmark-bar{
    	transform: translateY(125%);
    }
    
    

    The issue is when hoovering the upper part of V's window the bar slides in but I'd like to have it rather fade in. Appreciate any advice how to achieve that

    thx

    Tom



  • @mr-t I would suggest using @keyframs animations as they allow for more complex rules.
    The following:

    • Keeps the bar off the main page by hiding it
    • When you hover over the top, it makes the bar exist
    • Then it fades it in by changing its opacity
    .bookmark-bar{
    	position: fixed !important;
    	top: 65px;
    	display: none;
    	width: 100%;
    	z-index: 1;
            opacity: 0;
    }
    
    .bookmark-bar:hover,
    .toolbar:hover ~ .bookmark-bar,
    #header:hover ~ #main .bookmark-bar {
        opacity: 1;
        display: initial;
        animation: fancy-bookmarks 0.2s !important;
    }
    
    @keyframes fancy-bookmarks {
        0%{
            display: initial;
            opacity: 0;
        }
        1% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    

    Is that what you were after?



  • @lonm Thanks a ton!!! This is exactly what I was after! :clap_tone3: :thumbsup_tone2: :slight_smile:


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.