social media in nav bar

Question

I'm making a website for university, and I've become stuck; I'm trying to display the social media links in the same line as the navigation and the logo, but it just won't work; the navigation works, and the social icons work as links but just won't sit where I want them in the top right.

I tried about a million ways of formatting, with different div tags, IDs, classes, the best one so far has been using grids but the socials just wont sit where I want them, instead they sprawl around the page.

This is my HTML and CSS:

/*Navigation Bar*/

#RLogo {
  padding: 10px
}

.navigation-bar {
  background-color: #EFE9D7;
  height: 100px;
  width: 100%;
}

.pure-menu-list {
  padding: 10px;
  margin: 0px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.pure-menu-list li {
  list-style-type: none;
  padding: 0px;
  height: 24px;
  margin-top: 4px;
  margin-bottom: 4px;
  display: inline;
}

.pure-menu-list li a {
  color: #171a1f;
  font-size: 16px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
  line-height: 70px;
  padding: 5px 15px;
  opacity: 0.7;
}


/*footer*/

footer {
  background-color: #EFE9D7;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name=viewport content="width=device-width, initial-scale=1">
  <title>Rule One</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" integrity="sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5" crossorigin="anonymous">
  <link rel="stylesheet" href="StyleSheet.css">

</head>

<body>

  <div class="navigation-bar">
    <div class="pure-g">

      <div class="pure-u-1-3">
        <img id="RLogo" src="images/Rlogo.png">
      </div>

      <div class="pure-u-1-3">
        <ul class="pure-menu-list">

          <li class="pure-menu-item">
            <a href="#">Home</a></li>

          <li class="pure-menu-item"><a href="#">Events</a></li>
          <li class="pure-menu-item"><a href="#">Merch</a></li>
          <li class="pure-menu-item"><a href="#">Community</a></li>
          <li class="pure-menu-item"><a href="#">Jobs</a></li>
        </ul>
      </div>

      <div class="pure-u-1-3"></div>
      <ul class="pure-menu-list">
        <li class="pure-menu-item">
          <a href="https://www.youtube.com/@RuleOne"><img id="youtube" src="images/youtube.png"></a>
        </li>
        <li class="pure-menu-item">
          <a href="https://twitter.com/RuleOneGG"><img id="twitter" src="images/twitter.png"></a>
        </li>
        <li class="pure-menu-item">
          <a href="https://www.twitch.tv/ruleonegg"><img id="twitch" src="images/twitch.png"></a>
        </li>
        <li class="pure-menu-item">
          <a href="https://discord.com/invite/ruleone"><img id="discord" src="images/discord.png"></a>
        </li>
        <li class="pure-menu-item">
          <a href="https://www.instagram.com/ruleone.gg/"><img id="instagram" src="images/instagram.png"></a>
        </li>
      </ul>
    </div>
  </div>
  </div>
  </div>

  <div>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolorum blanditiis nobis cumque, eum reiciendis quam deserunt animi facilis, omnis voluptatibus doloremque similique? Placeat praesentium totam iste accusantium modi voluptatibus.</p>
  </div>
</body>
<footer> Rule One Esports Team</footer>

</html>

The `
` element must be within the `` element, you appear to have a number - two, I think - of closing `` tags which don't have a corresponding opening tag. Can you share an image of what you want the result to look like? — David Thomas, Mar 04 '23 at 00:52

score 0 · Answer 1 · answered Mar 04 '23 at 00:31

I assume you are not building a responsive design for now. Here is the solution from your code.

You have a line:

But I guess you forgot to put the icons list inside this div. This will solve the problem.

<div class="pure-u-1-3">
  <ul class="pure-menu-list">
    <li class="pure-menu-item"><a href="https://www.youtube.com/@RuleOne"><img id="youtube" src="images/youtube.png"></a></li>
    <li class="pure-menu-item"><a href="https://twitter.com/RuleOneGG"><img id="twitter" src="images/twitter.png"></a></li>
    <li class="pure-menu-item"><a href="https://www.twitch.tv/ruleonegg"><img id="twitch" src="images/twitch.png"></a></li>
    <li class="pure-menu-item"><a href="https://discord.com/invite/ruleone"><img id="discord" src="images/discord.png"></a></li>
    <li class="pure-menu-item"><a href="https://www.instagram.com/ruleone.gg/"><img id="instagram" src="images/instagram.png"></a></li>
  </ul>
  </div>

I hope this will help. Also, to align the icons more father right you can use another class aside existing class and make it float to right.

score 0 · Answer 2 · answered Mar 04 '23 at 15:35

I think that I have something even better than the simple social media bar in the navbar. It would make your website for the university even better. The thing is a hover media bar on the right side of the page. There are two parts of it - HTML code, CSS Code. BOOM! It works! This is the HTML code you need to put just after the div of your navbar ends:- <div class="float-sm"> <div class="fl-fl float-fb"> <i class="fa fa-facebook"></i> <a href="https://www.facebook.com/" target="_blank"> Like us!</a> </div> <div class="fl-fl float-tw"> <i class="fa fa-twitter"></i> <a href="https://twitter.com/" target="_blank">Follow us!</a> </div> <div class="fl-fl float-gp"> <i class="fa fa-instagram"></i> <a href="https://instagram.com/" target="_blank">Follow us!</a> </div> <div class="fl-fl float-li"> <i class="fa fa-youtube"></i> <a href="https://www.youtube.com/" target="_blank">Subscribe us! </a> </div> </div>

And for the CSS Code:- `.fl-fl {
text-transform: uppercase; letter-spacing: 3px; padding: 4px; width: 200px; position: fixed; right: -160px; z-index: 1000; font: normal normal 10px Arial; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; }

.fa {
    font-size: 20px;
    color: #fff;
    padding: 10px 0;
    width: 40px;
    margin-left: 8px;
}

.fl-fl:hover {
    right: 0;
}

.fl-fl a {
    color: #fff !important;
    text-decoration: none;
    text-align: center;
    line-height: 43px!important;
    vertical-align: top!important;
}

.float-fb {
    background: #3B5998;
    top: 160px;
}

.float-tw {
    background: #55ACEE;
    top: 215px;
}

.float-gp {
    background: #dd4b39;
    top: 270px;
}

.float-li {
    background: #007bb5;
    top: 325px;
}

.float-ig {
    background: #ffa500;
    top: 380px;
}

.float-yt {
    background: #bb0000;
    top: 435px;
}`

social media in nav bar

2 Answers2