“Not Found” Search Button

  • Resolved nicoleWP

    (@nicolewp)


    3 years, 11 months ago

    Please see screenshot as my site is still being developed. I referenced this topic on wordpress.com https://wordpress.com/forums/topic/rebalance-theme-how-to-add-search-to-the-header-of-the-site/ for moving the search box in the desktop view to top-right. Note: I wasn’t able to get the code to work on tablet/mobile (the search box would overlap the featured hero image on the portfolio project detail pages. So I decided to just try to get it to work on desktop. This is my code with corresponding screenshot.

    /*Make top search submit button appear to be just to right of search input box and align with line underneath it*/
@media screen and (min-width: 880px) {
.search-submit {
 	float: left;
 	right: 0;
	position: absolute;
}
}
/*Change width of search input box*/
@media screen and (min-width: 880px) {
	.widget_search .search-field {
    margin-bottom: 1.5em;
    width: 90%;
	height: 1.1em;
}
}
/*Make search-form appear in header on desktop*/
@media screen and (min-width: 880px) {
.widget-area .widget_search {
position: absolute;
top: -220px;
right: 0;
}
}

    However I think my right: 0; in first section of the code is causing a problem with the “Nothing found” search button (bottom of screen). It is causing the button to be moved too far to the right of its input box? Any ideas on how to fix my CSS? Thank you.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi there!

    Try this code instead:

    
@media screen and (min-width: 880px) {
  .no-results.not-found form.search-form {
    float: right;
		margin-right: -142.5px;
		margin-top: -480px;
  }
}

    Since we couldn’t actually check your site, the values might not be working for you. Check the margins on your site and play around with the numbers to achieve what you were looking for.

    Thread Starter nicoleWP

    (@nicolewp)

    Hi @fresatomica ,

    Thanks so much for getting back to me. I tried the above code and it did’t have any effect but after a bit of trial-and-error, I figured out a solution. In my code above, I replaced this piece of code

    /*Make top search submit button appear to be just to right of search input box and align with line underneath it*/
@media screen and (min-width: 880px) {
.search-submit {
 	float: left;
 	right: 0;
	position: absolute;
}
}

    with this

    /*Make top search submit button appear to be just to right of search input box and align with line underneath it*/
@media screen and (min-width: 880px) {
.widget_search .search-submit {
 	right: 0;
	position: absolute;
}
}

    and it worked! Don’t know why it worked but it is good enough for now… Thanks again!

    • This reply was modified 3 years, 11 months ago by nicoleWP.
    • This reply was modified 3 years, 11 months ago by nicoleWP.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘“Not Found” Search Button’ is closed to new replies.