Created
October 26, 2019 08:47
-
-
Save acsr/5773ac6ae40539d9920f0650109a861f to your computer and use it in GitHub Desktop.
CSS Snippets to fix the Algolia dropdown overlay for the sphinx rtd theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#bottom-searchbox{ | |
width: 300px; | |
position: fixed; | |
top: 0; | |
left: 0; | |
padding: 16px 12px 12px 12px; | |
background-color: #005a8c; | |
z-index: 1000; | |
} | |
#bottom-searchbox input[type=text] { | |
width: 100%; | |
border-radius: 50px; | |
padding: 6px 12px; | |
border-color: #005a8c; | |
} | |
#bottom-searchbox input.ds-input { | |
width: 100%; | |
} | |
span.algolia-autocomplete{ | |
width: 100%; | |
} | |
/* for small phones */ | |
@media screen and (max-width: 600px) { | |
div#bottom-searchbox { | |
padding-right: 10%; | |
} | |
input.ds-input { | |
width: 100%; | |
} | |
.algolia-autocomplete .ds-dropdown-menu { | |
max-width: 100%; | |
min-width: 100%; | |
} | |
span.algolia-autocomplete, | |
span.algolia-autocomplete.algolia-autocomplete-left, | |
span.algolia-autocomplete.algolia-autocomplete-right{ | |
width: 100%; | |
} | |
} | |
.wy-nav-top { | |
line-height: 40px; | |
} | |
@media screen and (max-width: 380px) { | |
.wy-nav-top { | |
line-height: 20px; | |
} | |
} | |
@media screen and (max-width: 340px) { | |
.wy-grid-for-nav { | |
width: 341px; | |
} | |
} | |
@media screen and (max-width: 1000px) { | |
div#bottom-searchbox { | |
width: 1300px; | |
} | |
form#rtd-search-form { | |
width: 280px; | |
} | |
} | |
@media screen and (max-width: 425px) { | |
div#bottom-searchbox { | |
width: 200%; | |
} | |
form#rtd-search-form { | |
width: 50%; | |
} | |
.wy-nav-top i { | |
padding-top: 0; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#bottom-searchbox{ | |
width: 300px; | |
position: fixed; | |
top: 0; | |
left: 0; | |
padding: 16px 12px 12px 12px; | |
background-color: #005a8c; | |
z-index: 1000; | |
} | |
#bottom-searchbox input[type=text] { | |
width: 100%; | |
border-radius: 50px; | |
padding: 6px 12px; | |
border-color: #005a8c; | |
} | |
#bottom-searchbox input.ds-input { | |
width: 100%; | |
} | |
span.algolia-autocomplete{ | |
width: 100%; | |
} | |
/* for small phones */ | |
@media screen and (max-width: 600px) { | |
div#bottom-searchbox { | |
padding-right: 10%; | |
} | |
input.ds-input { | |
width: 100%; | |
} | |
.algolia-autocomplete .ds-dropdown-menu { | |
max-width: 100%; | |
min-width: 100%; | |
} | |
span.algolia-autocomplete, | |
span.algolia-autocomplete.algolia-autocomplete-left, | |
span.algolia-autocomplete.algolia-autocomplete-right{ | |
width: 100%; | |
} | |
} | |
.wy-nav-top { | |
line-height: 40px; | |
} | |
@media screen and (max-width: 380px) { | |
.wy-nav-top { | |
line-height: 20px; | |
} | |
} | |
@media screen and (max-width: 340px) { | |
.wy-grid-for-nav { | |
width: 341px; | |
} | |
} | |
@media screen and (max-width: 1000px) { | |
div#bottom-searchbox { | |
width: 1300px; | |
} | |
form#rtd-search-form { | |
width: 280px; | |
} | |
} | |
@media screen and (max-width: 425px) { | |
div#bottom-searchbox { | |
width: 200%; | |
} | |
form#rtd-search-form { | |
width: 50%; | |
} | |
.wy-nav-top i { | |
padding-top: 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment