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

31 réponses


droid13
Réponse acceptée

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

sylvain
Auteur

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

sylvain
Auteur

si je savais comment faire. est ce qu'il y a un tuto sur css sur GA ?

Essai le code que je t'ai passé dans jsFiddle

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;

}
sylvain
Auteur

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

sylvain
Auteur

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

sylvain
Auteur

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é

Oui tu peux jouer avec le padding ;) rien de bien méchant

sylvain
Auteur

comment faire pour qu'il se centre automatiquement dans la barre de nav ?

vertical-align: middle. Et si ça ne marche pas il faut essayer de jouer avec les line-heigth

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;

}
sylvain
Auteur

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".

alors tu peut me donner le code en entier css et html

sylvain
Auteur

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

sylvain
Auteur

oui c'est simplement un champs text, le voila corrigé ici

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

sylvain
Auteur

L'ideal serait d'avoir a gauche, quitte a supprimer le nom "Min"

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/

sylvain
Auteur

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

sylvain
Auteur

qu'il passe a gauche et qu'il supprime carrement le titre

dans tes media queries, en format portable, tu mettre un display: none sur ton titre.

sylvain
Auteur

merci beaucoup. J'avais une autre question.