Timeline for Header Sidebar Won't Move Lower - Want to Align with Header Logo
Current License: CC BY-SA 3.0
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 |