inj9nhs3fhpabx4

Thanks for offer to help :-). Turns out the solution is quite generic. All that was needed was to add an optional CSS class to the dropdown menu item from Appearance->Menu and then add the following code

.DowndownMenuItemName-navmenu a:hover span{

	background-color: #fff!important;

}

Figured out all I had to do was add ‘btn’ before ‘buy-navmenu’ for class name.
Thanks for the help.

Yes that’s the look, except I want two buttons each a different color.
Also, I want these two buttons remain as menu items of the primary header menu, in the footer menu widget, and in mobile menus.
What is the syntax for renaming the two classes to a btn? Is it to append -btn to the class?

What needs to change in the following?

.buy-navmenu-btn{
  background:#2905a1;
border-radius: 10px;
}

.buy-navmenu-btn a{
  color:#ee1f23 !important;
  font-weight: 900 !important;
}

.buy-navmenu-btn a:hover{
  color:#13aff0 !important;
  font-weight: 900 !important;
}

Thanks for your help.
Also, is there a way to make one of these buttons to be scrollable/floating?

Good to know. Looked at the documentation at https://docs.oceanwp.org/article/164-header-search. The oceanwp search widget is great. Request a feature for future version to allow further customization to insert the oceanwp search widget with the body of a page, and allow searching individual pages, entire site, parts of site, or entire domain.

Would like to see future versions of oceapwp search widget allow searching individual pages, entire site, parts of site, or entire domain.

Thanks, good to know.
For others if interested, there is a custom search which allows searching individual pages, entire site, parts of site, or entire domain. Check out https://cse.google.com

Thanks. But was hoping someone can suggest a CSS code to customise the existing search widget.

Changed the quotes. Working perfectly now. Thanks for all your help ??
For others who may find this useful, here’s the final version:

<label> Country (required)
</label>
[select* Country "Afghanistan" "Albania" "Canada" "USA" "Zimbabwe"]

[group Canada]
<label> State (required)</label>
[select* Canada-states "a" "b" "c" "d"]
[/group]

[group USA]
<label> State (required)</label>
[select* USA-states "w" "x" "y" "z"]
[/group]

[group state-1][group state-2]
<label> State (required)</label>
[text state]
[/group][/group]

Thanks…the display is still incorrect. I am obviously doing something wrong. Please see below:

<label> Country (required)
</label>
[text Country]
[select* Country “Afghanistan” “Albania” “Canada” “USA” “Zimbabwe”]

[group Canada]
<label> State (required)</label>
[select* Canada-states “a” “b” “c” “d”]
[/group]

[group USA]
<label> State (required)</label>
[select* USA-states “w” “x” “y” “z”]
[/group]

[group state-1][group state-2]
[text state]
[/group][/group]

The conditions used:

if [Country] equals "Canada" then show [Canada]
if [Country] equals "USA" then show [USA]
if [Country] not equals "Canada" then show [state-1]
if [Country] not equals "USA" then show [state-2]

Note I had to add [text Country] or Country does not appear as a option for the ‘if’ part of condition. As a result I now see two Country input boxes, but no drop-downs in either. Thanks so much for your patience.

Can you please provide an explicit example with detailed instructions for beginners?
Use case:
1: select a country from a drop-down list
2. Select state from drop-down list if a specific country’s states are known.
3. Type in the state if specific country’s states are unknown.

• This reply was modified 6 years, 9 months ago by inj9nhs3fhpabx4.

Figured it out…hope helps others facing same issue.
Use browser inspect to detect class…then add the following CSS code:

@media screen and (min-width: 768px) {
.contact-info-widget {
font-size:12px;
}
}
@media screen and (max-width: 767px) {
.contact-info-widget {
font-size:8px;
}
}

Figured out I just needed to select ‘self’ for the “Link Target:” drop-down.
Thanks for offering to help.

Alas, above code did not work ??

Just to clarify, by the inspector are you referring to
Chrome->right-click->Elements

Not asking for instructions on how to use, just want to know how to get to the inspector you are referring to. Totally understand if not within the scope of this forum.

Yes, unfortunately don’t know how to get to developer tools, am a beginner ??

However, is there a way to add CSS globally to ALL images, regardless of what widget was used to insert the image in Siteorigin?
This custom CSS would be added from Appearance->Custom CSS

Ok…just noticed more errors in the console for the same image. Does this help with diagnosing the problem?

JQMIGRATE: Migrate is installed, version 1.4.1
googleads.g.doubleclick.net/pagead/id:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
static.doubleclick.net/instream/ad_status.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
googleads.g.doubleclick.net/pagead/id:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
static.doubleclick.net/instream/ad_status.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
ytprefs.min.js:2 Setting up YT API events: _dytid_5139
ytprefs.min.js:2 Setting up YT API events: _dytid_9912
ytprefs.min.js:2 Setting up YT API events: _dytid_6088
ytprefs.min.js:2 Setting up YT API events: _dytid_5328
ytprefs.min.js:2 Setting up YT API events: _dytid_3707
ytprefs.min.js:2 Setting up YT API events: _dytid_5916
ytprefs.min.js:2 YT API ready 2
3(index):7 WebSocket connection to ‘wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data’ failed: Error during WebSocket handshake: Unexpected response code: 403
O @ (index):7
4googleads.g.doubleclick.net/pagead/id:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
3(index):7 WebSocket connection to ‘wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data’ failed: Error during WebSocket handshake: Unexpected response code: 403