Support » Fixing WordPress » .slideToggle Javascript issue with search form
.slideToggle Javascript issue with search form
-
Hey guys,
I have a search form in my header that I want to stick to the top of the screen when scrolling just like I do with my menu. At this time, I’m able to have it stick where I want and all that. The only problem is that I need it to slide to the left when I toggle the search button (the box is hidden until toggled). Currently, it slides to the bottom nicely and then jumps to the left of the button, where I want it to end up. However, this doesn’t look smooth.
Here is my JS:
/* * Toggles Header Search On and Off */ jQuery(document).ready(function($){ $(".search-toggle").click(function(){ $("#search-container").slideToggle('slow', function(){ $('.search-toggle').toggleClass('active'); }); // Optional return false to avoid the page "jumping" when clicked return false; }); });
Please let me know what I need to change!
Thanks,
Brett
-
Sounds like a CSS issue. Can you show us the page with the issue?
It’s currently being hosted on local servers.
Here is the CSS:
.search-toggle { float: right; width: 86px; height: 86px; padding: 22px; margin-right: 20px; color: #fff; text-align: center; cursor: pointer; } @media screen and (max-width: 600px) { .search-toggle { position: absolute; top: 0; right: 0; margin-right: 0; } } input[type="search"] { box-sizing: border-box; width: 100%; } .search-box-wrapper { z-index: 2; width: 100%; display: none; } .search-box { padding-top: 1rem; padding-bottom: 1rem; background: #000; } .search-box .search-field { max-width: 392px; float: right; padding: 1rem 2rem 1rem 4rem; font-size: 20px; font-size: 2rem; background-color: #fff; border: 0; } .error404 .search-submit, .search .search-submit, .search-box .search-submit { display: none; }
Can you replicate the issue using a sandbox like JSfiddle? You want to make it as easy as possible for volunteers to help you
Hmmm, I’m not really sure how to do that. I tried to paste the html, css, and js into the JSfiddle but I just got a static black box.
Essentially, I would just like to know what the JS would look like to have a slide left, not a slide down.
- The topic ‘.slideToggle Javascript issue with search form’ is closed to new replies.