Home > database >  How can I make the social links in my mobile menu fit together on one line?
How can I make the social links in my mobile menu fit together on one line?

Time：10-04

I have been struggling with this all day so I guess I'll ask the community. I am trying to get my social links / icons to fit side-by-side on one line, rather than taking up 5 lines.

It seems that whatever rules I have set for the other list items (which is actually a separate ul) are also being applied to these social links.

Thanks a ton if you can help! I'll take notes. lol

Updated Website

What I am trying to do.

What I am currently dealing with.

const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');

hamburger.addEventListener('click', function () {
    hamburger.classList.toggle('is-active');
    mobile_menu.classList.toggle('is-active');
})
:root {
    --light: #FFF;
    --dark: #111;
}
@font-face {
    font-family: roboto-light;
    src: url(fonts/Roboto-Light.ttf);
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: roboto-light;
}
.container {
    max-width: 1120px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px 12px 20px;
}
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: var(--dark);
}
#header-logo {
    width: 42px;
    transition: 0.3s;
}
#header-logo:hover {
    opacity: 50%;
    cursor: pointer;
}
#header-logo:active {
    opacity: 100%;
    cursor: pointer;
}
.hamburger {
    display: block;
    position: relative;
    z-index: 1; 
    user-select: none;
    appearance: none;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 30px;
    height: 2px;
    margin-bottom: 7px;
    position: relative;
    background-color: var(--light);
    z-index: 1;
    transform-origin: 0 0;
    transition: 0.4s;
}
.hamburger span:nth-child(1) {
    margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
    transform: translate(0px, -2px) rotate(45deg);
    margin-bottom: 6px;
    background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
    opacity: 0;
    transform: translateX(30px);
    margin-bottom: 6px;
    background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
    transform: translate(-3px, 3px) rotate(-45deg);
    margin-bottom: 6px;
    background-color: #757575;
}
.mobile-nav {
    position: fixed;
    left: 100%;
    min-height: fit-content;
    z-index: 98;
    background-color: #222222;
    padding-top: 66px;
    transition: 0.4s;
}
.mobile-nav.is-active {
    left: 0;
}
.mobile-nav a {
    font-size: 24px;
    text-align: center;
    display: block;
    padding: 19px 0px 19px;
    width: 100vw;
    border-bottom: solid 1px #363636;
    background-color: var(--primary);
    color: var(--light);
    text-decoration: none;
}
.mobile-social-links img {
    width: 28px;
}
.mobile-social-links li {
    list-style: none;
    width: 28px;
    display: inline;
}
.menu {
    display: none;
    flex: 1px 1px 0%;
    justify-content: flex-end;
    margin: 0px -16px;
}
.menu a {
    color: var(--light);
    font-size: 16px;
    margin: 0px 16px;
    text-decoration: none;
    transition: 0.4s;
    padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
    color: #757575;
}
.menu a:active{
    color: var(--light);
}
@media (min-width: 780px) {
    .hamburger {
        display: none;
    }
    .menu {
        display: flex;
    }
    .mobile-nav {
        display: none;
    }
    #header-logo {
        width: 80px;
        padding-left: 22px;
    }
    .container {
        padding: 16px 50px 16px 30px;
        margin: 0px auto;
    }
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Zachery Vaughn</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <nav>
                <div >
                    <img src="images/logos/Logo-White-500.png" id="header-logo">
                    <div >
                        <a href="#">about</a>
                        <a href="#">services</a>
                        <a href="#">portfolio</a>
                        <a href="#">blog</a>
                        <a href="#">contact</a>
                    </div>

                    <button >
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
            </nav>
            <nav >
                <a href="#">about</a>
                <a href="#">services</a>
                <a href="#">portfolio</a>
                <a href="#">blog</a>
                <a href="#">contact</a>
                <div>
                    <ul >
                        <li><a href="#"><img src="images/social-icons/twitter-icon.png"></a></li>
                        <li><a href="#"><img src="images/social-icons/linkedin-icon.png"></a></li>
                        <li><a href="#"><img src="images/social-icons/youtube-icon.png"></a></li>
                        <li><a href="#"><img src="images/social-icons/facebook-icon.png"></a></li>
                        <li><a href="#"><img src="images/social-icons/instagram-icon.png"></a></li>
                    </ul>
                </div>
            </nav>

        </header>
        <main>

        </main>
        <footer>

        </footer>

        <script src="main.js"></script>
    </body>
</html>

CodePudding user response：

Make the element with class .mobile-social-links to display: flex;. There's also a bit of work to do to position them centrally as you're doing some odd stuff with the anchor links but see below. All changes are annotated. There's a bit of animation to do but I'll leave you to sort that out.

Just as an aside you're making life difficult for yourself having two menus, one for desktop and one for mobile. If you can, have one menu but style it for both.

const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');

hamburger.addEventListener('click', function() {
  hamburger.classList.toggle('is-active');
  mobile_menu.classList.toggle('is-active');
})
:root {
  --light: #FFF;
  --dark: #111;
}

@font-face {
  font-family: roboto-light;
  src: url(fonts/Roboto-Light.ttf);
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: roboto-light;
}

.container {
  max-width: 1120px;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 12px 20px;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: var(--dark);
}

#header-logo {
  width: 42px;
  transition: 0.3s;
}

#header-logo:hover {
  opacity: 50%;
  cursor: pointer;
}

#header-logo:active {
  opacity: 100%;
  cursor: pointer;
}

.hamburger {
  display: block;
  position: relative;
  z-index: 1;
  user-select: none;
  appearance: none;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 30px;
  height: 2px;
  margin-bottom: 7px;
  position: relative;
  background-color: var(--light);
  z-index: 1;
  transform-origin: 0 0;
  transition: 0.4s;
}

.hamburger span:nth-child(1) {
  margin-top: 6px;
}

.hamburger.is-active span:nth-child(1) {
  transform: translate(0px, -2px) rotate(45deg);
  margin-bottom: 6px;
  background-color: #757575;
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(30px);
  margin-bottom: 6px;
  background-color: #757575;
}

.hamburger.is-active span:nth-child(3) {
  transform: translate(-3px, 3px) rotate(-45deg);
  margin-bottom: 6px;
  background-color: #757575;
}

.mobile-nav {
  position: fixed;
  left: 100%;
  min-height: fit-content;
  z-index: 98;
  background-color: #222222;
  padding-top: 66px;
  transition: 0.4s;
}

.mobile-nav.is-active {
  left: 0;
}

.mobile-nav a {
  font-size: 24px;
  text-align: center;
  display: block;
  padding: 19px 0px 19px;
  width: 100vw;
  border-bottom: solid 1px #363636;
  background-color: var(--primary);
  color: var(--light);
  text-decoration: none;
}

.mobile-social-links {
  /* added this */
  display: none;
  padding-block: 19px;
  justify-content: center;
  gap: 0.5rem;
}

.mobile-nav.is-active .mobile-social-links {
  /*added this */
  display: flex;
}

.mobile-social-links a {
  /* added this */
  display: inline;
  padding: 0;
}

.mobile-social-links img {
  width: 28px;
}

.mobile-social-links li {
  list-style: none;
  width: 28px;
}

.menu {
  display: none;
  flex: 1px 1px 0%;
  justify-content: flex-end;
  margin: 0px -16px;
}

.menu a {
  color: var(--light);
  font-size: 16px;
  margin: 0px 16px;
  text-decoration: none;
  transition: 0.4s;
  padding: 0px 0px;
}

.menu a.is-active,
.menu a:hover {
  color: #757575;
}

.menu a:active {
  color: var(--light);
}

@media (min-width: 780px) {
  .hamburger {
    display: none;
  }
  .menu {
    display: flex;
  }
  .mobile-nav {
    display: none;
  }
  #header-logo {
    width: 80px;
    padding-left: 22px;
  }
  .container {
    padding: 16px 50px 16px 30px;
    margin: 0px auto;
  }
}
<header>
  <nav>
    <div >
      <img src="images/logos/Logo-White-500.png" id="header-logo">
      <div >
        <a href="#">about</a>
        <a href="#">services</a>
        <a href="#">portfolio</a>
        <a href="#">blog</a>
        <a href="#">contact</a>
      </div>

      <button >
            <span></span>
            <span></span>
            <span></span>
          </button>
    </div>
  </nav>
  <nav >
    <a href="#">about</a>
    <a href="#">services</a>
    <a href="#">portfolio</a>
    <a href="#">blog</a>
    <a href="#">contact</a>
    <div>
      <ul >
        <li>
          <a href="#"><img src="images/social-icons/twitter-icon.png"></a>
        </li>
        <li>
          <a href="#"><img src="images/social-icons/linkedin-icon.png"></a>
        </li>
        <li>
          <a href="#"><img src="images/social-icons/youtube-icon.png"></a>
        </li>
        <li>
          <a href="#"><img src="images/social-icons/facebook-icon.png"></a>
        </li>
        <li>
          <a href="#"><img src="images/social-icons/instagram-icon.png"></a>
        </li>
      </ul>
    </div>
  </nav>

I've also done a version with grid but it means only one menu is needed. See below:

const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');

hamburger.addEventListener('click', function() {
  hamburger.classList.toggle('is-active');
  menu.classList.toggle('is-active');
})
:root {
  --light: #FFF;
  --dark: #111;
}

@font-face {
  font-family: roboto-light;
  src: url(fonts/Roboto-Light.ttf);
}

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: roboto-light;
}

.container {
  max-width: 1120px;
  margin: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 12px 20px;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: var(--dark);
}

#header-logo {
  width: 42px;
  transition: opacity 0.3s;
  cursor: pointer;
}

#header-logo:hover {
  opacity: 50%;
}

.hamburger {
  grid-area: hamburger;
  justify-self: end;
  position: relative;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 30px;
  height: 2px;
  margin-bottom: 7px;
  background-color: var(--light);
  transform-origin: 0 0;
  transition: transform 0.4s;
}

.hamburger.is-active span {
  margin-bottom: 6px;
  background-color: #757575;
}

.hamburger span:nth-child(1) {
  margin-top: 6px;
}

.hamburger.is-active span:nth-child(1) {
  transform: translate(0px, -2px) rotate(45deg);
}

.hamburger.is-active span:nth-child(2) {
  opacity: 0;
  transform: translateX(30px);
}

.hamburger.is-active span:nth-child(3) {
  transform: translate(-3px, 3px) rotate(-45deg);
}

.container {
  display: grid;
  grid-template-columns: fit-content(0) 1fr;
  grid-template-areas: "icon hamburger" "menu menu";
}

.image-container {
  grid-area: icon;
}

.menu {
  grid-area: menu;
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #222222;
  transition: max-height 1s, margin-top 1s;
}

.menu a {
  text-align: center;
  color: var(--light);
  font-size: 1.5rem;
  margin: 0 1rem;
  text-decoration: none;
  transition: color 0.4s;
  padding: 19px 0;
  border-bottom: solid 1px #363636;
}

.menu.is-active {
  max-height: 100vh;
  margin-top: 1rem;
}

.menu a:hover {
  color: #757575;
}

.menu a:active {
  color: var(--light);
}

.mobile-social-links {
  padding: 19px;
}

.mobile-social-links>ul {
  display: flex;
  justify-content: center;
  width: 100%;
}

.mobile-social-links a {
  padding: 0;
}

@media only screen and (min-width: 780px) {
  .hamburger {
    display: none;
  }
  .menu {
    justify-content: flex-end;
    flex-direction: row;
    background: none;
    display: flex;
    max-height: initial;
    margin-top: 0;
  }
  .menu a {
    text-align: left;
    font-size: 1rem;
    border-bottom: none;
  }
  .mobile-social-links {
    display: none;
  }
  #header-logo {
    width: 80px;
    padding-left: 22px;
  }
  .container {
    grid-template-areas: "icon menu";
    padding: 16px 50px 16px 30px;
    margin: 0px auto;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav>
  <div >
    <div >
      <img src="https://www.fillmurray.com/500/500" id="header-logo">
    </div>
    <div >
      <a href="#">about</a>
      <a href="#">services</a>
      <a href="#">portfolio</a>
      <a href="#">blog</a>
      <a href="#">contact</a>
      <div >
        <ul>
          <li><a href="#"><i ></i></a></li>
          <li><a href="#"><i ></i></a></li>
          <li><a href="#"><i ></i></a></li>
          <li><a href="#"><i ></i></a></li>
          <li><a href="#"><i ></i></a></li>
        </ul>
      </div>
    </div>
    <div >
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</nav>

CodePudding user response：

Try adding display: flex to the ul with the .mobile-social-links class.

const hamburger = document.querySelector('.hamburger');
const mobile_menu = document.querySelector('.mobile-nav');

hamburger.addEventListener('click', function () {
    hamburger.classList.toggle('is-active');
    mobile_menu.classList.toggle('is-active');
})
:root {
    --light: #FFF;
    --dark: #111;
}
@font-face {
    font-family: roboto-light;
    src: url(fonts/Roboto-Light.ttf);
}
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: roboto-light;
}
.container {
    max-width: 1120px;
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px 12px 20px;
}
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: var(--dark);
}
#header-logo {
    width: 42px;
    transition: 0.3s;
}
#header-logo:hover {
    opacity: 50%;
    cursor: pointer;
}
#header-logo:active {
    opacity: 100%;
    cursor: pointer;
}
.hamburger {
    display: block;
    position: relative;
    z-index: 1; 
    user-select: none;
    appearance: none;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 30px;
    height: 2px;
    margin-bottom: 7px;
    position: relative;
    background-color: var(--light);
    z-index: 1;
    transform-origin: 0 0;
    transition: 0.4s;
}
.hamburger span:nth-child(1) {
    margin-top: 6px;
}
.hamburger.is-active span:nth-child(1) {
    transform: translate(0px, -2px) rotate(45deg);
    margin-bottom: 6px;
    background-color: #757575;
}
.hamburger.is-active span:nth-child(2) {
    opacity: 0;
    transform: translateX(30px);
    margin-bottom: 6px;
    background-color: #757575;
}
.hamburger.is-active span:nth-child(3) {
    transform: translate(-3px, 3px) rotate(-45deg);
    margin-bottom: 6px;
    background-color: #757575;
}
.mobile-nav {
    position: fixed;
    left: 100%;
    min-height: fit-content;
    z-index: 98;
    background-color: #222222;
    padding-top: 66px;
    transition: 0.4s;
}
.mobile-nav.is-active {
    left: 0;
}
.mobile-nav a {
    font-size: 24px;
    text-align: center;
    display: block;
    padding: 19px 0px 19px;
    width: 100vw;
    border-bottom: solid 1px #363636;
    background-color: var(--primary);
    color: var(--light);
    text-decoration: none;
}
.mobile-social-links img {
    width: 28px;
}
.mobile-social-links li {
    list-style: none;
    width: 28px;
    display: inline;
}
.menu {
    display: none;
    flex: 1px 1px 0%;
    justify-content: flex-end;
    margin: 0px -16px;
}
.menu a {
    color: var(--light);
    font-size: 16px;
    margin: 0px 16px;
    text-decoration: none;
    transition: 0.4s;
    padding: 0px 0px;
}
.menu a.is-active, .menu a:hover {
    color: #757575;
}
.menu a:active{
    color: var(--light);
}
ul.mobile-social-links{
    display: flex;
}

@media (min-width: 780px) {
    .hamburger {
        display: none;
    }
    .menu {
        display: flex;
    }
    .mobile-nav {
        display: none;
    }
    #header-logo {
        width: 80px;
        padding-left: 22px;
    }
    .container {
        padding: 16px 50px 16px 30px;
        margin: 0px auto;
    }
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Zachery Vaughn</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <nav>
                <div >
                    <img src="images/logos/Logo-White-500.png" id="header-logo">
                    <div >
                        <a href="#">about</a>
                        <a href="#">services</a>
                        <a href="#">portfolio</a>
                        <a href="#">blog</a>
                        <a href="#">contact</a>
                    </div>

                    <button >
                        <span></span>
                        <span></span>
                        <span></span>
                    </button>
                </div>
            </nav>
            <nav >
                <a href="#">about</a>
                <a href="#">services</a>
                <a href="#">portfolio</a>
                <a href="#">blog</a>
                <a href="#">contact</a>
                <div>
                    <ul >
                        <li><a href="#"><img src="images/social-icons/twitter-icon.png"></a></li>
                        <li><a href="#"><img src="images/social-icons/linkedin-icon.png"></a></li>
                        <li><a href="#"><img src="images/social-icons/youtube-icon.png"></a></li>
                        <li><a href="#"><img src="images/social-icons/facebook-icon.png"></a></li>
                        <li><a href="#"><img src="images/social-icons/instagram-icon.png"></a></li>
                    </ul>
                </div>
            </nav>

        </header>
        <main>

        </main>
        <footer>

        </footer>

        <script src="main.js"></script>
    </body>
</html>

CodePudding user response：

The rules are still being applied to your links in the other ul as they still match.

I.e. Your mobile social links are still being given the width of 100vw because they are still elements within the 'mobile-nav' element. You'd need the rules below to take higher precedence, So where you've applied 'width: 28px;' to the '.mobile-social-links li' you'd want to apply it to the '.mobile-social-links li a' so it can overwrite the initial css

Page link：https//www.codepudding.com/database/564098.html

Prev:How can I align my photo and text next to each other?
Next:how to remove border from navigation bar bootstrap dropdown menu
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding