bonjour à tous!
comme le titre super évocateur l'indique, j'ai un problème de barre de nav qui "dépasse" ^^
pour être plus précise: ma nav est en position:fixed, ce qui a eu pour effet de réduire sa width à la width totale des éléments qu'elle contient... bon. pour y remédier, j'impose à la nav une width à 100%, et là, plouf! la fin du dernier lien de ma barre de nav passe en dehors de l'écran...
à l'inspection d'élément, la width de ma nav est clairement plus large que mon écran, comme si je lui avait imposée une width à 120%... je pourrais tricher sur les pourcentages pour que ça colle visuellement, mais malgré ça le bug continue à se voir si je modifie la taille de ma fenêtre de navigateur (des fois ça sort, des fois ça sort pas...).
bug d'autant plus surprenant que je suis en train de refaire un doc que j'ai perdu suite à une panne informatique, et que la première fois je n'ai eu aucun problème de ce genre o_O
bref, tourne et retourne, je ne trouve pas la solution... et ça me rends ouf!
voilà l'objet du litige, côté html:
côté css:
si ça se trouve, je suis juste très fatiguée, et j'ai loupé une erreur évidente?
bref, j’espère que vous pourrez m'aider, et merci d'avance pour vos réponses.
comme le titre super évocateur l'indique, j'ai un problème de barre de nav qui "dépasse" ^^
pour être plus précise: ma nav est en position:fixed, ce qui a eu pour effet de réduire sa width à la width totale des éléments qu'elle contient... bon. pour y remédier, j'impose à la nav une width à 100%, et là, plouf! la fin du dernier lien de ma barre de nav passe en dehors de l'écran...
à l'inspection d'élément, la width de ma nav est clairement plus large que mon écran, comme si je lui avait imposée une width à 120%... je pourrais tricher sur les pourcentages pour que ça colle visuellement, mais malgré ça le bug continue à se voir si je modifie la taille de ma fenêtre de navigateur (des fois ça sort, des fois ça sort pas...).
bug d'autant plus surprenant que je suis en train de refaire un doc que j'ai perdu suite à une panne informatique, et que la première fois je n'ai eu aucun problème de ce genre o_O
bref, tourne et retourne, je ne trouve pas la solution... et ça me rends ouf!
voilà l'objet du litige, côté html:
<nav>
<a href="#home"><img src="img/logo.png" alt="Alexia LONCA"></a>
<ul>
<li><a href="#portfolio">What<span class="i">I</span>do</a></li>
<li><a href="#about">Who<span class="i">I</span>am</a></li>
<li><a href="#contact">Keep<span class="i">I</span>nTouch</a></li>
</ul>
</nav>
côté css:
nav{
background-color: rgba(0,0,0,0.7);
padding-left: 20px;
padding-right: 20px;
min-height: 170px;
max-height: 300px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
position: fixed;
width: 100%;
z-index: 4;
}
nav ul{
display: flex;
flex-wrap: wrap;
}
nav ul li{
margin-bottom: 25px;
margin-left: 25px;
}
nav ul li a{
text-decoration: none;
font-family: 'Raleway', sans-serif;
font-size: 20px;
font-weight: 200;
color: white;
transition: all 0.5s ease-out;
}
si ça se trouve, je suis juste très fatiguée, et j'ai loupé une erreur évidente?
bref, j’espère que vous pourrez m'aider, et merci d'avance pour vos réponses.