# Menu hamburger do lado esquerdo no celular

**URL:** https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513
**Category:** Theme component
**Tags:** mobile
**Created:** [Setembro 18, 2020, 10:56pm UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513 "2020-09-18T22:56:47Z")
**Posts on this page:** 12
**Page:** 3

<div class="post-metadata">

### Author: ![nathank](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nathank/32/290039_2.png) [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [Abril 9, 2026, 7:21pm UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/46 "2026-04-09T19:21:14Z")

</div>

Por favor, compartilhe seu CSS! Isso facilitaria uma correção no TC.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [Abril 10, 2026, 2:17pm UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/47 "2026-04-10T14:17:03Z")

</div>

Aqui está uma maneira meio gambiarra de fazer isso (em `common/css`, NÃO em `/mobile/css`)

```scss
@use "lib/viewport";

@include viewport.until(md) {
  .d-header:not(:has(.extra-info-wrapper.topic-info-visible)):not(:has(.extra-info-wrapper .topic-link)):not(.header-topic-info-visible) .title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
  }
}

```

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [Abril 10, 2026, 9:00pm UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/48 "2026-04-10T21:00:26Z")

</div>

Desculpe, ainda não consegui manter este componente exatamente atualizado, mas, sim, a mudança em relação às visualizações para dispositivos móveis e desktop definitivamente quebrou algumas das suposições que o componente do tema original fazia.

@Lilly, obrigado pelo empurrão nessa direção. A posição absoluta resolveria o problema por enquanto… a reordenação dos itens neste componente está apenas aplicando uma solução simples com CSS Grid.

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [Abril 15, 2026, 9:15pm UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/49 "2026-04-15T21:15:05Z")

</div>

Olá a todos, apenas dando um retorno: Lilly realizou um grande trabalho na limpeza e atualização disso — acabei de mesclar as alterações dela, então agora tudo deve estar pronto para uso.

> <https://github.com/featheredtoast/discourse-left-menu-theme-component/pull/7>
>
> This PR:
> 
> \* Refactors for mobile viewport changes (https://meta.discourse.org/…t/improving-automatic-switching-of-mobile-desktop-modes/384280)
> 
> \* Fixes the logo centre formatting option

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [Julho 24, 2026, 3:10pm UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/50 "2026-07-24T15:10:20Z")

</div>

Ei `@featheredtoast`, tenho um PR aqui para corrigir o problema do cabeçalho com o tema Horizon em tamanhos de viewport para telefones dobráveis e alguns tablets.

> [@Cabeçalho desconfigura em visualizações de tamanho médio no tema Horizon](https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/10?u=lilly):
>
> Nossa, foi surpreendentemente fácil encontrar o problema. Este componente do tema não é compatível com o Horizon: E eu adoro esse TC!! Não suporto quando o menu pula para a direita no celular. São as pequenas coisas que nos enlouquecem (bem, alguns de nós), né? Talvez eu goste assim porque sou canhoto.

Deixarei que você dê uma olhada e faça o merge:

> <https://github.com/featheredtoast/discourse-left-menu-theme-component/pull/9>
>
> Added a fix for folding phone and some tablet sizes using Horizon theme.  
> 
> se…e info here: https://meta.discourse.org/t/header-messes-up-on-mid-size-viewports-on-the-horizon-theme/403484/10

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [Julho 24, 2026, 3:19pm UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/51 "2026-07-24T15:19:01Z")

</div>

parece bom — vamos testar, obrigado @Lilly !

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [Julho 26, 2026, 11:27pm UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/52 "2026-07-26T23:27:53Z")

</div>

Quando rolo para cima dentro de um tópico, de modo que o cabeçalho mude (para mostrar o nome do tópico e as categorias), esse novo cabeçalho não tem o ícone de hambúrguer. Com o ícone de hambúrguer à esquerda quando presente, isso significa que o ícone do fórum muda de posição. Pergunto-me se seria possível ter uma opção para colocar o ícone de hambúrguer à direita do ícone do fórum. Isso significaria que o ícone do fórum permaneceria no mesmo lugar para ambos os tipos de cabeçalho. Obrigado.

P.S. Acabei de notar que, na versão desktop, sem o componente de tema, o ícone de hambúrguer fica lá o tempo todo. Talvez isso pudesse ser uma opção para dispositivos móveis também.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [Julho 27, 2026, 12:04am UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/53 "2026-07-27T00:04:10Z")

</div>

pessoalmente, não sou a favor dessa mudança (talvez `@featheredtoast` pense de forma diferente), mas se você precisar disso, basta adicionar esse CSS em outro componente de tema no seu fórum para sobrescrever a ordem dos itens.

```css
   .d-header {
    display: grid;
    grid-template-areas: 'logo left-menu custom-header-icon-link-1 custom-header-icon-link-2 custom-header-icon-link-3 custom-header-icon-link-4 custom-header-icon-link-5 extra-info chat header-buttons search right-menu'!important;
 }

```

resultado:

 ![IMG_5618](https://global.discourse-cdn.com/meta/original/4X/a/6/6/a668bbd65545d73b9e1741f24efad03988110d30.jpeg)

> [@Jonathan5](#):
>
> P.S. Acabei de perceber que na versão desktop, sem o componente de tema, o ícone hambúrguer fica visível o tempo todo. Talvez isso possa ser uma opção para mobile também.

o ícone hambúrguer não deve aparecer no cabeçalho rolagem no mobile, a fim de maximizar o espaço do cabeçalho para títulos de tópicos mais longos

---

<div class="post-metadata">

### Author: ![featheredtoast](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/featheredtoast/32/116994_2.png) [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [Julho 27, 2026, 12:26am UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/54 "2026-07-27T00:26:17Z")

</div>

Compartilho a mesma opinião da `@Lilly` aqui, o objetivo era fazer o hambúrguer à esquerda parecer com o de outros aplicativos… O salto não é algo que eu otimizei, já que a experiência padrão já fazia isso.

Quando está em grade, como ela demonstrou, é fácil atualizar as posições de todos os elementos com mínima intervenção no componente base do tema aqui.

Estou aberto a PRs se houver demanda suficiente, mas esta é a primeira vez que ouço um pedido assim atualmente.

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [Julho 27, 2026, 9:12am UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/55 "2026-07-27T09:12:39Z")

</div>

> [@featheredtoast](#):
>
> O salto não é algo que eu otimizei, já que a experiência padrão já fazia isso.

Será?

No desktop, não há “salto”, pois (se bem me lembro) o menu hambúrguer permanece sempre à esquerda do ícone do fórum.

No mobile também não há salto, já que tudo, exceto o ícone do fórum, é substituído.

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [Julho 29, 2026, 4:15pm UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/56 "2026-07-29T16:15:58Z")

</div>

> [@featheredtoast](#):
>
> Estou aberto a PRs se houver demanda suficiente, mas esta é a primeira vez que ouço um pedido assim.

Comecei a usar seu componente de tema (obrigado por compartilhá-lo!) e simplesmente desativei o ícone principal no mobile para tornar isso compatível com nossa filosofia de UI/UX de manter tudo o mais limpo possível.

---

<div class="post-metadata">

### Author: ![kddkd](https://avatars.discourse-cdn.com/v4/letter/k/df705f/32.png) [@kddkd](https://meta.discourse.org/u/kddkd)
#### Post date: [Agosto 31, 2026, 12:51pm UTC](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513/57 "2026-08-31T12:51:33Z")

</div>

Olá, encontrei um problema.

Na página 404, o logo centralizado muda da centralização no cabeçalho superior para a centralização em toda a página.

Por exemplo, o Discourse é exibido em um novo local:

 ![IMG_6037](https://global.discourse-cdn.com/meta/original/4X/d/7/a/d7a3615c9986b4deffa4620c7c0f55502ca5eaad.jpeg)

[Página anterior](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513.md?page=2)
