Hide the navigation bar on Start Page.

[pafflick]

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;
}

2. 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)

[sjudenim]

@pafflick

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

[CantankRus]

@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.

[CantankRus]

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

[pafflick]

@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.

[ThePineappleGuy]

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:

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.

[sjudenim]

@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

[ThePineappleGuy]

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

[Artex]

@raed Will try it out XD

[dude99]

Here is my alternative solution, turning the entire toolbar into a menu button: https://forum.vivaldi.net/post/264165

[Darthagnon]

I modernised the code a bit; works beautifully:

/* Modern Hover Speeddial Nav
------------------------------------------------------------------------------------------------------------
by Darren J. de Lima
29/04/2019

Old code:
https://forum.vivaldi.net/topic/32865/share-speed-mod
https://forum.vivaldi.net/topic/13616/hide-the-navigation-bar-on-start-page

My attempt at modernising older code with the same function (see link). The above works, but the animation wasn't 100% smooth, and the syntax was antiquated.

I referred to:
https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/3
https://forum.vivaldi.net/topic/33105/automate-status-bar-with-css-mod

*/

/* Appears */
.startpage-navigation {
	transform: translateY(0px);
	transition: transform .15s 0s !important;
	transition-delay: 0s !important;
}

/* Disappears */
.startpage-navigation:not(:hover) {
	transform: translateY(-32px);
	transition: transform .8s 0s !important;
	transition-delay: 1.2s !important;
}

[sjudenim]

@Darthagnon

Here's another way that won't have half the navbar showing when you really want it to be hidden
https://forum.vivaldi.net/post/166110

There is some superfluous stuff there but the real key is in creating a transparent :after for the navbar which will act as the trigger