CSS for Search Bar

gistfile1.txt

.js-edx-header-ui .course-search-bar {
  position: absolute;
  left: 0;
  top: 77px;
  z-index: 9999;
  width: 100%;
  padding: 20px 60px;
  background-color: rgb(0, 125, 184);
  margin: 0;
}


.js-edx-header-ui .react-autosuggest__input {
  margin-left: 75px;
  padding-left: 15px;
  margin-right: 70px;
  padding-right: 15px;
  width: 90%;
}


.js-edx-header-ui .js-search-button {
  color: white;
}

/*
	This style is not getting applied so it has been added in JavaScript.

.js-edx-header-ui .search-bar-label {
  color: white;
  font-weight: bold;
}
*/

@AlasdairSwan: Separately, one problem with the current CS is that the magnifying glass goes under the text box when the page gets too narrow. I could add additional padding, but then it will look like a lot of extra spacer on a wider screen.

@robrap could you attach a screenshot of what you mean re. the magnifying glass. I think you may need to adjust the widths of some of the top level containers.

@AlasdairSwan: You can try using this link to see it in action.

Here is a screenshot of the magnifying glass going under on a narrower screen.

I don't know how to have better control over the magnifying glass (.js-edx-header-ui .js-search-button) relative to the input box (.js-edx-header-ui .react-autosuggest__input). If I change the input box width to 87% (which is the current state), it fixes the overlap issue, but gets a wide gap on a large screen like the following: