Materialize css comment centrer le menu

Geek Boy (GeekBoy)
Les bases HTML/CSS

Bonjour,

Je débute dans le html et le css donc j'utilise MaterialiseCss pour allez plus vite dans le css et d'avoir un résultat plus intérésent et pour me permetre en même temps d'apprendre

Ce que je fais

voici le code de mon menu:

<nav>
<div class="nav-wrapper">
  <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
  <ul class="right hide-on-med-and-down">
    <li><a href="accueil.html">Accueil</a></li>
    <li><a href="team.html">Notre équipe</a></li>
    <li><a href="pronos.html">Pronostics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <ul class="side-nav" id="mobile-demo">
    <li><a href="accueil.html">Accueil</a></li>
    <li><a href="team.html">Notre équipe</a></li>
    <li><a href="pronos.html">Pronostics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

</nav>

et voici mon custom css

nav {
color: #fff;
background-color: #ee6e73;
width: 100%;
height: 44px;
line-height: 45px;

}

nav ul a {
transition: background-color .3s;
font-size: 1.2rem;
color: #fff;
display: block;
padding: 0 15px;
cursor: pointer;
left: 60%;
}

Ce que je veux

Ce que je veux c'est que mon menu soit centrer au millieu et non a droite

Merci d'avance de m'aider.

12 réponses

Lartak
Réponse acceptée

Bonjour.

il faut metre ceci $(".button-collapse").sideNav(); dans le fichier materialize.js ?

Non, soit dans un fichier javascript que tu auras créé pour ton application ou bien entre des balises script dans une portion html qui sera affiché sur chacune des pages de ton site dans laquelle ta sidebar sera affichée.
Dans les deux cas, il faudra que le code soit appelé après le javascript de Materialize.

Lartak

Bonjour.
C'est lequel des deux ul que tu veux centrer ?
Car le premier à la classe right, ce qui doit vouloir dire que ça l'aligne sur la droite.

Muxabble

tu met tes deux ul dans une div container

Geek Boy (GeekBoy)
Auteur

je veux centrer le premier menu ,car l'autre pas besoin de le centrer vue que c'est pour mobile est qu'il me convient ,DubleYu comment je doit mis prendre ?

Geek Boy (GeekBoy)
Auteur

j'ai réussi en fesant ceci

ul.right {

position: absolute;
right: 40%;

}

Muxabble

@Geek Boy, ça ne fonctionneras pas sur les mobiles:

Tu veux centrer par rapport au milieu de la page ou au conteneur de ta page ?

<nav>
<div class="container">
<div class="nav-wrapper">
  <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
  <ul class="right hide-on-med-and-down">
    <li><a href="accueil.html">Accueil</a></li>
    <li><a href="team.html">Notre équipe</a></li>
    <li><a href="pronos.html">Pronostics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  <ul class="side-nav" id="mobile-demo">
    <li><a href="accueil.html">Accueil</a></li>
    <li><a href="team.html">Notre équipe</a></li>
    <li><a href="pronos.html">Pronostics</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>
</div>
</nav>
Robin

Utilise les flexbox

Geek Boy (GeekBoy)
Auteur

oui exact ça ne fonctionne plus le menu mobile , @DubleYu, je veux qui soit positioner à 18% de la gauche

Muxabble

Ah oui sur materialdesign CSS le menu mobile est separe du coup ferme la div container avant le ul side-mobile

Geek Boy (GeekBoy)
Auteur

Donc si je comprend bien je dois faire comme ceci?

http://pastebin.com/fdZjY7iP

enfaite le menu mobile ne fonctioner pas avant ,comment l'intégrer corectement pour qu'il fonctionne?
il faut metre ceci $(".button-collapse").sideNav(); dans le fichier materialize.js ?

et niveau css je déclare comment dans mon custom css?

désoler si je suis nul ,je débute ,j'ai télécharger la formation complete de Elephorm pour bien apprendre toutes les bases
car les bouquins c'est pas mon truc

Muxabble

Voilà un codepen
Il faut juste lire la documentation ^^

Geek Boy (GeekBoy)
Auteur

j'ai regarder une vidéo sur YouTube et c'est bon ,le menu est centrer et le menu mobile fonctionne ,merci à vous c'était bien ce que vous m'avez conseillé