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?

2

Edit:

Add these two lines into My filters section of uBlock Origin, save the changes, and reload your Google search page to load the changes.

!Disables sticky search bar for all Google search domains
google.*##.jsrp.mdm.minidiv

Here's how I got the answer for the curious ones. One can skip this.

I tried the Chrome Developer tools and came across this line on a Google search page when inspecting that search bar:

<div jscontroller="ZyRBae" jsaction="rcuQ6b:npT2md" class="jsrp mdm" id="searchform" style="position: absolute; top: 20px;">

It changed to the following when I scrolled down the page:

<div jscontroller="ZyRBae" jsaction="rcuQ6b:npT2md class="jsrp mdm minidiv" id="searchform" style="position: fixed; top: 0px;">

The class changed to jsrp mdm minidiv and the position to absolute.

In the styles corner, I tried to mess up with the position which hid the sticky search bar, so I concluded that what I need is a CSS fix for this problem. I, then, looked for an extension and came across StyleBot.

I installed it, opened it on a Google Search page, used its element selector (top left; mouse icon) to select search bar, and chose Hide for Visibility under Layout and Visibility section. I had to do this twice and that removed the sticky search bar. I reloaded the page and it was good to work with.

I thought to check what CSS trick did it and found this under "Edit CSS" in StyleBot on that same page:

div.sfbg.nojsv {
    display: none;
}

div.jsrp.mdm.minidiv {
    display: none;
}

I realized that I was unable to, or perhaps the extension itself was, select that aforesaid highlighted element in uBlock Origin. So, I thought to myself, if I supply it manually that should do the trick.

I then fired up Element picker mode of uBlock Origin, selected an element of the sticky search bar, and edited it to this:

enter image description here

And it worked like a charm! It also eliminated the need to use an extension (StyleBot) just for one hack.

The aforesaid instructions should help you out in troubleshooting and finding your own solution if ever Google changes the element's name in the future.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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