{"id":1356,"date":"2026-06-06T17:00:00","date_gmt":"2026-06-06T22:00:00","guid":{"rendered":"https:\/\/tolinku.com\/blog\/?p=1356"},"modified":"2026-03-07T03:35:09","modified_gmt":"2026-03-07T08:35:09","slug":"banner-position-and-ux","status":"publish","type":"post","link":"https:\/\/tolinku.com\/blog\/banner-position-and-ux\/","title":{"rendered":"Smart Banner Position: Top, Bottom, or Floating?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Where you place your smart banner on the page affects both conversion rates and user experience. A top banner is highly visible but pushes content down. A bottom banner is less intrusive but easier to ignore. A floating banner follows the user as they scroll but can feel aggressive. Each position has tradeoffs, and the right choice depends on your content type, audience, and goals.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This guide compares the three main banner positions with their UX implications and technical implementation. For banner animations, see <a href=\"https:\/\/tolinku.com\/blog\/animated-smart-banners\/\">animated smart banners<\/a>. For dismiss behavior, see <a href=\"https:\/\/tolinku.com\/blog\/banner-dismiss-behavior\/\">banner dismiss behavior<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><img decoding=\"async\" src=\"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/screenshot-banner-form-preview-1772822964529.png\" alt=\"Tolinku smart banner live preview in a mobile device frame\">\n<em>The live banner preview showing how the banner appears on a mobile device.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Position Comparison<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>Factor<\/th>\n<th>Top (Fixed\/Static)<\/th>\n<th>Bottom (Sticky)<\/th>\n<th>Floating<\/th>\n<\/tr>\n<\/thead>\n<tbody><tr>\n<td>Visibility<\/td>\n<td>Highest (first thing users see)<\/td>\n<td>Moderate (in peripheral vision)<\/td>\n<td>High (follows scroll)<\/td>\n<\/tr>\n<tr>\n<td>Content disruption<\/td>\n<td>High (pushes content down)<\/td>\n<td>Low (overlays bottom edge)<\/td>\n<td>Moderate (overlays content)<\/td>\n<\/tr>\n<tr>\n<td>Typical CTR<\/td>\n<td>1.5-3%<\/td>\n<td>1-2%<\/td>\n<td>2-4%<\/td>\n<\/tr>\n<tr>\n<td>User annoyance risk<\/td>\n<td>Moderate<\/td>\n<td>Low<\/td>\n<td>High<\/td>\n<\/tr>\n<tr>\n<td>Mobile UX<\/td>\n<td>Can conflict with browser chrome<\/td>\n<td>Good (natural thumb zone)<\/td>\n<td>Can conflict with bottom nav<\/td>\n<\/tr>\n<tr>\n<td>SEO impact<\/td>\n<td>Risky if too large (Google interstitial penalty)<\/td>\n<td>Minimal<\/td>\n<td>Risky if covers content<\/td>\n<\/tr>\n<\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Top Position<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">How It Works<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The banner sits at the top of the page, either as a static element (pushes content down) or fixed (overlays the top of the viewport):<\/p>\n\n\n\n<pre><code class=\"language-css\">\/* Static top banner: pushes content down *\/\n.smart-banner--top-static {\n  position: relative;\n  width: 100%;\n  background: #1a1a2e;\n  color: white;\n  padding: 12px 16px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n\/* Fixed top banner: overlays content *\/\n.smart-banner--top-fixed {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  background: #1a1a2e;\n  color: white;\n  padding: 12px 16px;\n}\n\n\/* When using fixed, add padding to body to prevent content overlap *\/\nbody.has-top-banner {\n  padding-top: 60px; \/* Match banner height *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">When to Use<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>High-priority campaigns<\/strong> where maximum visibility matters.<\/li>\n<li><strong>First-time visitors<\/strong> who have not seen the banner before.<\/li>\n<li><strong>Short pages<\/strong> where a bottom banner might not be visible without scrolling.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Considerations<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Google&#39;s interstitial penalty:<\/strong> Google&#39;s <a href=\"https:\/\/developers.google.com\/search\/docs\/appearance\/page-experience\" rel=\"nofollow noopener\" target=\"_blank\">page experience guidelines<\/a> penalize pages with large interstitials that block content on mobile. A top banner that takes up more than ~15-20% of the viewport may be flagged. Keep it slim (50-70px height).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Safari&#39;s address bar:<\/strong> On iOS Safari, a fixed top banner can overlap with the browser&#39;s address bar, especially during scroll animations. Use <code>env(safe-area-inset-top)<\/code> to account for this:<\/p>\n\n\n\n<pre><code class=\"language-css\">.smart-banner--top-fixed {\n  top: env(safe-area-inset-top, 0);\n  padding-top: max(12px, env(safe-area-inset-top, 0));\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Apple&#39;s native smart banner:<\/strong> If you use Apple&#39;s <code>&lt;meta name=&quot;apple-itunes-app&quot;&gt;<\/code> tag, Safari shows its own top banner. Do not show a custom top banner at the same time; the user sees two banners stacked.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bottom Position<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">How It Works<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The banner sticks to the bottom of the viewport:<\/p>\n\n\n\n<pre><code class=\"language-css\">.smart-banner--bottom {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  background: #1a1a2e;\n  color: white;\n  padding: 12px 16px;\n  padding-bottom: max(12px, env(safe-area-inset-bottom, 0));\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">When to Use<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content-heavy pages<\/strong> (articles, blog posts) where a top banner would disrupt reading.<\/li>\n<li><strong>Media apps<\/strong> where the content is the primary experience.<\/li>\n<li><strong>Pages with existing top navigation<\/strong> that should not be pushed further down.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Considerations<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Bottom navigation overlap:<\/strong> Many mobile sites have bottom navigation bars. If the banner covers the navigation, users cannot access menu items:<\/p>\n\n\n\n<pre><code class=\"language-css\">\/* Account for bottom nav *\/\n.smart-banner--bottom {\n  bottom: 56px; \/* Height of bottom nav *\/\n}\n\n\/* Or, if there&#39;s no bottom nav, use safe area insets *\/\n.smart-banner--bottom {\n  bottom: env(safe-area-inset-bottom, 0);\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Mobile keyboard:<\/strong> When a text input is focused, the mobile keyboard pushes the viewport up. The bottom banner may jump or overlap with the keyboard. Hide the banner when a keyboard is active:<\/p>\n\n\n\n<pre><code class=\"language-javascript\">const inputs = document.querySelectorAll(&#39;input, textarea, select&#39;);\ninputs.forEach(input =&gt; {\n  input.addEventListener(&#39;focus&#39;, () =&gt; banner.style.display = &#39;none&#39;);\n  input.addEventListener(&#39;blur&#39;, () =&gt; banner.style.display = &#39;flex&#39;);\n});\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Cookie consent overlap:<\/strong> Many sites show cookie consent banners at the bottom. Do not show both simultaneously. Check for a cookie banner before showing your app banner:<\/p>\n\n\n\n<pre><code class=\"language-javascript\">function shouldShowBanner() {\n  const cookieBanner = document.querySelector(&#39;.cookie-consent&#39;);\n  if (cookieBanner &amp;&amp; cookieBanner.offsetParent !== null) {\n    return false; \/\/ Cookie banner is visible; wait\n  }\n  return true;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Floating Position<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">How It Works<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">A floating banner is positioned away from the edges, often as a card or pill shape:<\/p>\n\n\n\n<pre><code class=\"language-css\">.smart-banner--floating {\n  position: fixed;\n  bottom: 24px;\n  left: 16px;\n  right: 16px;\n  z-index: 1000;\n  background: #1a1a2e;\n  color: white;\n  padding: 16px;\n  border-radius: 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">When to Use<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>High-value conversion moments<\/strong> where you want the banner to stand out from the page.<\/li>\n<li><strong>Short-duration campaigns<\/strong> (flash sales, limited-time offers) where urgency justifies the visual prominence.<\/li>\n<li><strong>Pages with minimal content<\/strong> where a floating banner does not overlap with anything important.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Considerations<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Content obstruction:<\/strong> Floating banners overlay page content. This is more disruptive than edge-anchored banners because the user cannot predict where the banner ends and the content begins.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Thumb reachability:<\/strong> On large phones, a floating banner near the bottom is in the natural thumb zone (easy to tap). A floating banner near the top requires stretching.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dismissal UX:<\/strong> Floating banners need a prominent close button. The rounded shape can make the close button harder to notice:<\/p>\n\n\n\n<pre><code class=\"language-css\">.smart-banner--floating .smart-banner__close {\n  position: absolute;\n  top: -8px;\n  right: -8px;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  background: #fff;\n  color: #333;\n  border: 1px solid #ddd;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  cursor: pointer;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Positioning<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Desktop vs. Mobile<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">On desktop, a top banner works well because there is more viewport space. On mobile, a bottom banner is often better because it does not push content below the fold.<\/p>\n\n\n\n<pre><code class=\"language-css\">\/* Desktop: top banner *\/\n@media (min-width: 768px) {\n  .smart-banner {\n    position: relative;\n    top: 0;\n  }\n}\n\n\/* Mobile: bottom sticky banner *\/\n@media (max-width: 767px) {\n  .smart-banner {\n    position: fixed;\n    bottom: 0;\n    top: auto;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Landscape Mode<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">On phones in landscape orientation, a full-width banner takes up a significant portion of the limited vertical space. Consider hiding the banner in landscape or using a smaller version:<\/p>\n\n\n\n<pre><code class=\"language-css\">@media (orientation: landscape) and (max-height: 500px) {\n  .smart-banner {\n    display: none; \/* Too little vertical space *\/\n  }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">A\/B Testing Position<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Test different positions to find what works for your specific audience. The key metrics:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CTR (click-through rate):<\/strong> Which position gets more clicks?<\/li>\n<li><strong>Dismiss rate:<\/strong> Which position gets dismissed most often?<\/li>\n<li><strong>Bounce rate impact:<\/strong> Does the banner increase page bounce rate?<\/li>\n<li><strong>Scroll depth impact:<\/strong> Does the banner affect how far users scroll?<\/li>\n<\/ul>\n\n\n\n<pre><code class=\"language-javascript\">function initBannerWithPosition() {\n  const variant = Math.random() &lt; 0.5 ? &#39;top&#39; : &#39;bottom&#39;;\n  const banner = createBanner({ position: variant });\n  document.body.appendChild(banner);\n\n  analytics.track(&#39;banner_impression&#39;, { position: variant });\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Tolinku Banner Positioning<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/tolinku.com\/features\/smart-banners\">Tolinku&#39;s smart banners<\/a> support configurable positioning (top, bottom, floating) through the dashboard. The SDK handles safe area insets, cookie banner detection, and responsive behavior automatically.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For animation when the banner appears, see <a href=\"https:\/\/tolinku.com\/blog\/animated-smart-banners\/\">animated smart banners<\/a>. For dismiss behavior, see <a href=\"https:\/\/tolinku.com\/blog\/banner-dismiss-behavior\/\">banner dismiss behavior<\/a>. For the complete setup, see the <a href=\"https:\/\/tolinku.com\/blog\/smart-app-banners-complete-guide\/\">smart banners guide<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Choose the best position for your smart banner. Compare top, bottom, and floating placements for user experience, conversion rates, and technical implementation.<\/p>\n","protected":false},"author":2,"featured_media":1355,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Smart Banner Position: Top, Bottom, or Floating?","rank_math_description":"Choose the best position for your smart banner. Compare top, bottom, and floating placements for user experience and conversion rates.","rank_math_focus_keyword":"smart banner position","rank_math_canonical_url":"","rank_math_facebook_title":"","rank_math_facebook_description":"","rank_math_facebook_image":"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/og-banner-position-and-ux.png","rank_math_facebook_image_id":"","rank_math_twitter_title":"","rank_math_twitter_description":"","rank_math_twitter_image":"https:\/\/tolinku.com\/blog\/wp-content\/uploads\/2026\/03\/og-banner-position-and-ux.png","footnotes":""},"categories":[16],"tags":[39,336,110,69,40,33,155,41],"class_list":["post-1356","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","tag-conversion","tag-css","tag-marketing","tag-mobile-development","tag-smart-banners","tag-user-experience","tag-ux-design","tag-web-to-app"],"_links":{"self":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/comments?post=1356"}],"version-history":[{"count":3,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1356\/revisions"}],"predecessor-version":[{"id":2288,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/posts\/1356\/revisions\/2288"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/media\/1355"}],"wp:attachment":[{"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/media?parent=1356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/categories?post=1356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tolinku.com\/blog\/wp-json\/wp\/v2\/tags?post=1356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}