Docs

[ylpl]

Hi there,

I’m having a little trouble with my search bar. It’s actually a CornerStone Search Bar element that I plugged into my topbar. I’m simply trying to align my “Search Button” to the right of my search bar. Unfortunately, as you can see, it aligns just underneath it. I’ve tried many different methods but none seem to work. Would you be able to assist me with aligning it correctly?

Thank you very much, I appreciate it greatly.

Daniel

[Prasant Rai]

Hello Daniel,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[ylpl]

I’m so sorry. I totally forgot! It is:

http://dev.ylpl.net/wordpress/

Thank you again!

Daniel

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.form-search>div {
    text-align: left !important;
}
.search-query {
    width: 90% !important;
}

Let us know how this goes!

[ylpl]

Thanks, that seemed to do the trick!

In addition, I’m trying to adjust the button to look like a magnifying glass in media mode but the css codes do not seem to apply. You’ll see that as a backup place I instead have shrunk the text so it fits in the searchbox in media mode. Would I need to actually add a photo to my media file or can a simple code bring up a magnifying glass?

Also, I’ve tried shrinking my placeholder text in my search bar but I can’t seem to adjust the size of it. Would that be possible?

As always, I’m so appreciative of everything you guys do. I’d be lost without you. Thank you so much!

Daniel

[Prasant Rai]

Hello Daniel,

Thanks for writing in!

1) You can add this under Custom > CSS in the Customizer:

input[type="text"] {
    font-size: 12px;
}

2) Would you mind elaborating first part of the question?

Thanks.

[ylpl]

You guys are awesome! I used that in media mode and it worked great! As far as the 1st part of the question, I decided that it looks good when I just change the size of the button in media mode.

However, I was wondering if I could center my search bar + search button? As you’ll see, it seems to be leaning towards the left. I tried centering it but it squeezes my search button below it in mobile view and the magnifying glass that is on the left side of the search bar ends up outside. Any way to fix and center this without pushing my search button below and keeping the magnifying glass on the left side of the search bar?

Also, I’ve been trying to install two radio buttons underneath and found the right <div> area for it, but when I do that, once again the magnifying glass pops out of the search bar. Is there any way to fix this? Also is there any way to center it?

Sorry for the plethora of questions, I’m getting so close to the finish line, which I couldn’t have done without your help. I appreciate it. 🙂

Thank you again,

Daniel

[Prasant Rai]

Hello Daniel,

Thanks for writing in!

1) To center align search bar you can add this under Custom > CSS in the Customizer:

.form-search>div {
    text-align: center !important;
}

2) To fix search icon alignment problem, please use following CSS:

.form-search:before {
    left: 70px !important;
    bottom: 70% !important;
}

Let us know how it goes.

Thanks.

[ylpl]

Thank you, that did the trick. I was even able to edit the .form-search in media mode too. 🙂

The last part of my search bar I’m trying to tweak are my radio buttons right below. I gave them a class of “lookfor” but for some reason I still wasn’t able to customize them in css. I was hoping to center them underneath the search bar instead of the far left as they’re currently constructed. Would that be possible?

Thanks again!

Daniel

[Nabeel A]

Hi again,

To centeralize the radio buttons, you can add this code in your Customizer:

form#searchform {
    text-align: center !important;
}

Let us know how this goes!

[ylpl]

Wow that worked perfectly. Thank you! You guys are the best!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts