Address Bar at very top



  • @tzedekh

    I think you've done something wrong on your end. The code I provided works fine on the stable and today's snapshot

    There is a better way though if you don't mind running a js file with some css. It's a cleaner solution. The code in this thread places things in absolute positions, the js file will move them to the element so the buttons move with it



  • Well Vivaldi 2.0 and now the tab below address bar custom css its not working as it should the address bar now its stays behind the tab bar, very bad. i still wonder why vivaldi team cant add an simple option since they are already giving it to move the tab bar to many places from right to left top or below...

    alt text



  • @eilegz First of all you shouldn't edit common.css… And yeah, this could be implemented by the team, but which features get priority is for them to decide – it's probably not important enough. The advantage of Vivaldi is that we can mod and do such small features ourself. Tabs below address bar is still working, I just tested it. Could use a little refinement though, seems like the code has changed a little.



  • @luetage im glad if theres an easy way without having to edit common.css which its not hard but breaks things.



  • @eilegz There is: https://forum.vivaldi.net/topic/10549/modding-vivaldi/

    Also check out the other pinned topics on this forum board.



  • Its there specific topic with specific mod and a step by step to do it, because while im "power user" im not a developer so i dont know how to do it. thanks



  • @eilegz

    Still working for me.

    I don't know what code you're using but look for the z-index: value in your address bar and make it higher than the one for the tab bar



  • @sjudenim, I've tried your CSS and it works, whereas retoree's solution stopped working with v. 2. He already set the z-index of the address bar to 999999999999999999, and that worked until now.



  • @sjudenim i dont know what to change

    .button-toolbar.next{
    	display: none;
    }
    
    .button-toolbar.home{
    	display: none;
    }
    
    /*file menu*/
    #header {
    	min-height: 0 !important;
    	z-index: auto !important;
    	height: 24px !important;
    }
    
    /*tabs*/
    .topmenu+#tabs-container.top {
    	border-bottom: 0px;
    	position: relative;
    	top: 30px;
    	width: 100%;
    	z-index: 1 !important;
    }
    
    /*address bar background*/
    .address-top .toolbar.toolbar-addressbar {
    	padding-bottom: 30px !important;
    	border-bottom: 0px;
    	z-index: 2 !important;
    }
    
    #tabs-container.bottom .tab, #tabs-container.top .tab, #tabs-container .newtab, #tabs-container .toggle-trash {
    	height: 30px !important;
    	border-bottom: 0px;
    }
    

    //MODEDIT: Moved the code into the code block



  • @tzedekh same issue dont know what to do to be honest... i posted above a screenshot



  • @eilegz Code can't work, you haven't commented correctly. Remove all comments or comment them like so:

    /* this is a comment */
    #thisiscode {background: #fd3563;}
    


  • @eilegz

    You have a few things going on that are not going to work.

    First is what @luetage has pointed out.

    Next is that the code for the header is meant to remove it, but you have contradicted that by giving it a height

    The code that I provided does still work

    @tzedekh said in Address Bar at very top:

    @sjudenim, I've tried your CSS and it works

    But your screenshot shows that you actually want the header to be used with the horizontal menu, the code is meant to merge it onto the adressbar. So it's not going to give you the result you seem to want.

    With that said, your code still needs to give the address bar a higher z-index: value you than the tabs bottom, which in your case doesn't have a value set. Try increasing the value higher if you are fine with the rest of your code. I haven't tested it though

    One more quick thing, since these have the exact same value, you can merge them

    .button-toolbar.next, .button-toolbar.home {display: none}
    


  • @sjudenim the header itself i use it for menu bar on the top, in your code you have all that fused together, in my case i want the 3 toolbars the header as a menu bar, the normal address bar and the tab bar below it.



  • @eilegz

    Then you don't actually need the code from this thread since the purpose was to merge them



  • @luetage i plain copy pasted the code but the comments in my common.css its exactly as you pointed out, since this forum changed since i posted my code last year i dont know how to put the code correctly in the current forum...



  • Is anybody experiencing a white line at the bottom of the browser while in full screen video mode? I have other mods but I am mostly sure it is caused by this one.



  • Any chance anyone could package that as an extension, for those of us unfamiliar with scripts?


 

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