1

Google recently introduced a sticky search bar that, as the name suggests, sticks to the page on top of it when the user scrolls. Here's how it looks on scrolling down:

enter image description here

I find sticky top bars incredibly annoying because they are often of no use to me, and they encroach upon precious screen real estate. Stack Exchange websites thankfully offer a preference to disable the sticky top bar, but I couldn't find such setting in Google Search settings or in Google account settings.

When looking for solutions, I came across the answers to the question Un-stick sticky search bar (like on YouTube or Facebook), and all of them failed to help me out.

I had already tried the uBlock Origin. I ended up disabling the Google search bar completely from the whole page, which was also annoying because I do use Google search bar.

I also tried the bookmarklet approach (javascript execution) as suggested here but it achieved the same effect as uBlock Origin.

I also know I can disable javascript which solves this problem, but the Google search page looks ugly in that case, and it also reduces some functionality along the way.

So, how do I remove the sticky search bar, but not the search bar from the top of the page?

0

You can use either of the following two userscripts to make Google search bar unsticky. Userscripts were tested on Firefox v86 with Greasemonkey addon.

Note: if you don't know about userscripts, you can get started with them here.


Following userscript keeps the search bar fixed at the absolute top. This means that if you want to type in the Google search bar (this is not browser's URL/search bar) you would have to scroll to the top. The search bar would otherwise remain invisible when scrolling up and down. This userscript makes the search bar least intrusive.

// ==UserScript==
// @name         Unsticky Google search bar
// @namespace    http://127.0.0.1
// @version      0.1
// @description  Makes the Google search bar unsticky
// @icon         https://www.google.com/favicon.ico
// @author       NanoBot
// @include        https://www.google.*/search?*
// @grant        unsafeWindow
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    const target = document.getElementById('searchform')
    const config = {attributeFilter: ["style"]}
    const callback = function(mutationList, observer) {
        for(const mutation of mutationList) {
            if (mutationList[0].target.style.position === 'fixed') {
                target.style.position = 'absolute'
                target.style.top = '0px'
            }
        }
    }

    const observer = new MutationObserver(callback)
    observer.observe(target,config)

})();

This userscript is for those who wants to see the search bar when scrolling up but wants it be hidden when scrolling down.

// ==UserScript==
// @name         Unsticky Google search bar
// @namespace    http://127.0.0.1
// @version      0.1
// @description  Makes the Google search bar unsticky
// @icon         https://www.google.com/favicon.ico
// @author       NanoBot
// @include        https://www.google.*/search?*
// @grant        unsafeWindow
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    const searchBar = document.getElementById('searchform')
    var lastPosition = window.scrollY
    document.addEventListener('scroll', event => {
      var newPosition = window.scrollY

      if (newPosition > lastPosition && searchBar.style.position === 'fixed') {
         searchBar.style.position = 'absolute'
      }
  
      if (newPosition < lastPosition && searchBar.style.position === 'absolute') {
        searchBar.style.position = 'fixed'
      }
  
      lastPosition = window.scrollY
  
    })

})();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.