# Wrong display on mobile

**URL:** https://meta.discourse.org/t/wrong-display-on-mobile/405086
**Category:** UX
**Tags:** custom-header-links, fixed
**Created:** [June 11, 2026, 4:08pm UTC](https://meta.discourse.org/t/wrong-display-on-mobile/405086 "2026-06-11T16:08:45Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![pHneutre](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phneutre/32/326831_2.png) [@pHneutre](https://meta.discourse.org/u/pHneutre)
#### Post date: [June 11, 2026, 4:08pm UTC](https://meta.discourse.org/t/wrong-display-on-mobile/405086/1 "2026-06-11T16:08:45Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/4X/2/a/4/2a4952d7f9b5dbb9cd176d32dee393a577a0497e.png)  
That Blog link is displayed at the bottom left of its parent element on mobile. I cannot figure out why.

It displays fine on desktop.

Just in case: I’ve got another link which is desktop only (so `display: none` on mobile) with custom CSS to shift it a bit: `margin-left: 100px;`. If I turn the custom CSS off, nothing changes, which is unsurprising.

Custom Header Links HTML:

```html
    <ul class="custom-header-links">
      <li class="headerLink headerLink--vdo 👆adapter-son-yoga.com--custom-header-links headerLink--undefined">
        <a title="Adapter Son Yoga" href="https://adaptersonyoga.com/" target="_blank">
          👆adapter son yoga.com 
        </a>
      </li>
      <li class="headerLink headerLink--vmo blog-custom-header-links headerLink--undefined">
        <a title="blog" href="https://adaptersonyoga.com/" target="_blank">
          Blog
        </a>
      </li>
  </ul>

```

Nothing special for CSS on the second `li` element, and the contained `a` link CSS is as such:

```css
    .custom-header-links .headerLink a {
	padding: .35em .6em;
	color: var(--header_primary);
	font-size: var(--font-up-1);
    }

```

Is it a bug or am I missing something?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 11, 2026, 4:49pm UTC](https://meta.discourse.org/t/wrong-display-on-mobile/405086/2 "2026-06-11T16:49:52Z")

</div>

I think it’s the way the padding on the link wraps, I’ve just merged a change that should avoid this.

> <https://github.com/discourse/discourse-custom-header-links/pull/104>
>
> The display type can cause the padding to wrap, which breaks alignment. Switchin…g to flex prevents this. 
> 
> 
> Before:
> \<img width="700" alt="image" src="https://github.com/user-attachments/assets/e8458524-8754-4f29-acfb-31e356152935" /\>
> 
> 
> After:
> \<img width="700" alt="image" src="https://github.com/user-attachments/assets/f0181a7d-6b35-4fce-86a7-ad7d2d320589" /\>

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [June 11, 2026, 9:46pm UTC](https://meta.discourse.org/t/wrong-display-on-mobile/405086/3 "2026-06-11T21:46:43Z")

</div>