Formatting bot-search widget button

Travelify
1

Hello – I have added the Bop Search Box Item Type For Nav Menus widget to add a search bar to the menu on the travel blog (mikemcewan.ca) I am creating. Originally, I noticed that the “search” button was not consistent with the rest of the menu:

I have been able to correct some of these differences using the following code:

@media only screen and (min-width: 767px){
#branding li.bop-nav-search.menu-item {
    margin-left: 0;
    float: right;
    width: 31%;
    max-width: 100%;
}
#branding .bop-nav-search.menu-item form {
    width: 100%;
    margin-top: 1px;
}
.bop-nav-search.menu-item input#s {
    max-width: 100%;
    width: 75%;
    height: 28px;
    margin-bottom: 0;
    border-radius: 0;
}
.bop-nav-search input#searchsubmit {
    height: 38px;
    background: #EC554C;
    color: #fff;
    border-radius: 0;
    border: none;
    left: -4px;
}

However, I have been unable to capitalize the “s” (it is capitalized in Admin Area -> Appearance -> Menu) and cannot get the button to change colors when hovered over using the following code which I used for all the other buttons:

#branding #main-nav li.bop-nav-search input#searchsubmit a:hover {
    background: #3098D5;
	color: #fff;
}

Could someone please help me with these last few customizations? Thank you in advance!

2

Hi @mikemcewan,

Thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Travelify Other Options

#branding #main-nav li.bop-nav-search input#searchsubmit{ 
text-transform: capitalize;
}
#branding #main-nav li.bop-nav-search input#searchsubmit:hover {
    background: #3098D5;
	color: #fff;
}

Best Regards,
Movin

3

Thank you @movin. Could you tell me how to define the current background (when it is selected) for this button as well so it is consistent with the remainder of the menu items?

4

You are most welcome here :slight_smile:

Could you tell me how to define the current background (when it is selected) for this button as well so it is consistent with the remainder of the menu items?

To achieve this try using the below CSS code.


#branding #main-nav li.bop-nav-search input#searchsubmit{ 
    background: #000;
	color: #fff;
}
5

Sorry @movin, I should have been more clear. In the example below, when I am on the “blog” page that button is automatically colours grey to show which page is currently being viewed:

I would like it to do the same for the search button, if possible. I believe the color selection comes from: “Appearance > Customize > Travelify Main Options > Travelify Header Area > Menu Bar Hover Color” if that helps.

6

Do you mean when you are on the search results page on your site then want to change the search button color?

7

That is correct. I would like the button background color to change to grey so that it is consistent with the other menu buttons.

8

Use the below CSS code to achieve that.

body.search-results #branding #main-nav li.bop-nav-search input#searchsubmit{ 
    background: #bdb8be;
	color: #fff;
}