Autohide, Hide, Make Navigation Bar Transparent on Start Page



  • please see this picture:
    alt text
    May add a feature(option) that can achieve one of the following targets?

    • adjust bar transparency

    • hide this bar

    • autohide, show this bar when mouse hovered

    thanks!

    Mod Edit: Improved Title, moved to Bookmarks Category where most other threads on Start Page can be found.



  • @alexskywalker An Option to Remove the Navigation Bar from Start Page has already been requested. A line of CSS can fix it easily.

    .startpage-navigation {
    display: none !important;}

    I suspect that transparency and autohide would be possible too.

    Ask in the Modding Forum

    Autohide the Navigation Bar would be better for some users rather than hiding it permanently.



  • @alexskywalker This code should work for transparence and auto-hiding (auto-hiding I did now so it maybe doesn't work always… you should test it):

    /* Transparent Start Page Navigation */
    .startpage .startpage-navigation { box-shadow: none !important; }
    .startpage .startpage-navigation { background: transparent !important; }
    .startpage .startpage-navigation .startpage-navigation-group { border: 0 !important; }
    
    /* Transparent Start Page Navigation Buttons */
    button.button-startpage { box-shadow: none !important; }
    button.button-startpage:after { background-image: none !important; }
    button.button-startpage:active { background: transparent !important; }
    
    /* Auto Hide Start Page Navigation */
    .startpage .startpage-navigation:not(:hover) {
      height: 3px !important;
      min-height: 3px !important;
    }
    

    Edit: changed code



  • @potmeklecbohdan thanks! Very helpful!



  • I decided to make my own version, it does not feature auto-hide though but I think it looks good. Feel free to edit it to suite your needs. I made the it smaller too so it doesn't take up as much space and made it partially transparent. Meanwhile the rest of the bar that doesn't have any buttons is completely transparent.

    /*Startpage navigation By Artex*/
    .startpage .startpage-navigation {
        min-height: calc(var(--toolbarHeight) * 0.15)!important;
        box-shadow: none !important;
    }
    .startpage .button-startpage:hover{
        background: var(--colorAccentBg) !important;
    opacity:1;
    }
    .startpage .button-startpage.active{
        background: var(--colorAccentBgDarker) !important;
    }
    .startpage .button-startpage{
        background: var(--colorAccentBg) !important;
    opacity:0.1;
    }
    .startpage .startpage-navigation {
        background-color: transparent !important;
    }
    button.button-startpage:after{
    background-image: none !important;
    }
    .startpage .startpage-navigation .startpage-navigation-group:last-of-type{
    border-left: none !important;
    }
    

    When not interacted with (Shows I am on the Speeddial)
    0_1552154131452_7610b7c6-0cfe-466c-a7f6-4816b2024664-image.png

    When hovering (I was hovering over the history button)
    0_1552154150975_9060ebed-99f6-452f-9f68-ce7842cd0427-image.png


Log in to reply
 

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