Virtue Topbar Edits

Hi,

Apologies for the delay! In Virtue theme you can enable a search widget and any other widget in the topbar from Appearance > Widgets. Just make sure that you have first enabled the “Enable widget area in right of Topbar” from Theme Options > Topbar Settings.

Does that get you what you’re after?

Kindly,

Hannah

Hi Hannah,

Thank you so much for responding and please don’t apologize! ?? My search bar is enabled. I may have custom css that has deleted it…??? If I do, I’m not sure where to find it other than the what I put in my first message and this which is under Customize, Additional CSS,: div.home-margin:nth-child(2) { display:none; }

This none is the search bar??? I have no idea what this code is for.

Thank you for any help that you may give!

Hi there!

I inspected your page and the column for the topbar widgets is blank. Please watch this screen recording – https://share.getcloudapp.com/OAulODEQ.

Please could you send us a screenshot of your widgets page? The search bar should be added to the “Topbar Widget” area. See this screen recording – https://share.getcloudapp.com/bLuZrnDW.

I hope this helps, and let us know if we can help you further.

Regards,
Karla

Hi Karla,

Thank you so much! I’ve added the widget, but it doesn’t look good. How can I move it to the far left and make it smaller, to match the widgets on the far side? Also, where did you go to get to the coding that’s in the first screen recording above? I’m about to send the screen shot of widgets.

Thank you!

I can’t seem to add the screen shot. Sorry I am the progressive don’t become your parents commercial… ??

But I did add the search bar. It just looks bad.

• This reply was modified 1 year, 5 months ago by sleeneys.
• This reply was modified 1 year, 5 months ago by sleeneys.

Hi @sleeneys,

Try adding this to your css:

label.wp-block-search__label {
display: none;
}
input#wp-block-search__input-1 {
padding: 0;
}
topbar-search form {
float: left;
}

Is that a bit more what you’re after?

Kindly,

Hannah

Hi Hannah,

Thank you so much! It’s still bigger and too far to the right. I’m wondering if code is somewhere else that may keep it like this…??? The only difference I can see that this code made is removing the word “Search”. I’ve added this code under Appearance, Additional CSS.

Hey,

Oh sorry, try changing that to this:

label.wp-block-search__label {
display: none;
}
input#wp-block-search__input-1 {
padding: 0;
}
topbar-search form, div#topbar-search {
float: left;
}

You need to paste it into your custom css box in Appearance > Theme Options > Additional Settings.

Let me know how that works for you!

Kindly,

Hannah

Hi Hannah,

Thank you so much!! I’ve added it here and it’s better, so thank you! Is there a way to make it look the same as the Search bar on the footer menu/bottom?

Hi there!

Since you are using the WordPress Search block, modify the settings to show the “Search” text instead of the icon. Watch this for reference – https://share.getcloudapp.com/yAu9LOmg.

Then, you might need to adjust some styles with custom CSS code again. Hopefully, Hannah’s previous code references will guide you.

If you need further assistance, please let us know.

Regards,
Karla

Hello,

Thank you so much! Where do I go to find the CSS for the Search that’s on the bottom of my home page? I’d like to just copy that and change it for the topbar. That way, the search bars will match. I’m pretty sure the bottom Search (the one I like) is customized a little.

• This reply was modified 1 year, 5 months ago by sleeneys.

Hi there!

This is how you can inspect elements on your page and look at their styles – https://share.getcloudapp.com/rRuz9zo6

I still do not see a placeholder for your topbar search and the search icon is still in use – https://share.getcloudapp.com/yAu929lQ.

On the other hand, if you want the same borders to be applied to them, add this to your Custom CSS code:

.wp-block-search__input,
.wp-block-search__button {
    border-width: 2px;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;
}

This is how it will look – https://share.getcloudapp.com/2NupXp09.

For more information about CSS codes, you can refer to this page – https://www.w3schools.com/css/css_examples.asp.

I hope this helps, and let us know if we can help you further.

Regards,
Karla

Hi Karla,

Thank you so much! Is there anyway this can match the Search bar that’s at the bottom. Or can you possibly tell me where I can find that code? Thank you!