Bonjour,
Je suis frustré car je n'arrive pas a savoir si mincss permet nativement de placer un bouton en haut a droite dans la barre de nav.
le petit bouton en vert , je souhaite le placer a la place de result.
Mon exemple
merci pour vos lumieres
alors essaye ça je t'es fait media querie mais à toi de jouer avec apres et cibler les largeur que tu veux et les comportement donc dans mon exemple le bouton restera a droite et le menu burger passera lui à gauche et le titre min disparaitre
.smooth{
position:absolute;
right:0;
top:0;
margin-top:6px;
margin-right:10px;
}
@media (max-width:500px){
.container{
float:left;
}
.pagename{
visibility:hidden;
}
}
Il me semble qu'avec un navbar-right ça devrait marcher. Mais fait voir ton code stp ;)
Parce que bootstrap gère ça donc tu ne devrais pas avoir de problème
en fait le code il est la http://jsfiddle.net/a4o9r4ge/
et ce n'est pas bootstrap mais un truc tout simple mais suffisant pour commencer a developper.
Il me semble bien que c'est du bootstrap
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename current" href="#">Min</a>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a class="btn btn-b btn-sm smooth" style="position: absolute; right: 0; ">btn-sm</a>
</div>
salut
alors pour ton probleme btn doit etre dans la navbar et pas en dehors tu va devoir creer un css perso pour faire un court circuiter le css de bootstrap en donant un float right à la class btn et un float left au container du menu tout cela dans ton css perso que tu n'oublira pas de declarer dans ton html
voila ta solution
<nav class="nav" tabindex="-1" onclick="this.focus()">
<div class="container">
<a class="pagename current" href="#">Min</a>
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>
</nav>
<a class="btn btn-b btn-sm smooth">btn-sm</a>
css perso pour court circuiter bootstrap
.smooth{
right: 0;
position: absolute;
top: 0;
}
ca n'a pas marché mais bon, j'ai essayé ceci
<div style="float: right;padding:12px 30px 14px"><a class="btn btn-b btn-sm smooth">+ Ajouter Lead</a></div>
ca m'a décalé trop a droite
Alors que je voyais plutot a droite mais dans la grille
j'ai divisé la premiere row en 4 columns, et je voulais que le bouton se place dans la colonne 4
Tu n'as pas du mettre ton boutton à la suite des autres liens déjà....
Après tu peux mettre ta nav en container. Mais fais voir tout ton code, du moins la partie traitée
oups, si ca a marché , ce n'est pas bien centré
est ce une question de padding ?
le plus propre serait de centrer et de mettre un padding a droite. je vais tester. mais je vois paa comment centré
je crains que le vertical-align:middle ne marche pas le ligne height donnera une auteur au bouton lui meme et no pas une hauteur par rapport à la nav ce que tu peut essayer c'est de connaitre le height de ta nav et donner un margin top au bouton voila essayer de melanger ce quon t'as donner avec olmek pour arriver a ton but
tiens voila pour que tu ne cherche pas trop alors on place le bouton au milieu de la nav avec un margin-top que j'ai calculer et on le decale avec un margin-right pour qu'il ne reste pas coller
.smooth{
right: 0;
top: 0;
position: absolute;
margin-right: 10px;
margin-top: 6px;
}
Merci, pour moi ca fonctionne a peu pres .
cependant un petit bug apparait quand on visionne sur le mobile
on ne vois plus le bouton d'option de menu ci join.
Est ce qu'il est possible de le deplacer ce bouton d'option a gauche ? a la pla ce du texte "Min".
Le code en entier est sur la page jfiddle ici
De plus je vois qu'il prend tout la largeur cette barre, j'aurais bien aimé qu'elle soit boxed
enfin moi je n'arrive pas a voir un rendu comme l'image que tu as envoyé c'est a dire je ne vois pas le bouton ajouter lead sur la gauche je ne vois que le bouton btn-sm sur la gauche
ok a peut pret je vois ce que tu veux alors est ce que le bouton en version mobile tu veux qu'il reste a sa place ou none parceque le menu burger et en faite en dessous du bouton vert en version mobile
ok alors le bouton tu veux qu'il passe à gauche à la place min en version mobile alors cela implique l'utilisation des media queries mais enfin je vais voir ce que je peut faire pour t'aider des que j'ai le temps cette aprem
Personellement j'aurais fais comme ceci, après pour le mettre à gauche sur petite résolution il faut utiliser les medias queries.
http://jsfiddle.net/a4o9r4ge/11/
Bonjour Spiker,
Je voudrais savoir pourquoi tu proposes cette solution ? ca me semble plus logique, mais le bouton de Call to action n'est pas bien visible. Il faut deux clics pour faire la meme chose.
salut sylvain est ce que tu veux quil passe à gauche et qu'il reste dans la navbar ou qu'il sois dehors