0

I am trying to center the brand in the navigation bar below. I tried changing the style so that the text is centered but nothing I tried worked. I attached a picture of what it looks like now. I just need the text to be centered instead of being formatted to the left.

enter image description here

<nav class="navbar fixed-top flex-md-nowrap navbar-expand-sm navbar-dark shadow" style="padding-top: 0; padding-bottom: 0; background-color:var(--theme-gray)">
      <a class="navbar-brand" href="#" style="padding: 0;">
        <img src="img/Cama-i Ellam Yui Logo - Header, Large.jpg"  alt="logo" style="height:65px;">
      </a>
        <div class="container-fluid">
    <div class="navbar-header">
      <span class="navbar-brand">Qaneryararvik: The Yup'ik Word Place</span>
    </div>
    </div>
<!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Words</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Acknowledgements</a>
    </li>
  </ul>
</nav>
Brandon Bachman
  • 33
  • 9

3 Answers3

1

Apply this CSS:

.navbar-header{
    width: 100%;
    text-align: center;
}

Or

You can use w-100 & text-center classes of Bootstrap.

<div class="navbar-header w-100 text-center">
    <span class="navbar-brand">Qaneryararvik: The Yup'ik Word Place</span>
</div>
vishulg
  • 149
  • 1
  • 6
0

You can use Media query 

@media (min-width: 768px) {
.navbar-brand
    {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}
suvojit_007
  • 1,690
  • 2
  • 17
  • 23
0

use mx-auto in navbar-header class to to center align.

<div class="navbar-header mx-auto">
    <span class="navbar-brand">Qaneryararvik: The Yup'ik Word Place</span>
</div>
Shiv Kumar Baghel
  • 2,464
  • 6
  • 18
  • 34