Suggestion: Mobile navigation in header, few changes

October 23, 2025Oct 23

Quick story. Mobile navigation in the footer is great....however since the iOS 26 update, it doesn't stay stuck to the bottom, it goes up and down the page all over the place. Not great.

Now, my temporary solution is to put mobile navigation to the header.

Problem with that is, there is no obvious Sign Up link whilst on mobile, it's tucked away in the sign in button.

Also the notification bell is hidden in the profile pic, then notifications so 2 taps. First world problems I know, however it would be nice to see the notification bell to be brought out into the header, maybe moving search below the header if space is an issue.

October 23, 2025Oct 23

I believe the navigation one is a known OS issue, but Ive tagged in ehren, who will be able to confirm

October 23, 2025Oct 23

Author

Just now, Marc said:
I believe the navigation one is a known OS issue, but Ive tagged in ehren, who will be able to confirm

The navigation issue which sees the menu bounce around is widespread, seen many complaints on this.

The suggestions are little tweaks to the navigation whilst set to the header.

Ibai
1

October 23, 2025Oct 23

32 minutes ago, Day. said:
The navigation issue which sees the menu bounce around is widespread, seen many complaints on this.

Given there will be a widespread number of people using iOS26 I would be more surprised if you didnt

As mentioned above, Ehren should be able to confirm this. We certainly welcome the feedback and suggestions as always

October 24, 2025Oct 24

Add it to your custom CSS:

@media screen and (max-width: 979px) {
  html, body {
    height: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: none;
  }

  .ipsApp, .ipsLayout_container {
    transform: none !important;
    perspective: none !important;
  }

  .ipsMobileFooter {
    position: fixed !important;
    z-index: 9999;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: transform 0.3s ease;
  }

  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }

  @supports (-webkit-touch-callout: none) {
    .ios-scroll-fix .ipsMobileFooter {
      position: sticky !important;
      bottom: 0 !important;
      transform: translateY(0);
    }
  }
}

October 24, 2025Oct 24

5 minutes ago, Cedric V said:

Add it to your custom CSS:

@media screen and (max-width: 979px) {
  html, body {
    height: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: none;
  }

  .ipsApp, .ipsLayout_container {
    transform: none !important;
    perspective: none !important;
  }

  .ipsMobileFooter {
    position: fixed !important;
    z-index: 9999;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: transform 0.3s ease;
  }

  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }

  @supports (-webkit-touch-callout: none) {
    .ios-scroll-fix .ipsMobileFooter {
      position: sticky !important;
      bottom: 0 !important;
      transform: translateY(0);
    }
  }
}

Actually no, that breaks the refresh. I’ll try again.

October 24, 2025Oct 24

Okay, this should now fully work as far as I have tested it.

@media screen and (max-width: 979px) {
  html, body {
    height: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ipsApp, .ipsLayout_container {
    transform: none !important;
    perspective: none !important;
  }

  .ipsMobileFooter {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: transform 0.3s ease;
    -webkit-transform: translateZ(0);
    will-change: transform;
  }

  body.atTop .ipsMobileFooter {
    position: static !important;
  }

  body:not(.atTop) .ipsMobileFooter {
    position: fixed !important;
  }

  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }

  @supports (-webkit-touch-callout: none) {
    .ios-scroll-fix .ipsMobileFooter {
      position: sticky !important;
      bottom: 0 !important;
      transform: translateY(0);
    }
  }
}

body.atTop .ipsMobileFooter {
  position: static !important;
  display: none !important; 
}

This will keep the mobile sticky again on iOS26 and the refresh functionality working.

Day.
1

October 24, 2025Oct 24

Author

2 hours ago, Cedric V said:

Okay, this should now fully work as far as I have tested it.

@media screen and (max-width: 979px) {
  html, body {
    height: 100%;
    overflow-x: hidden;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ipsApp, .ipsLayout_container {
    transform: none !important;
    perspective: none !important;
  }

  .ipsMobileFooter {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    justify-content: space-around;
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: transform 0.3s ease;
    -webkit-transform: translateZ(0);
    will-change: transform;
  }

  body.atTop .ipsMobileFooter {
    position: static !important;
  }

  body:not(.atTop) .ipsMobileFooter {
    position: fixed !important;
  }

  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }

  @supports (-webkit-touch-callout: none) {
    .ios-scroll-fix .ipsMobileFooter {
      position: sticky !important;
      bottom: 0 !important;
      transform: translateY(0);
    }
  }
}

body.atTop .ipsMobileFooter {
  position: static !important;
  display: none !important; 
}

This will keep the mobile sticky again on iOS26 and the refresh functionality working.

You are an absolute genius!!

October 24, 2025Oct 24

Author

@Cedric V do you have an idea how to add the notification bell into the header when the mobile nav is set to the header?

October 24, 2025Oct 24

25 minutes ago, Day. said:
@Cedric V do you have an idea how to add the notification bell into the header when the mobile nav is set to the header?

I’ll have a look asap, but don’t make any promise.

October 24, 2025Oct 24

55 minutes ago, Day. said:
@Cedric V do you have an idea how to add the notification bell into the header when the mobile nav is set to the header?

Add this to your theme -> Theme Designer Core CSS & JS -> Javascript

document.addEventListener('DOMContentLoaded', function () {
	let attempts = 0;

	function injectBell() {
		attempts++;
		const mobileNav = document.querySelector('.ipsMobileHeader .ipsMobileNavIcons');
		const userIcon = mobileNav?.querySelector('[data-el="user"]');
		const existingBell = mobileNav?.querySelector('[data-el="notifications"]');
		const offCanvas = document.querySelector('[aria-controls="ipsOffCanvas--notifications"]');

		if (!mobileNav || !userIcon || existingBell || !offCanvas) {
			if (attempts < 30) requestAnimationFrame(injectBell);
			return;
		}

		const li = document.createElement('li');
		li.dataset.el = 'notifications';
		li.innerHTML = `
			<button type="button" class="ipsMobileNavIcons__button" aria-controls="ipsOffCanvas--notifications" aria-expanded="false">
				<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
					<path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V208c0-61.9 50.1-112 112-112zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path>
				</svg>
				<span class="ipsNotification" hidden data-notificationtype="notify" data-currentcount="0">0</span>
			</button>
		`;

		const btn = li.querySelector('button');
		btn.addEventListener('click', e => {
			e.preventDefault();
			offCanvas.click();
		});

		mobileNav.insertBefore(li, userIcon);
	}

	requestAnimationFrame(injectBell);
});

Day.
1

October 24, 2025Oct 24

Author

Can't thank you enough. I assume this will display the notification count as well when you get a notification? And will that remove the one from the profile picture?

Edited October 24, 2025Oct 24 by Day.

October 24, 2025Oct 24

3 minutes ago, Day. said:
Can't thank you enough. I assume this will display the notification count as well when you get a notification? And will that remove the one from the profile picture?

Ermm no. It doesn't. I totally forgot about that. 😅

I'll report back.

This will display the notification count on the bell and remove it from the avatar:

document.addEventListener('DOMContentLoaded', function () {
	let attempts = 0;

	function injectBell() {
		attempts++;
		const mobileNav = document.querySelector('.ipsMobileHeader .ipsMobileNavIcons');
		const userIcon = mobileNav?.querySelector('[data-el="user"]');
		const existingBell = mobileNav?.querySelector('[data-el="notifications"]');
		const offCanvas = document.querySelector('[aria-controls="ipsOffCanvas--notifications"]');

		if (!mobileNav || !userIcon || existingBell || !offCanvas) {
			if (attempts < 30) requestAnimationFrame(injectBell);
			return;
		}

		const li = document.createElement('li');
		li.dataset.el = 'notifications';
		li.innerHTML = `
			<button type="button" class="ipsMobileNavIcons__button" aria-controls="ipsOffCanvas--notifications" aria-expanded="false">
				<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">
					<path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V208c0-61.9 50.1-112 112-112zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path>
				</svg>
				<span class="ipsNotification" hidden data-notificationtype="notify" data-currentcount="0">0</span>
			</button>
		`;

		const btn = li.querySelector('button');
		btn.addEventListener('click', e => {
			e.preventDefault();
			offCanvas.click();
		});

		mobileNav.insertBefore(li, userIcon);

		const avatarNotif = userIcon.querySelector('.ipsNotification');
		const bellNotif = li.querySelector('.ipsNotification');

		if (avatarNotif) {
			bellNotif.hidden = false;
			bellNotif.textContent = avatarNotif.textContent;
			avatarNotif.remove();
		}
	}

	requestAnimationFrame(injectBell);
});

Suggestion: Mobile navigation in header, few changes

Featured Replies

Recently Browsing 0

Platform

Solutions

Guides

Help & Resources

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)