How to position text on left side of nav bar without effecting buttons on right?-CodePudding

I am working on a mobile web application with a screen size of 360 X 640. I want to display text /heading inside the navbar on the left side but I am not able to do it as the buttons on the nav bar have been right aligned by the justify-position end .I tried using float :left also but it does not work.

Please help . My frontend

I want to acchieve this(below image) I want to move "Talk to Astrologer text in nav bar on the left without affecting position of other buttons. "

//HTML CODE
<div class ="search-bar sticky-top " >

<ul class="navbar navbar-light bg-light   justify-content-end">

    <a class="navbar-brand" href="#">
      <img src="../assets/search.png" width="30" height="30" alt="">
    </a>
    <a class="navbar-brand" href="#">
        <img src="../assets/filter.png" width="30" height="30" alt="">
      </a>
      <a class="navbar-brand" href="#">
        <img src="../assets/sort.png" width="30" height="30" alt="">
      </a>
</ul>

</div>

<h1 ><b>Talk to an Astrologer</b></h1> //move this inside nav bar on the left

CodePudding user response：

You can use below code to achieve expected results.

.wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

<div class="wrapper">
<h1 ><b>Talk to an Astrologer</b></h1>
<div class ="search-bar sticky-top " >

<ul class="navbar navbar-light bg-light   justify-content-end">

    <a class="navbar-brand" href="#">
      <img src="../assets/search.png" width="30" height="30" alt="">
    </a>
    <a class="navbar-brand" href="#">
        <img src="../assets/filter.png" width="30" height="30" alt="">
      </a>
      <a class="navbar-brand" href="#">
        <img src="../assets/sort.png" width="30" height="30" alt="">
      </a>
</ul>

</div>
</div>

I have made some change's in your code,

I moved your h1 tag to top of all your elements.
I have wrapped everything in wrapper div.
I apllied display flex property to the wrapper div.

CodePudding user response：

      <div class="search-bar sticky-top ">
        <ul class="navbar navbar-light bg-light   justify-content-between">
          <h1>
            <b>Talk to an Astrologer</b>
          </h1>
          <div>
            <a class="navbar-brand" href="#">
              <img src="../assets/search.png" width="30" height="30" alt="" />
            </a>
            <a class="navbar-brand" href="#">
              <img src="../assets/filter.png" width="30" height="30" alt="" />
            </a>
            <a class="navbar-brand" href="#">
              <img src="../assets/sort.png" width="30" height="30" alt="" />
            </a>
          </div>
        </ul>
      </div>

this is how you do it. Wrap all the anchor tags in one div. put the h1 tag on the same level as it. Then on their parent, call for justify-content:"space-between" which in bootstrap is justify-content-btween.