Hide the navigation bar on Start Page.



  • A few people were asking for this, so here it is - hiding the navigation bar on the Start Page is pretty easy with custom CSS. I've got two different solutions for this:

    1. Removes the bar completely:
    .startpage-navigation {
    	display: none !important;
    }
    
    1. Hides the bar from the viewport (not completely) and shows it when the cursor is hovering over it (with a slide-in & slide-out animation):
    @keyframes show-startpage-navigation {
    	from {
    		top: -45px;
      }
    	to {
    		top: 0;
      }
    }
    @keyframes hide-startpage-navigation {
    	from {
    		top: 0;
      }
    	to {
    		top: -45px;
      }
    }
    .startpage-navigation {
    	animation: hide-startpage-navigation 1s ease forwards;
    }
    .startpage-navigation:hover {
    	animation: show-startpage-navigation 1s ease forwards;
    }
    

    How to use this code?

    1. Go to the "About" page (vivaldi://about) to check the Vivaldi installation path.
    2. Check the "Executable Path" entry. It should end with \Application\vivaldi.exe. Now close Vivaldi.
    3. Navigate to that Application directory. It should contain a folder named after the current version of Vivaldi, like eg. 1.6.689.40
    4. Open that folder and navigate to the following path: \resources\vivaldi\style
    5. Edit the common.css file with a text editor and add the following code at the beginning of the file: @import "custom.css";
    6. Use the text editor to create a new file in the same directory and name it custom.css. Make sure the extension of the file is actually .css and not .txt. If you don't know how to do taht, check this tip.
    7. Paste the CSS code to that file and save it. You can use that file from now on to paste other codes that you might find on this forum.
    8. Each time Vivaldi updates, you'll need to repeat steps 2 - 5 and copy your custom.css file to the new location.

    (Check this thread for more info)



  • @pafflick

    Thanks for sharing. I applied this to my status bar which I had turned into an overlay



  • @pafflick
    I like this but when moving the mouse up from below it closes as soon as I slightly overshoot and then have to move down slowly from the top.
    Can it be coded to not close so quickly.


  • Vivaldi Translator

    @CantankRus
    Just increase that "1s"?



  • @dLeon
    Tried a few things and just doesn't behave in a way to be useful.


  • Vivaldi Translator

    @CantankRus
    I only increase this line seconds.

    .startpage-navigation {
      animation: hide-startpage-navigation 3s ease forwards;
    }
    

    The overshoot happen if I enter the mouse pointer too fast or the pointer it self is erratic (mine does, yes cheap one)

    Nevertheless, I prefer the first stylesheet. Hide them at all.



  • @CantankRus Initially I assumed that the navigation bar is a feature that one uses only occasionally (I don't use it at all TBH), so I haven't perfected the code and it has some drawbacks. To fix your issue, I've added a delay for the "slide-out" animation. I also shortened the duration of the "slide-in" animation. Here's the code:

    @keyframes show-startpage-navigation {
    	from {
    		top: -45px;
      }
    	to {
    		top: 0;
      }
    }
    @keyframes hide-startpage-navigation {
    	from {
    		top: 0;
      }
    	to {
    		top: -45px;
      }
    }
    .startpage-navigation {
    	animation: hide-startpage-navigation 1s ease forwards;
    	animation-delay: 1s;
    }
    .startpage-navigation:hover {
    	animation: show-startpage-navigation 0.5s ease forwards;
    }
    

    I'm not fully satisfied with the code yet, as the bar "flickers" when the cursor is moving around quickly. If I should find any solution for that (without resorting to the use of JS), I'll post it here.



  • Here is my version of the solution, i.e. making the navbar translucent...

    .startpage .startpage-navigation {
    	background-color: #111;
    	opacity: 0.6;
    	box-shadow: none;
    	color: #fff;
    }
    
    .startpage .button-startpage.active {
    	background-color: #222;
    	color: #fff;
    }
    

    The result is this:
    0_1497759302565_0a97b8a2-c874-422b-b5fa-65ee42240de5.png

    Is there a way so that the navbar becomes the 'default' in bookmarks and history folders, but remains 'modded' in the speed dial folder? (Since those two folders don't have a wallpaper and it looks slightly weird there)
    I don't know js (and this was my first dabble with css too), so I would really appreciate it if someone could show me how to do so.



  • @ThePineappleGuy

    How about making the bookmarks and history panels slightly transparent?

    .manager .manager-content,
    .manager .manager-content .toolbar-wrapper,
    .startpage .history .navigation,
    .startpage .history .manager-content,
    .addbookmark-cardwrapper,
    .manager-editor,
    .startpage .history .Cal__Container__root .ReactVirtualized__List  {
        background-color: var(--colorBgDarker) !important;
        opacity: .95 !important;
    }
    

    My full post has some other things that might interest you if you're going to start modding those elements
    https://forum.vivaldi.net/post/126440



  • @sjudenim Oh, that looks great!
    opacity: 0.75; makes it look more coherent in my case. Thanks :smiley:


Log in to reply
 

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