Search submit button appearing above search bar

[TopNavNewbie]

Hi all,

I'm creating a home page in a Top Nav output. However, I've run in to trouble with the search bar. For some reason, the search submit button is appearing slightly above the search bar:

Capture.PNG

When I build the project and inspect the code, it looks like this:

Code: Select all

<div class="search-bar search-bar-container needs-pie _Skins_HomeSearchBar mc-component">
                                                <input class="search-field needs-pie" type="search" placeholder="Search">
                                                <div class="search-filter-wrapper">
                                                    <div class="search-filter">
                                                        <div class="search-filter-content">
                                                            <ul>
                                                                <li>All Files</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="search-submit-wrapper" dir="ltr">
                                                    <div class="search-submit" title="Search">
                                                    </div>
                                                </div>
                                            </div> 

Does anyone have any ideas why?

Kind regards,

Louise

[Nita Beck]

I assume you're using a search bar component skin to style the home page search bar, right? (This is opposed to the search bar that appears on all the other pages; that search bar is styled via the main Top Nav skin.) Check out if there's any bottom padding or margin being set on the Submit button; be sure to check all three mediums: Web, Tablet, and Mobile. Or check to see if there's any top padding or margin being set on the Search box.

HTH

[RecPerch]

Curious to see the answer.

This happened to me, except the search button appeared partially below the search bar. I think the reason was because something in my css was causing all pages to have a width smaller than the width set in the skin. I tested using the default stylesheet and the search button was fine. So I searched through my custom css for all width attributes, removed the attribute set in body, but that didn't fix it (it kinda helped, the page did become wider, and the button did move closer to the search bar, but just not all the way). Removed widths set in other styles, but that didn't fix it. Played with the skin, setting it back to all the defaults. That didn't fix it.

After wasting a day or two (or probably more) trying to find the answer I decided to bite the bullet and throw out my css. It was a "legacy" css with multiple editors over the years, including myself, and was pretty convoluted by this time. After creating a default HTML5 Top Nav project, moving over my project files, the search button has been fine (so far). I created a new custom stylesheet and have added back in only those styles I'll be using (instead of keeping styles created by someone else for another project five years ago!!), making the css MUCH MORE LEAN

Gary

[cdschroeder]

Thought I'd pitch in an idea - This happened to me when I changed the font size of the TopNav Search Input without also changing the font size of the HomeSearchBar Search Input. It appears that those values must be the same, even though they are not directly linked.

[TopNavNewbie]

Thank you so much to everyone who replied

I tried cdschroeder's suggestion of changing the font size to be the same. But that didn't work unfortunately.

In the end I resolved it by examining my CSS a bit closer. It turned out that the padding-top on some custom CSS I'd inserted into my main stylesheet was causing the issue.