Bootstrap 3 is used. Navigation code:

<div class="container-fluid navbar-fixed-top" id="top-bar"> <div class="container"> <nav class="navbar"> <div class="navbar-header"> <p class="navbar-text visible-xs-inline-block"><a href="#"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/mobile-logo.jpg"></a> <a href="tel:+1111111"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/tel.png"> +1111111</a></p> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="topnav"> <li><a href="<?php echo site_url(); ?>/">главная</a></li> <li><a href="<?php echo site_url(); ?>/about-us/">о нас</a></li> <li><a href="<?php echo site_url(); ?>/projects/">работы</a></li> <li><a href="<?php echo site_url(); ?>/offers/">услуги</a></li> <li><a href="<?php echo site_url(); ?>/price/">цены</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/tel.png"> +1111111</a></li> </ul> </div> </nav> </div> </div>

The point is to put it on a plate in the mobile navigation version:

 <p class="navbar-text visible-xs-inline-block"><a href="#"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/mobile-logo.jpg"></a> <a href="tel:+1111111"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/tel.png"> +1111111</a></p>

It is displayed, but does not go to center the contents of the plate. That is, it looks like this: enter image description here

It is necessary to align the phone in the center. If you make for p width: 100%, the menu-opening button on the right slides down.

    2 answers 2

    Bootstrap has a Grid system . You can use it.

    1. In your screenshot there is an orange square on the left. If it is present in the design, then you can make three columns and text in the column with the phone center in the middle, adding bootstrap classes to draw the grid on mobile devices - .col-xs-

    Since the class visible-xs-inline-block makes an element block-inline and it no longer occupies the entire width of the block, in the styles you need to add width.

    After that, center the internal link, making it a block element and adding text alignment to the center.

     .navbar-text{ width: 100%; } .navbar-text a { display: block; text-align: center; } .navbar-toggle{ box-shadow: 0px 0px 1px 2px #000; } 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid navbar-fixed-top" id="top-bar"> <div class="container"> <nav class="navbar"> <div class="navbar-header"> <div class="col-xs-2"> <p>Я оранжевый квадрат</p> </div> <div class="col-xs-8"> <p class="navbar-text visible-xs-inline-block"><a href="tel:+1111111"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/tel.png"> +1111111</a> </p> </div> <div class="col-xs-2"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="topnav"> <li><a href="<?php echo site_url(); ?>/">главная</a> </li> <li><a href="<?php echo site_url(); ?>/about-us/">о нас</a> </li> <li><a href="<?php echo site_url(); ?>/projects/">работы</a> </li> <li><a href="<?php echo site_url(); ?>/offers/">услуги</a> </li> <li><a href="<?php echo site_url(); ?>/price/">цены</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/tel.png"> +1111111</a> </li> </ul> </div> </nav> </div> </div>

    2. If there is no orange square in the design, then you can make two columns and move the column with the phone to the right using the bootstrap class of col-xs-offset

     .navbar-text { width: 100% } .navbar-text a { text-align: center; display: block; } .navbar-toggle { box-shadow: 0 0 1px 2px #ccc; } 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid navbar-fixed-top" id="top-bar"> <div class="container"> <nav class="navbar"> <div class="navbar-header"> <div class="col-xs-8 col-xs-offset-2"> <p class="navbar-text visible-xs-inline-block"><a href="tel:+1111111"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/tel.png"> +1111111</a> </p> </div> <div class="col-xs-2"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav" id="topnav"> <li><a href="<?php echo site_url(); ?>/">главная</a> </li> <li><a href="<?php echo site_url(); ?>/about-us/">о нас</a> </li> <li><a href="<?php echo site_url(); ?>/projects/">работы</a> </li> <li><a href="<?php echo site_url(); ?>/offers/">услуги</a> </li> <li><a href="<?php echo site_url(); ?>/price/">цены</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/img/tel.png"> +1111111</a> </li> </ul> </div> </nav> </div> </div>

      Try to abandon the bootstrap in your projects until you master at least the basics of css . As soon as you begin to understand a certain minimum in this area, in particular, that your p must therefore stretch to its full legal width, you yourself will understand that it is much easier to do everything yourself. And do not have to resort to the use of tools that were originally invented not for beginners. As a result, you will not ask such non-professional questions, and they will answer you faster and more meaningfully.

      • Do you think bootstrap should be studied in a lab? The answer above is informative and to the point. Your answer is that it is your self-love. - morganchees
      • My answer is informative, but @mJeevas is right. For your question, it is clear that you are still "floating" in the usual layout. You should understand that the layout of the page is a grid that should fit in 100% width. If you understood this, then the sentences "If you make for p width: 100% the menu-opening button on the right slides down." would not be. Naturally, the button will slip, because it does not have enough space ... And to tighten the knowledge about block and inline elements, in particular, why in your case the block element p did not initially occupy 100% of the width. PS And advice: do not be rude in the comments, you will stop giving answers. - Julia Petrishina