Fix namespacing problem

docs/js-api-reference.rst

@@ -1,7 +1,8 @@
 JavaScript API Reference
 ========================
 
-Following are the functions that are defined in `rtd_sphinx_search.js`_,
+Following are the functions that are defined in ``READTHEDOCS`` object in `rtd_sphinx_search.js`_.
+You can override any of the following functions to make this extension work in your way.
 
 .. js:autofunction:: debounce
 .. js:autofunction:: convertObjToUrlParams
@@ -24,5 +25,32 @@ Following are the functions that are defined in `rtd_sphinx_search.js`_,
 .. js:autofunction:: showSearchModal
 .. js:autofunction:: removeSearchModal
 
+Example: Overriding A JavaScript Function
+------------------------------------------
+
+Here is an example on how to add some customizations
+by overriding some of the above functions.
+
+Let's say you have a custom search bar (different from the default one),
+and you want to show the search UI when the user clicks on that.
+For this, you can override ``getInputField()`` function to return your own search bar.
+This will add all the required event-listeners in the right place.
+
+Create a ``custom.js`` and write the following code:
+
+.. code-block:: js
+
+    // custom.js
+
+    var READTHEDOCS = {
+        getInputField: function() {
+            var custom_search_bar = document.querySelector('.my-custom-search-bar');
+            return custom_search_bar;    
+        }
+    }
+
+And then, you can `include this custom.js file in your docs`_.
+
 
 .. _rtd_sphinx_search.js: https://github.com/readthedocs/readthedocs-sphinx-search/blob/master/sphinx_search/static/js/rtd_sphinx_search.js
+.. _include this custom.js file in your docs: https://docs.readthedocs.io/page/guides/adding-custom-css.html

sphinx_search/static/css/rtd_sphinx_search.css

@@ -269,7 +269,7 @@
     text-decoration: underline;
 }
 
-@media (max-width: 670px) {
+@media (max-width: 520px) {
     .rtd__search__credits {
         height: 50px;
         bottom: calc(-80% - 40px);