heading font size (sticky navigation) is small in mobile devices (with or without viewport)

Issue

Related topic: beautiful Highlight selected button in Navigation bar

Result:

Header display good when use Chrome in Laptop

But in Mobile Device, header is too small although i added code

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

Link: https://jsfiddle.net/bvotcode/1rkjwh27/6/

CSS

    body {
      background: none #000;
      margin: 0;
    }
    
    .logo {
      text-transform: uppercase;
      color: burlywood;
      text-align: center;
      font-size: 3vw;
      font-family: cursive;
      height: 90vh;
    }
    
    .sticky .logo {
      height: 0;
    }
    
    ul.menu {
      text-align: center;
      list-style-type: none;
      margin: 0;
      padding: 2vh 0;
    }
    
    .sticky ul.menu {
      padding: 1vh 0;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      background: none #000;
    }
    
    ul.menu li {
      display: inline-block;
      vertical-align: middle;
      list-style-type: none;
      margin: 0 1vw;
    }
    
    ul.menu li.last {
      margin: 0;
    }
    
    ul.menu li a {
      text-decoration: none;
      text-transform: uppercase;
      font-size: 1.5vw;
      font-family: cursive;
      opacity: 1;
      padding: 0 1vw;
    }
    
    ul.menu li a:hover {
      opacity: 0.6;
    }
    
    ul.menu li.news a {
      color: #36d341;
    }
    
    ul.menu li.tour a {
      color: #ff25e8;
    }
    
    ul.menu li.video a {
      color: #7353ff;
    }
    
    ul.menu li.music a {
      color: #3dc6ff;
    }
    
    ul.menu li.photo a {
      color: #ecee24;
    }
    
    ul.menu li.album a {
      color: #fa6d27;
    }
    
    ul.menu li a.active {
      background: red;
      color: #fff;
    }
    
    #content>div {
      padding: 45vh 0;
      text-align: center;
      text-transform: uppercase;
      font-size: 2vw;
      font-family: monospace;
    }
    
    #content #news {
      background: -moz-linear-gradient(-34deg, #3434f7 0%, #34c8ff 50%, #27ef77 100%);
      background: -webkit-linear-gradient(-34deg, #3434f7 0%, #34c8ff 50%, #27ef77 100%);
      background: -o-linear-gradient(-34deg, #3434f7 0%, #34c8ff 50%, #27ef77 100%);
      background: -ms-linear-gradient(-34deg, #3434f7 0%, #34c8ff 50%, #27ef77 100%);
      background: linear-gradient(124deg, #3434f7 0%, #34c8ff 50%, #27ef77 100%);
    }
    
    #content #tour {
      background: -moz-linear-gradient(-34deg, #ecee24 0%, #EC4e24 50%, #fa6d27 100%);
      background: -webkit-linear-gradient(-34deg, #ecee24 0%, #EC4e24 50%, #fa6d27 100%);
      background: -o-linear-gradient(-34deg, #ecee24 0%, #EC4e24 50%, #fa6d27 100%);
      background: -ms-linear-gradient(-34deg, #ecee24 0%, #EC4e24 50%, #fa6d27 100%);
      background: linear-gradient(124deg, #ecee24 0%, #EC4e24 50%, #fa6d27 100%);
    }
    
    #content #video {
      background: -moz-linear-gradient(-34deg, #f21c36 0%, #ff26cf 50%, #a626ff 100%);
      background: -webkit-linear-gradient(-34deg, #f21c36 0%, #ff26cf 50%, #a626ff 100%);
      background: -o-linear-gradient(-34deg, #f21c36 0%, #ff26cf 50%, #a626ff 100%);
      background: -ms-linear-gradient(-34deg, #f21c36 0%, #ff26cf 50%, #a626ff 100%);
      background: linear-gradient(124deg, #f21c36 0%, #ff26cf 50%, #a626ff 100%);
    }
    
    #content #music {
      background: -moz-linear-gradient(-34deg, #36D341 0%, #4AC326 50%, #3DC6FF 100%);
      background: -webkit-linear-gradient(-34deg, #36D341 0%, #4AC326 50%, #3DC6FF 100%);
      background: -o-linear-gradient(-34deg, #36D341 0%, #4AC326 50%, #3DC6FF 100%);
      background: -ms-linear-gradient(-34deg, #36D341 0%, #4AC326 50%, #3DC6FF 100%);
      background: linear-gradient(124deg, #36D341 0%, #4AC326 50%, #3DC6FF 100%);
    }
    
    #content #photo {
      background: -moz-linear-gradient(-34deg, #f42df6 0%, #be34ff 50%, #4827ef 100%);
      background: -webkit-linear-gradient(-34deg, #f42df6 0%, #be34ff 50%, #4827ef 100%);
      background: -o-linear-gradient(-34deg, #f42df6 0%, #be34ff 50%, #4827ef 100%);
      background: -ms-linear-gradient(-34deg, #f42df6 0%, #be34ff 50%, #4827ef 100%);
      background: linear-gradient(124deg, #f42df6 0%, #be34ff 50%, #4827ef 100%);
    }
    
    #content #album {
      background: -moz-linear-gradient(-34deg, #F21D36 0%, #AAEEDD 50%, #FE1245 100%);
      background: -webkit-linear-gradient(-34deg, #F21D36 0%, #AAEEDD 50%, #FE1245 100%);
      background: -o-linear-gradient(-34deg, #F21D36 0%, #AAEEDD 50%, #FE1245 100%);
      background: -ms-linear-gradient(-34deg, #F21D36 0%, #AAEEDD 50%, #FE1245 100%);
      background: linear-gradient(124deg, #F21D36 0%, #AAEEDD 50%, #FE1245 100%);
    }
    
    #footer {
      padding: 2vw 0;
      text-align: center;
    }

Javascript

    jQuery(window).bind('scroll', function() {
  var navHeight = jQuery('ul.menu').height();
  if (jQuery(window).scrollTop() > navHeight) {
    jQuery('body').addClass('sticky');
  } else {
    jQuery('body').removeClass('sticky');
  }
});


// Scroll watcher

function getViewportHeight() {
  return window.innerHeight || document.documentElement.clientHeight;
}

function scrollWatch() {
  let elements = document.querySelectorAll(".scroll-watcher-item");
  if (!elements) {
    return;
  }
  [].forEach.call(elements, function(element) {
    scrollWatchElement(element);
  });
  scrollWatch__UpdateActiveMenuItem();
}

function scrollWatch__UpdateActiveMenuItem() {
  let menu_items = document.querySelectorAll("#navigation a");
  if (!menu_items) {
    return;
  }
  [].forEach.call(menu_items, function(item) {
    item.classList.remove("active");
  });
  let elements = document.querySelectorAll(".scroll-watcher-item");
  if (!elements) {
    return;
  }
  let active_expectant = null;
  let active_expectant_percent = 0;
  [].forEach.call(elements, function(element) {
    let percent = parseFloat(element.getAttribute("data-watcher-percent"));
    if (percent > active_expectant_percent) {
      active_expectant = element;
      active_expectant_percent = percent;
    }
  });
  if (!active_expectant) {
    return;
  }
  let active_menu_item_id = active_expectant.getAttribute("id");
  let active_menu_item = document.querySelector('#navigation a[href="#' + active_menu_item_id + '"]');
  if (!active_menu_item) {
    return;
  }
  active_menu_item.classList.add("active");
}

function scrollWatchElement(element) {
  let viewportHeight = getViewportHeight();
  if (!element) {
    return;
  }
  let rect = element.getBoundingClientRect();
  let top = rect.top;
  if (top < 0) top = 0;
  if (top > viewportHeight) top = viewportHeight;
  let bottom = rect.bottom;
  if (bottom < 0) bottom = 0;
  if (bottom > viewportHeight) bottom = viewportHeight;
  let percent = Math.round((100 * (bottom - top)) / viewportHeight, 2);
  element.setAttribute("data-watcher-percent", percent);
}

// https://developer.mozilla.org/ru/docs/Web/API/Document/scroll_event
let ticking = false;
window.addEventListener("scroll", function(e) {
  if (!ticking) {
    window.requestAnimationFrame(function() {
      setTimeout(function() {
        scrollWatch();
        ticking = false;
      }, 250);
    });
    ticking = true;
  }
});

scrollWatch();

HTML

<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div id="navigation">
  <ul class="menu">
    <li class="first leaf news">
      <a href="#news" title="" class="scroll-to-anchor" data-scroll-offset="0">News</a>
    </li>
    <li class="leaf tour">
      <a href="#tour" title="" class="scroll-to-anchor" data-scroll-offset="0">Tour</a>
    </li>
    <li class="leaf video">
      <a href="#video" title="" class="scroll-to-anchor" data-scroll-offset="0">Video</a>
    </li>
    <li class="leaf music">
      <a href="#music" title="" class="scroll-to-anchor" data-scroll-offset="0">Music</a>
    </li>
    <li class="leaf photo">
      <a href="#photo" title="" class="scroll-to-anchor" data-scroll-offset="0">Photo</a>
    </li>
    <li class="leaf album last">
      <a href="#album" title="" class="scroll-to-anchor" data-scroll-offset="0">Album</a>
    </li>
  </ul>
</div>
<div id="content">
  <div id="news" class="scroll-watcher-item">
    News
  </div>
  <div id="tour" class="scroll-watcher-item">
    Tour
  </div>
  <div id="video" class="scroll-watcher-item">
    Video
  </div>
  <div id="music" class="scroll-watcher-item">
    Music
  </div>
  <div id="photo" class="scroll-watcher-item">
    Photo
  </div>
  <div id="album" class="scroll-watcher-item">
    Album
  </div>
</div>

<div id="footer">
  <div class="footer-tos">
    <a href="" target="_blank">Privacy Policy</a> | <a href="" target="_blank">Terms of Service</a>
  </div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</html>

Please see attached image

Solution

This is working well because you've set the font sizes based on view port (size of screen). font-size: 1.5vw; means 1.5% of view width, which can be too small.

For a better font-size for mobile screen, you can use 'px' and media queries.

Answered By - Mina Soleimanzadeh