0

I can't get the search box to go any lower. It seems the padding, margin, etc. are all 0. But, when inspecting, it seems that the box containing the search bar isn't as large as the box containing the header logo is taller, thus sits more flush with the bottom.

How do I go about adjusting the size of the box that the search bar is in so that it will sit flush with the bottom of the section (bottom-aligned with the logo?)

Thanks!

staging.yodega.com

enter image description here

enter image description here

Improve this question

1 Answer 1

Reset to default
1

This is more of a css question, but here's what i found looking at your site:

This selector will control it:

.site-header .widget {
    margin: 40px 0 0 0;
}

this is the code that has padding:

<aside id="dokna_product_search-2" class="widget widget_dokna_product_search">

Or if that doesn't work try making it more specific:

That box (col-md-8.col-sm-7.clearfix) has no height value, so it's going to adjust. It could be specicifity though. Try this:

   .site-header #dokna_product_search-2 {
        margin: 40px 0 0 0;
    }

You can add !important to the css, but that sometimes adds more confusion in the long run.

Add the code. Let me know if it works, but leave it in so we can confirm it's there.

Improve this answer
9
  • Thanks for taking a peak. Since the bottom margin is already 0, I'm not sure how to move it further down?
    – Jacob Jordan
    Commented Aug 1, 2017 at 17:37
  • might want to narrow down your selectors there just in case new wdigets area added to the header at a later date. .site-header .widget_dokna_product_search {
    – mrben522
    Commented Aug 1, 2017 at 17:39
  • FYI he's saying add top margin to push it down.
    – mrben522
    Commented Aug 1, 2017 at 17:41
  • @mrben522 is right. I've doubled the top marigin to push the search bar down. I used a general selector but provided the actual html to make it more specific if you need. If you load the css I presented above it will move down. If you add other widgets you MAY need to change selectors. I didn't view the site on a phone, so you may need to address responsiveness as well.
    – rudtek
    Commented Aug 1, 2017 at 17:46
  • Thanks for your help with this. I added the following lines to my style.css in my child theme. Unfortunately, it doesn't have any effect. As hopefully you can tell in the picture, it seems that the search bar is as low as it can be in it's "box." Not sure how to move that "box" (col-md-8.col-sm-7.clearfix) to be flush with the bottom of the logo? I've added a photo to the original posting to show the box issue. .site-header .widget_dokna_product_search{ margin-top: 80px; }
    – Jacob Jordan
    Commented Aug 2, 2017 at 14:49

Not the answer you're looking for? Browse other questions tagged or ask your own question.