Concern

I have been encountering difficulties while constructing a portfolio website using bootstrap 5. The issue arises with the navbar, causing the Title to overlap the hamburger menu and extend beyond the edge of the screen. Strangely enough, this problem is only present on Firefox and Safari browsers on my iPhone 11. Upon testing the website on a Samsung Note and iPad pro, both displayed correctly. Additionally, the fiddle I linked below displays the navbar properly as well. It's perplexing why only the browsers on my iPhone are failing to render it correctly.

Initially, the navbar appeared correctly until I noticed that the font size was too small on mobile devices. In search of a solution, I came across this thread on stack overflow, which suggested adding a meta tag in the head section:

<meta name="viewport" content="width=device-width, initial-scale=1">

While this fixed the font size issue on mobile, it led to misbehavior of the navbar on Firefox and Safari on my iPhone 11. The webpage body appears fine, but the navbar is distorted as depicted below:

Mobile Browser (iPhone 11 - firefox/safari)

https://i.sstatic.net/WT2wK.png

For comparison purposes, here is how the same code renders on a desktop browser at the lowest window size, showing the intended layout:

Desktop Browser

https://i.sstatic.net/C27ac.png

Hence, I am striving to uncover why the iPhone 11 exhibits incorrect rendering behavior compared to other devices and browsers.

Code

Fiddle

https://jsfiddle.net/GeorgeCiesinski/6c579nt4/8/

HTML

<nav class="py-3 navbar navbar-custom navbar-expand-lg autohide navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="./assets/logo.svg" class="logo" alt="logo"/>
      George Ciesinski
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="SupportedContent">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="#hero">Software Development</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#projects">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
          href="https://georgeciesinski.github.io/blog/">Blog</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Resume
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="assets/PDF/GeorgeCiesinskiResume.pdf" target="_self">PDF</a></li>
            <li><a class="dropdown-item" href="https://georgeciesinski.github.io/resume/">Website</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS

@media only screen and (max-width: 850px) {
  .container > .navbar-brand .logo {
    font-size: 1rem;
    display: inline-block;
  }

  .navbar-toggler {
    position: absolute;
    top: 0px;
    right: 0px;
    border-color: none;
  }
  .navbar-brand > img {
    margin-right: 0rem;
  }
}

nav {
  background-color: var(--navbar_color);
}

.navbar-brand img {
  max-height: 50px;
}

.navbar-brand {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 900;
}

/* Navbar Site Title */

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: var(--navbar_logo_text);
}

.navbar-custom .navbar-brand:hover {
  color: var(--navbar_logo_text_highlight);
}

/* Navbar Links */

.navbar-dark .navbar-toggler-icon {
  color: var(--navbar_logo_text);
}

.navbar-nav .nav-item .nav-link {
  color: var(--navbar_text);
}

.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
  color: var(--navbar_text_highlight);
}

/* Navbar Dropdown Menu */

.navbar-nav > li > .dropdown-menu {
  background-color: var(--navbar_dropdown);
}

.navbar-nav > li > .dropdown-menu a{
  color: var(--navbar_dropdown_text);
  margin: auto 0px !important;
}

.navbar-nav > li > .dropdown-menu a:hover {
  background-color: var(--navbar_dropdown_hover);
  margin: auto 0px !important;
}

nav ul li a {
  color: #a9a9a9;
  font-size: 22px;
  margin: auto 10px;
}

Suggested Resolutions

In an attempt to address the issue, I explored suggestions found in this thread on stack overflow, yet unfortunately, none of the proposed solutions proved effective for me.

Furthermore, I delved into the documentation provided by Bootstrap 5 regarding navbars and experimented with various navbar classes. My quest involved finding a method to reduce the font size of the website title on certain browsers or dynamically adjust its size for compatibility. Regrettably, none of the methods attempted managed to resolve the discrepancy.

Desired Outcome

My goal is to attain uniformity between the layout and appearance of the navbar from my desktop browsing experience and the screenshot representing the same on a desktop browser. While the font size seems consistent between the two scenarios, achieving alignment in their behavior across different platforms would be ideal.