[Website] Hardenize & Translate placement

[Nextron]

On the homepage, I noticed two object in the header (after you disable ad blocking stuff). A hardenize security logo and a Google translate widget. These are anchored in the header that remains fixed at the top of the website when you scroll down. However, these two elements cause the header to stretch to about five times its normal height, blocking much of the other content. I don't think that's desired design.

site.JPG (56.65 KiB) Viewed 6372 times

[tank]

what browser?
doesnt happen in chrome

[Nextron]

I just tried in Pale Moon (two different PC's, different versions), Internet Explorer and Chrome. All showing the same layout as in the image. For the last two there are no extensions installed.

[gregster]

I can reproduce it on Firefox, Chrome, IE and Edge.
To be clear, initially after loading the page, you don't see the problem - you have to scroll down a bit - and then the header expands and takes over a lot of screen area.

[TheDewd]

It's related to Cloudflare.

Code: Select all

<cloudflare-app app="hardenize" data-position="left" style="padding: 0px;">
	<hardenize-wrapper><a target="_blank" href="https://www.hardenize.com/report/autohotkey.com?summary" title="Hardenize is a monitoring service that analyzes web site configuration and security. Click on the badge to see the most recent assessment report."><img src="https://badge.hardenize.com/v2/images/hardenize-badge-autohotkey.com.png" width="70" height="110" border="0"></a></hardenize-wrapper>
</cloudflare-app>
<cloudflare-app id="cloudflare-app-google-translate" data-position="left">
	<div class="skiptranslate goog-te-gadget" dir="ltr" style="">
		<div id=":0.targetLanguage">
			<select class="goog-te-combo" aria-label="Language Translate Widget">
				<option value="">Select Language</option>
				<option value="en">English</option>
				<option value="hy">Armenian</option>
				<option value="zh-CN">Chinese (Simplified)</option>
				<option value="zh-TW">Chinese (Traditional)</option>
				<option value="hr">Croatian</option>
				<option value="cs">Czech</option>
				<option value="fi">Finnish</option>
				<option value="fr">French</option>
				<option value="ka">Georgian</option>
				<option value="de">German</option>
				<option value="el">Greek</option>
				<option value="hi">Hindi</option>
				<option value="it">Italian</option>
				<option value="ja">Japanese</option>
				<option value="lv">Latvian</option>
				<option value="lt">Lithuanian</option>
				<option value="fa">Persian</option>
				<option value="pl">Polish</option>
				<option value="pt">Portuguese</option>
				<option value="ro">Romanian</option>
				<option value="ru">Russian</option>
				<option value="sr">Serbian</option>
				<option value="th">Thai</option>
				<option value="uk">Ukrainian</option>
				<option value="ur">Urdu</option>
			</select>
		</div>
		Powered by <span style="white-space:nowrap"><a class="goog-logo-link" href="https://translate.google.com" target="_blank"><img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" style="padding-right: 3px" alt="Google Translate" width="37px" height="14px">Translate</a></span>
	</div>
</cloudflare-app>

[tank]

ah now i see ok thanks I will find better placement

[tank]

is that better?

[TheDewd]

is that better?

Hardenize location is perfect, however Google Translate is still near the top, but this time it can't be interacted with at all.

It's behind the overlay element.

[Nextron]

To me it looks good now. With the translate element under the 'Is it safe?" link.