Skip to main content
12 events
when toggle format what by license comment
Aug 3, 2017 at 2:40 vote accept Jacob Jordan
Aug 3, 2017 at 2:39 comment added Jacob Jordan I think I figured it out! Added the following code to push the search bar to the left on mobile. The search bar was creating an issue where it was floated right but not aligned with the logo and left a lot of blank space. @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { .site-header #dokna_product_search-2 { float: left; } }
Aug 2, 2017 at 21:59 comment added rudtek glad it worked! what do you mean by skewed on mobile? What do you want it to look like?
Aug 2, 2017 at 21:52 comment added Jacob Jordan BINGO! Looks great, much appreciated. Looks like 30px is the perfect amount. Is a little skewed on mobile. - Any suggestions there? Seriously, so much appreciate your help. I'm learning and sometimes a nudge can go such a long way.
Aug 2, 2017 at 17:07 history edited rudtek CC BY-SA 3.0
added 280 characters in body
Aug 2, 2017 at 17:06 comment added rudtek see my answer with more information
Aug 2, 2017 at 14:49 comment added Jacob Jordan 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; }
Aug 1, 2017 at 17:46 comment added rudtek @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.
Aug 1, 2017 at 17:41 comment added mrben522 FYI he's saying add top margin to push it down.
Aug 1, 2017 at 17:39 comment added mrben522 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 {
Aug 1, 2017 at 17:37 comment added Jacob Jordan Thanks for taking a peak. Since the bottom margin is already 0, I'm not sure how to move it further down?
Aug 1, 2017 at 17:18 history answered rudtek CC BY-SA 3.0