CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Patrik Horváth
Patrik Horváth

Reputation: 177

Bootstrap Responsible glitch?

i need help cause i dont know why this happening but span coming true menu, also giving here my code and screens this happening on whole website

menu is : col-md-6 span is : col-md-1 enter image description here enter image description here

<div class="container-fluid">
<header>
    <div class="col-md-1"></div>
    <div class="col-md-2 text-center">
        <a href="../pages/uvod.php" class="hvr-shrink"><img src="../res/logo/StylMejker_logo.png" alt="StylMejker Logo" style="margin: 0 0 25px 0;" ></a>
    </div>
    <div class="col-md-2"></div>
    <div class="col-md-6">
        <nav class="nav row">
            <ul class="nav nav-justified">
                <li class="aktualna"><a href="../pages/uvod.php">Úvod</a></li>
                <li><a href="../pages/o_mne.php" class="hvr-overline-from-center">O mne</a></li>
                <li><a href="../pages/sluzby.php" class="hvr-overline-from-center">Služby</a></li>
                <li><a href="../pages/referencie.php" class="hvr-overline-from-center">Referencie</a></li>
                <li><a href="../pages/styloviny.php" class="hvr-overline-from-center">Štýloviny</a></li>
                <li><a href="../pages/media.php" class="hvr-overline-from-center">Média</a></li>
                <li><a href="../pages/kontakt.php" class="hvr-overline-from-center">Kontakt</a></li>
            </ul>
        </nav>
    </div>
    <div class="col-md-1">
        <span class="fa fa-facebook"></span>
        <span class="fa fa-instagram"></span>
    </div>
</header>
<section class="clearfix"></section>
<main>

    <div class="col-md-12 text-center">
        test
    </div>

</main>

Upvotes: 1

Views: 172

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

How about you put those icons inside the nav container?

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <header>
    <div class="col-md-1"></div>
    <div class="col-md-2 text-center">
      <a href="../pages/uvod.php" class="hvr-shrink"><img src="../res/logo/StylMejker_logo.png" alt="StylMejker Logo" style="margin: 0 0 25px 0;"></a>
    </div>
    <div class="col-md-2"></div>
    <div class="col-md-7">
      <nav class="nav row">
        <ul class="nav nav-justified">
          <li class="aktualna"><a href="../pages/uvod.php">Úvod</a></li>
          <li><a href="../pages/o_mne.php" class="hvr-overline-from-center">O mne</a></li>
          <li><a href="../pages/sluzby.php" class="hvr-overline-from-center">Služby</a></li>
          <li><a href="../pages/referencie.php" class="hvr-overline-from-center">Referencie</a></li>
          <li><a href="../pages/styloviny.php" class="hvr-overline-from-center">Štýloviny</a></li>
          <li><a href="../pages/media.php" class="hvr-overline-from-center">Média</a></li>
          <li><a href="../pages/kontakt.php" class="hvr-overline-from-center">Kontakt</a></li>
          <li class="text-center"><span class="fa fa-facebook"></span>&nbsp;&nbsp;<span class="fa fa-instagram"></span></li>
        </ul>

      </nav>

    </div>
  </header>
  <section class="clearfix"></section>
  <main>

    <div class="col-md-12 text-center">
      test
    </div>
  </main>

Upvotes: 1

Related Questions