-1

I use navbar bootstrap3. As you can see the probleme is : enter image description here

how can I get "Recherche" on the same line without reducing font-size

Here is my code :

    <nav class="navbar navbar-default navbar-static-top navbar-custom">
     <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">...</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>

        <?php $idCategorie=$this->idCategorie;?>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li <?php if($idCategorie == '5') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/5">Terminal de paiement <span class="sr-only">(current)</span></a></li>
            <li <?php if($idCategorie == '6') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/6">Application de caisse</a></li>
            <li <?php if($idCategorie == '7') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/7">Logiciel de gestion</a></li>
            <li <?php if($idCategorie == '8') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/8">Opérations bancaires</a></li>
            <li <?php if($idCategorie == '9') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/index/page/id/9">Equipements</a></li>
            <?php if($acces){?>
                <li <?php if($idCategorie == '11') echo 'class="active"'; ?> ><a href="<?php echo $this->baseUrl() ?>/client/index">Informations clients</a></li>
            <?php }?>
            <li class="<?php if($idCategorie == '10') echo 'active'; ?> coloCell1" ><a href="<?php echo $this->baseUrl() ?>/index/page/id/10">Difficultés pour un encaissement CB</a></li>
            <!--  <li class="<?php //if($idCategorie == '11') echo 'active'; ?> coloCell4" ><a href="<?php //echo $this->baseUrl() ?>/index/page/id/11">Informations client </a></li>-->
            <li class="<?php if($idCategorie == 'iframe') echo 'active'; ?> coloCell2" ><a href="<?php echo $this->baseUrl() ?>/index/page/id/iframe">Recherche</a></li>
          </ul>

        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>
developer
  • 521
  • 1
  • 5
  • 21
Ahmed Ziani
  • 1,206
  • 3
  • 14
  • 26

1 Answers1

3

You can choose between these two options:

  1. Make the texts in the menu items shorter.
  2. Make the padding to the left and right of the texts smaller.

But in the end there's only so much that will fit in one menu line.

For option 2 you will have to change the CSS file. Add something like:

.navbar-inverse .navbar-nav > li > a {
  padding: 5px 10px;
}

Or any variation thereof that will work in your environment. Inspect the styles to see what you have to change.

KIKO Software
  • 15,283
  • 3
  • 18
  • 33
  • Thanks for reponse, what's the best whyto make the padding to the left and right of the texts smaller. with class bootstrap, with keeping menu responsive? – Ahmed Ziani Mar 25 '15 at 13:43
  • 1
    It depend on what your CSS looks like. I've given an example in the answer above. – KIKO Software Mar 25 '15 at 14:25
  • that's work with Firefox http://img11.hostingpics.net/pics/667851firefox.png but not with google chrome http://img11.hostingpics.net/pics/837433chrome.png do you have any idea ? – Ahmed Ziani Mar 25 '15 at 15:08
  • Your page is less wide in Chrome, so there's less room for your wide menu. It might just be a slightly different scale, it's hard to tell. Why not try Ahmed Ziani's suggestion? But try to understand what it does. – KIKO Software Mar 25 '15 at 15:37
  • Yes, which means that at a certain point you will have to collapse the menu. – KIKO Software Mar 25 '15 at 16:04
  • so what's the best solution ? – Ahmed Ziani Mar 25 '15 at 16:06
  • You could hide less relevant menu items using media queries (http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries), or you could restructure the menu so it will become less wide. – KIKO Software Mar 25 '15 at 16:18