Impossible de centrer les éléments de la barre de navigation et la balise flottante

Question

Je n'arrive pas à centrer les éléments dans ma barre de navigation bootstrap. J'utilise actuellement bootstrap 3. J'ai lu beaucoup de messages et essayé tout ce que je pouvais penser, mais rien ne fonctionne. J'essaie également de faire apparaître une ligne bleue sur le dessus des éléments en utilisant 'hover', mais je ne peux pas le faire plus petit. Voici mon code.

.navbar 
 
{ 
 
    background-color: transparent; \t 
 
    padding-top: 30px; 
 
    /* border: 0; */ 
 
} 
 

 

 
.navbar a 
 
{ 
 
    font-size: 15px; 
 
    color: black; 
 
    text-transform: uppercase; 
 
    font-family: Ruda, sans-serif; 
 
} 
 

 
.navbar-brand 
 
{ 
 
    max-height: 40px; 
 
} 
 

 
.navbar-nav > li { 
 
    display: inline-block; 
 
    float:none; 
 
    padding-right:80px; 
 
} 
 

 
.navbar-nav > li:hover 
 
{ 
 
    border-top: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header" > 
 
    <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Page 1</a></li> 
 
    <li><a href="#">Page 2</a></li> 
 
    <li><a href="#">Page 3</a></li> 
 
    <li><a href="#">Page 4</a></li> 
 
    <li><a href="#">Page 5</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 1

Pour remplacer certaines classes dans bootstrap u doivent utiliser la règle @media. J'ai également changé de comportement en survolant pour changer simplement la couleur et pas toutes les bordures. Cela évitera le scintillement.

@media (min-width: 768px){ 
 
    ul.navbar-nav{ 
 
     table-layout: fixed; 
 
     display: table; 
 
     margin: 0 auto; 
 
     float: none; 
 
    } 
 
} 
 

 
.navbar 
 
{ 
 
    background-color: transparent; \t 
 
    padding-top: 30px; 
 
} 
 

 

 
.navbar a 
 
{ 
 
    font-size: 15px; 
 
    color: black; 
 
    text-transform: uppercase; 
 
    font-family: Ruda, sans-serif; 
 
} 
 

 
.navbar-brand 
 
{ 
 
    max-height: 40px; 
 
} 
 

 
.navbar-nav > li { 
 
    display: inline-block; 
 
    float:none; 
 
    padding-right:80px; 
 
    border-top: 1px solid transparent 
 
} 
 

 
.navbar-nav > li:hover 
 
{ 
 
    border-top-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header" > 
 
    <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Page 1</a></li> 
 
    <li><a href="#">Page 2</a></li> 
 
    <li><a href="#">Page 3</a></li> 
 
    <li><a href="#">Page 4</a></li> 
 
    <li><a href="#">Page 5</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>

Answer 2

Je ne sais pas j'ai bien compris votre problème, mais u juste enlevé le rembourrage sur la « li .navbar-nav » et la ligne bleue est smalle et le texte est centré

.navbar 
 
{ 
 
    background-color: transparent; \t 
 
    padding-top: 30px; 
 
    /* border: 0; */ 
 
} 
 

 

 
.navbar a 
 
{ 
 
    font-size: 15px; 
 
    color: black; 
 
    text-align:center !important; 
 
    text-transform: uppercase; 
 
    font-family: Ruda, sans-serif; 
 
} 
 

 
.navbar-brand 
 
{ 
 
    max-height: 40px; 
 
} 
 

 
.navbar-nav > li { 
 
    display: inline-block; 
 
    float:none; 
 
} 
 

 
.navbar-nav > li:hover 
 
{ 
 
    border-top: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header" > 
 
    <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Page 1</a></li> 
 
    <li><a href="#">Page 2</a></li> 
 
    <li><a href="#">Page 3</a></li> 
 
    <li><a href="#">Page 4</a></li> 
 
    <li><a href="#">Page 5</a></li> 
 
    </ul> 
 
    </div> 
 
</nav>