How to keep the social links on the navigation bar when the page shrinks, and also how to place social icons on same line when hamburger menu is open

Question

I am trying to create a responsive web page navigation bar. I want the logo on the left, the navigation links center, and social media links on the right. When the page width gets too small, it is supposed to hide the navigation links and social media links. This is effectively working correctly however the social media links are jumping below the navigation bar when the page is too narrow but before it reaches full "mobile" width. Also, I am having trouble placing the social links in one line when the hamburger menu is open. I am not a web developer, just a tutorial watcher and any help would be greatly appreciated.

I have tried changing the class type for the .social class but this seems to only make matters worse. EDIT: I solved the overflow problem by adding "overflow: hidden;" under ".navbar ul{"

const navbarToggler = document.querySelector(".navbar-toggler");
const navbarMenu = document.querySelector(".navbar ul");
const navbarLinks = document.querySelectorAll(".navbar a");

navbarToggler.addEventListener("click", navbarTogglerClick);

function navbarTogglerClick() {
  navbarToggler.classList.toggle("open-navbar-toggler");
  navbarMenu.classList.toggle("open");
}

navbarLinks.forEach(elem => elem.addEventListener("click", navbarLinkClick));

function navbarLinkClick() {
  if(navbarMenu.classList.contains("open")) {
    navbarToggler.click();
  }
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body {
    font-family: 'Righteous', cursive;
    background-color: #fff;
    color: #333;
  }
  .navbar {
    background-color: #000;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    width: 100%;
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    padding: 0 30px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .navbar a {
    text-decoration: none;
    color: #fff;
  }
  .navbar a.navbar-brand {
    float: left;
    height: inherit;
    line-height: inherit;
    padding: 0 30px;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
  }
  .navbar a.navbar-brand span {
    font-size: 28px;
    font-weight: 700;
  }
  .navbar ul {
    float: center;
    list-style: none;
    height: inherit;
    line-height: inherit;
    padding: 0 50px;
    overflow: hidden;
  }
  /*Social Stuff*/
  .social{
    float: right;
    background-color: coral;
    font-size: 35px;
    display: inline-block;
  }

  /*Social Stuff*/
  .navbar ul li {
    display: inline-block;
  }
  .navbar ul li a {
    display: block;
    text-align: center;
    min-width: 120px;
    padding: 0 30px;
  }
  .navbar ul li a:hover {
    background-color: transparent;
    color:#00e713;
    transition:0.2s all;
    transform:scale(1.2) rotate(10deg);
  }
  .navbar .navbar-toggler {
    display: none;
  }
  .intro {
    width: 100%;
    height: 100vh;
    background: url("https://source.unsplash.com/GYQBryEWh0Y/") no-repeat center center;
    background-size: cover;
    background-color: #000;
  }
  .container {
    position: relative;
    height: 100vh;
    color: #fff;
  }
  .container h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20vh;
  }
  #html { background-color: #e34f26; }
  #css { background-color: #002561; }
  #javascript { background-color: #333; }
  
  @media (max-width: 991px) {
    .navbar ul {
      padding: 0 10px;
    }
    .navbar ul li a {
      min-width: 100px;
      padding: 0 20px;
    }
  @media (max-width: 767px) {
    .navbar a.navbar-brand {
      transform: translateX(-50%);
      left: 50%;
      position: absolute;
    }
    .navbar {
      padding: 0;
    }
    .navbar ul {
      width: 100%;
      padding: 0;
      background-color: rgba(0,0,0,0.9);
      /*height: auto; */
      height: 100vh;
      max-height: 0;
      overflow: hidden;
      transition: all ease-in-out 0.3s;
    }
    .navbar ul.open {
      max-height: 100vh;
      /*this next line prevents the navbar overlap on mobile */
      padding-block-start: 9vh;
    }
    /*Social Stuff*/
    .social{
      width: 100%;
      float: left;
      text-align: center;
    }
    .social ul li{
      display: inline;
      float: left;
    }
    /*Social Stuff*/
    .navbar ul li {
      width: 100%;
      /*border-bottom: 1px solid rgba(255,255,255,0.3); */
    }
    .navbar ul li a {
      padding: 0px;
    }
    .navbar .navbar-toggler {
      display: block;
      position: absolute;
      height: 40px;
      top: 20px;
      left: 20px;
      background-color: transparent;
      color: #fff;
      /* border: 3px solid #fff;*/
      border: none; 
      /* border-radius: 4px; */
      outline: none;
      padding: 0 5px;
      cursor: pointer;
    }
    .navbar .navbar-toggler span,
    .navbar .navbar-toggler span::before,
    .navbar .navbar-toggler span::after {
      display: block;
      content: '';
      background-color: #fff;
      height: 3px;
      width: 28px;
      border-radius: 4px;
      transition: all ease-in-out 0.3s;
    }
    .navbar .navbar-toggler span::before {
      transform: translateY(-8px);
    }
    .navbar .navbar-toggler span::after {
      transform: translateY(5px);
    }
    .navbar .navbar-toggler.open-navbar-toggler span {
      /* transform: rotate(90deg); */
      background-color: transparent;
      /* transform: scale(0.85) rotate(270deg); */
    }
    .navbar .navbar-toggler.open-navbar-toggler span::before {
      transform: translateY(0px) rotate(45deg);
      /* transform: translateY(0px) scale(0.75) rotate(45deg); */
    }
    .navbar .navbar-toggler.open-navbar-toggler span::after {
      transform: translateY(-3px) rotate(-45deg);
      /* transform: translateY(-3px) scale(0.75) rotate(-45deg); */
    }
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Responsive Navbar</title>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Knewave&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar">
            <button class="navbar-toggler">
                <span></span>
            </button>
          <a href="#" class="navbar-brand">
            <span>T</span>e<span>m</span>P</a>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Python</a></li>
       
        <div class="social">
            
                <li><a href="#"><i class ="fa fa-twitch"></i></a></li>
                <li><a href="#"><i class ="fa fa-reddit"></i></a></li>
                <li><a href="#"><i class ="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class ="fa fa-youtube"></i></a></li>
            
        </div>
        </ul>
    </nav>
    <script src="assets/js/script.js"></script>  
</body>
<p>
</p>
</html>

You need to align social icon in one line, like on the desktop am i right? — Awais, Nov 12 '19 at 07:50
Yes, and also the issue with the social icons overflowing when the page gets narrow. — xxwrongxx, Nov 12 '19 at 08:16

score 0 · Answer 1 · answered Nov 12 '19 at 12:08

First, you should decide your layout at what breakpoint you want to change the layout of navigation based on that we can write your styles within those media queries. Those things which you don't need on the mobile layout such as social links you can simply make display: none; to the social section but only in the mobile media query.

score 0 · Answer 2 · answered Nov 12 '19 at 13:20

0

Actually your HTML structure is messy but anyhow, update this style in media query @media (max-width: 767px)

.social li {
    width: auto;
    margin-right: -18px;
    float: none
}

answered Nov 12 '19 at 13:20

Awais

4,752
4
17
40

Dang, it did not work. What specifically makes the html structure messy? Thank you for the help btw! – xxwrongxx Nov 12 '19 at 20:08
Dear only child of `ul` is `li` no `div` is allowed to be a child of `ul` only inside of `li` you can use what ever you want. here is the answer https://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul – Awais Nov 13 '19 at 05:28

How to keep the social links on the navigation bar when the page shrinks, and also how to place social icons on same line when hamburger menu is open

2 Answers2