Icônes sociales d'une ligne dans le menu réduit

Question

J'ai un problème et je n'ai pas pu le résoudre. Comment afficher les icônes sociales une ligne dans le menu réduit? J'ai ajouté le code ci-dessous à mon fichier css et rien n'a changé? Une idée? Merci d'avance

.navbar-right li {
    display: inline-block;
}

Voici mon code navbar:

    <head runat="server">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.js" type="text/javascript"></script>
        </head>
     <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light style="background-color: #ffffff;">
        <div class="d-flex flex-grow-1">
            <span class="w-100 d-lg-none d-block"></span>
            <a class="navbar-brand d-none d-lg-inline-block" href="https://testsite.com">
                <img src="images/logo.png" height="150" dir="ltr" alt="logo">
            
            </a>
            <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="https://testsite.com">
                <img src="images/logo.png" height="100" alt="logo">
            </a>
            <div class="w-100 text-right">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </div>
        <div class="collapse navbar-collapse flex-grow-1 text-center" id="myNavbar">
            <ul class="navbar-nav ml-auto flex-nowrap">
                <li class="nav-item">
                    <a href="https://testsite.com" class="nav-link m-2 menu-item">Home</a>
                </li>
                <li class="nav-item">
                    <a href="https://testsite.com/about" class="nav-link m-2 menu-item">About</a>
                </li>
            </ul>
             <ul class="nav navbar-nav navbar-right">
             <li><a href="https://www.facebook.com/" target="_blank" class="nav-link"><i class="fa fa-facebook fa-lg"></i></a></li>
             <li><a href="https://www.instagram.com/" target="_blank" class="nav-link"><i class="fa fa-instagram fa-lg"></i></a></li>
             <li><a href="https://twitter.com/" target="_blank" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a></li></ul>
            </div>
        </div>
    </nav>

html css bootstrap-4 navbar

0

echelon 3 nov. 2019 à 21:37

Answer 1

Je vais le faire dans votre classe CSS

.navbar-right li {
    display: flex;
    flex-direction: row;
}

0

VitDev 3 nov. 2019 à 19:15

Answer 2

vous pouvez simplement ajouter des noms de classe de bootstrap d-inline-flex flex-row à votre balise ul avec la classe navbar-nav navbar-right avec vos icônes sociales, ce sera comme:

<ul class="nav navbar-nav navbar-right d-inline-flex flex-row">
    <li><a href="https://www.facebook.com/" target="_blank" class="nav-link"><i class="fa fa-facebook fa-lg"></i></a></li>
    <li><a href="https://www.instagram.com/" target="_blank" class="nav-link"><i class="fa fa-instagram fa-lg"></i></a></li>
    <li><a href="https://twitter.com/" target="_blank" class="nav-link"><i class="fa fa-twitter fa-lg"></i></a></li></ul>

si vous en avez besoin, vous pouvez même le limiter en largeur comme: d-sm-inline-flex et d-lg-flex par exemple

ou Vous pouvez donner un affichage CSS: display: inline-flex; et flex-direction: row; à votre ul

 .navbar-right {
   display: inline-flex;
   flex-direction : row;
 }

0

Shayan Moghadam 3 nov. 2019 à 19:11

Icônes sociales d'une ligne dans le menu réduit

2 réponses

De nouvelles questions

Tags associés