Search code examples
htmlcssnavbarbootstrap-5mobile-browser

How do you make the website title fit on a mobile browser?

Issue

I am trying to build a portfolio website using bootstrap 5, and have been having trouble with the navbar displaying the Title so that it overlaps the hamburger menu and goes off the side of the screen. This issue is only happening on firefox & safari on my iPhone 11. I have tested my site on a Samsung Note, and an iPad pro, and both are working perfectly. It also works properly in the fiddle I linked below. I can't figure out why only the browsers on my iPhone are not rendering this correctly.

The navbar used to appear correctly, but I noticed that my website's font looked way too small on mobile and searched for a solution. I found this question on stack overflow which recommended adding the below meta tag to the head section:

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

This fixed my issue with font size on mobile, but the navbar started behaving incorrectly specifically on firefox & safari on my iPhone 11. The body of the website looks fine, but the navbar looks like this:

Mobile Browser (iPhone 11 - firefox/safari)

firefox-mobile screenshot

For comparison, here is the same code being displayed on a desktop browser at the smallest browser size. This is how it is supposed to look:

Desktop Browser

firefox-desktop screenshot

So I am trying to figure out why the iPhone 11 is rendering it wrong while other devices and browsers are rendering it correctly.

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="navbarSupportedContent">
      <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;
}

Attempted Solutions

I have searched for a solution and found this question on stack overflow but the solution didn't work for me.

I also searched through the bootstrap 5 documentation about navbars and tried using different navbar classes. I searched for a way to make the font size for the website title smaller on browsers, or dynamically resize to fit. None of the questions or examples I tried resolved the issue for me.

Ideal solution

I would like my navbar to have the same layout and look as my screenshot of the navbar on a desktop browser. The font size looks the same in the screenshots, but the positioning is wrong. If there is a solution to make them behave the same way on both, this would be ideal.

Solution

  • I only saw your issue when I actually went to the link on my phone instead of the dev tools on my chrome browser. However, what I would do in this instance is use media queries in your navbar elements. Your media queries should look something like this for a standard mobile browser.

    @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;
  }
}

    Obviously, feel free to change this as needed, as I can't see how the direct front end looks in either a fiddle or on my phone, but this will get you on the right track.