Issues with centered logo on smaller devices

Question

I am having an issue with my centered logo on bootstrap navbar menu; I put the logo in the center of the navbar; it is working fine on desktop but when I resize the page to a smaller device, the logo, because of the presence of the Hamburger menu button on the right and its relatively pixels used, becomes out of center towards to the left.

How can I make sure that on devices with smaller screens the logo remains centered?

<nav class="navbar navbar-expand-xl navbar-toggleable-md navbar-light bg-white" id="nav1">
    <div class="navbar-collapse collapse w-100 order-1 dual-collapse2">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item home">
                <a class="nav-link" href="#"><a href="https://www.weddinginsicily.co.uk/">HOME <span class="sr-only">(current)</span></a> </li>
    <li class="nav-item"> <a class="nav-link" href="#"><a href="https://www.weddinginsicily.co.uk/wedding_sicily_our_weddings.html">OUR WEDDINGS</a> </li>
        </ul>
    </div>
    <div class="mx-auto order-0 order-xl-2">
     <a class="navbar-brand mx-auto" href="/"><img src="Imagine/00 Top Logo 2021.png" alt="Logo 2021" width="275" height="127"></a></div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item">
    <li class="nav-item"> <a class="nav-link" href="#"><a href="https://www.weddinginsicily.co.uk/wedding_sicily_legalities.html">LEGALITIES</a> </li>
        </ul>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

CodeG · Answer 1 · 2020-06-04T01:46:47.703

0

Add position: absolute in .navbar-toggler. See if it helps you:

https://jsfiddle.net/omk9pg58/

edited Jun 04 '20 at 01:46

answered Jun 04 '20 at 01:20

CodeG

155
9

I used your tip and actually the logo on smaller devices is excatly centered but with two issues: – Tony Winwar Jun 05 '20 at 11:41
On ipad when i click on the toggler, the toggler follows the menu and positions itself in the center of the menu instead of stayin with the logo – Tony Winwar Jun 05 '20 at 11:43
On mobile the toggler and the logo overlap – Tony Winwar Jun 05 '20 at 11:43
Regarding the overlap on mobile, I sorted it out making the logo smaller :) – Tony Winwar Jun 07 '20 at 11:47
I also sorted it out regarding the Ipad issue :) – Tony Winwar Jun 07 '20 at 12:08

sbolel · Answer 2 · 2020-06-04T01:45:48.457

Foreword

Before we go into the solution, one thing to note is that if this solution is implemented and the window is not wide enough to fit both the logo and the toggler without overlapping, they will do just that -- overlap.

Solution

1. Styles

You can do that using transform and position: absolute:

.navbar-brand {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

/* to place the toggler above the logo, in case they overlap */
.navbar-toggler: {
  z-index: 10;
}

2. HTML

There are also some issues in the HTML. The big one is missing closing tags for <a class="nav-link">. See this jsfiddle version and check the HTML textarea for where the linter highlights issues. Also, the sr-only class is for screen readers so you want to include it for each link and make sure the text content matches the link itself -- see this answer for a great explanation of that.

Here's a refactored version of the HTML:

<nav class="navbar navbar-expand-xl navbar-toggleable-md navbar-light bg-white" id="nav1">
  <div class="navbar-collapse collapse w-100 order-1 dual-collapse2">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item home">
        <a class="nav-link" href="https://www.weddinginsicily.co.uk/">
          HOME
          <span class="sr-only">Home</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://www.weddinginsicily.co.uk/wedding_sicily_our_weddings.html">
          OUR WEDDINGS
          <span class="sr-only">Our Weddings</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="mx-auto order-0 order-xl-2 navbar-brand-container">
    <a class="navbar-brand mx-auto" href="/">
      <img src="Imagine/00 Top Logo 2021.png" alt="Logo 2021" width="275" height="127">
    </a>
  </div>
  <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
    <ul class="navbar-nav mx-auto">
      <li class="nav-item">
        <a class="nav-link" href="https://www.weddinginsicily.co.uk/wedding_sicily_legalities.html">
          LEGALITIES
          <span class="sr-only">Legalities</span>
        </a>
      </li>
    </ul>
  </div>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>

3. Demo

See this jsfiddle demo for the complete working solution.

Hope that helps!