Barre de navigation Bulma à deux rangées

Question

Quelle est la meilleure approche pour recréer cela dans bulma.io ? Incluant la responsivité, hamburger etc.

                Basculer la navigation

                Logo

            Titre d'application vraiment long

            Utilisateur Connecté

                    Élément 1
                    Élément 2
                    Élément 2
                    Élément 2
                    Élément 3

--- tl;dr ---

Récemment, je suis passé à Vue.js en frontend, ce qui a entraîné d'importants changements dans mon flux de travail. J'ai également envisagé de passer de Bootstrap3 à quelque chose de plus propre et j'ai essayé Bulma. Ce fut une expérience très agréable jusqu'à ce que je veuille faire quelque chose un peu hors du commun. Dans mon cas, il s'agissait d'une navbar à deux lignes. Après une heure d'essais, je suis rapidement retourné à Bs3.

Le principal avantage d'utiliser bootstrap est que des milliers de personnes qui voulaient réaliser toutes sortes de choses folles ont déjà posé des dizaines de questions idiotes. La plupart ont été répondues par la communauté patiente et sont maintenant disponibles au public. Malheureusement, Bulma n'a pas encore vraiment cela.

Je pense qu'au moins 70 % du métier de programmeur de nos jours signifie rechercher des solutions sur stackoverflow de toute façon. La capacité à faire des recherches rapidement sur le sujet est essentielle. Je n'ai pas le temps d'explorer tout par moi-même, j'ai une famille à nourrir et mes clients se moquent de quel framework j'utilise. Mais au moins j'ai décidé de demander. Peut-être que quelqu'un rencontrera un défi similaire à l'avenir. Santé.

Answer 1

Il existe probablement de nombreuses façons de faire cela. Voici une approche :

Créez votre menu comme décrit dans la documentation Ensuite...

HTML

1. Ajoutez le 'Titre de l'application' en premier enfant de navbar-brand.
2. Ajoutez le modificateur is-hidden-touch à l'élément navbar-item contenant le logo. Cela le cachera sur les appareils mobiles et tablettes.
3. Le contenu de 'l'utilisateur connecté' peut être ajouté à navbar-end.

CSS

1. Nous devons faire en sorte que navbar-brand occupe sa propre 'ligne'. Pour cela, mettez à jour sa largeur à 100%.
2. Ensuite, ajoutez la propriété justify-content à navbar-brand pour espacer ses contenus de manière uniforme.
3. Pour faire en sorte que navbar-menu passe sur une nouvelle 'ligne', vous devez ajouter la propriété flex-wrap à navbar.

fiddle

.navbar-brand {
  width: 100%;
}

.navbar {
  flex-wrap: wrap;
}

.navbar-brand {
  justify-content: space-between;
}

    Titre vraiment long de l'application

      Elément 1
      Elément 2
      Elément 3
      Elément 4
      Elément 5

      Connecté