Why is the search box wonky?

[helvelin]

Code: Select all

<!-- EVENT overall_header_searchbox_before -->
			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header" role="search">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
			<!-- EVENT overall_header_searchbox_after -->

			</div>
			<!-- EVENT overall_header_headerbar_after -->
		</div>
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE navbar_header.html -->
	</div>

	<!-- EVENT overall_header_page_body_before -->

www.02forum.co.uk


The search box is not sitting correctly, can anyone advise?

Thanks

[janus_zonstraal]

And what do you find "weird" here it seems fine?

[Mannix_]

The issue is not the searchbar. The issue is you big image that you used as a logo but it rather should be used as banner so to fix this you want to.

Open colours.css find

Code: Select all

.site_logo {
    background-image: url(./images/02banner4.jpg);
}

change it to

Code: Select all

.headerbar {
    background-image: url("./images/02banner4.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

then in common.css you want to find

Code: Select all

.site_logo {
    display: inline-block;
    width: 900px;
    height: 200px;
}

and change it to

Code: Select all

.site_logo {
    display: inline-block;
    min-height: 200px;
}

the end resault

9ea55484c26d.png

don't forget to purge browser cache after making changes

[helvelin]

Brilliant thank you very much

[helvelin]

Actually tried it and have lost the banner,

[helvelin]

All sorted, thank you again