[ANSWERED] javascript – CSS Alignment Issue on Navigation Bar

Question 1

To make it works, change the #links{text-align:left}
And your issue about the icon’s size put the fa-fw class. it will makeall the icons the same size.

Check the snippest below:

let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
  sidenav.style.width = "280px";
  document.getElementById("expand-icon").classList.add("expand");
  document.getElementById("sidenav-expand").style.textAlign = "right";
  document.getElementById("sidenav-heading").style.display = "inline-block";
  //document.getElementById("links").style.float = "left";
};
sidenav.onmouseout = function() {
  sidenav.style.width = "75px";
  document.getElementById("expand-icon").classList.remove("expand");
  document.getElementById("sidenav-expand").style.textAlign = "center";
  document.getElementById("sidenav-heading").style.display = "none";
};

#sidenav {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;
}

#sidenav-brand {
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#sidenav-heading h2 {
  margin: 0;
}

#sidenav-expand {
  text-align: center;
  margin-left: 3px;
}

.expand {
  transform: rotate(180deg);
}

#sidenav-links {
  margin: 15px 0;
}

#links {
  list-style-type: none;
  padding: 0;
  text-align: left;
}

#links li {
  padding: 18px;
  display: block;
}

#links li:hover {
  color: white;
  background-color: hotpink;
}

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

  <head>
    <meta charset="UTF-8" />
    <title>Navigation Bar</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
  </head>

  <body>
    <div id="sidenav">
      <div id="sidenav-brand">
        <div id="sidenav-heading" style="display:none;">
          <h2>Expanded</h2>
        </div>
        <div id="sidenav-expand">
          <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
        </div>
      </div>

      <div id="sidenav-links">
        <ul id="links">
          <li>
            <i class="fas fa-fw fa-id-card fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-graduation-cap fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-briefcase fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-smile-beam fa-2x"></i>
          </li>
        </ul>
      </div>
    </div>
  </body>

</html>

Question 2

why not just placing them to left ?

#links li{
  text-align:left;
}

Question 3

I’ve simpy added float: left to the CSS for #links and it looks fine to me.

They are still center-aligned on the collapsed version, because I haven’t removed the line directly above it which says text-align: center;. However, they no longer change position when the menu opens.

See the snippet below:

let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
  sidenav.style.width = "280px";
  document.getElementById("expand-icon").classList.add("expand");
  document.getElementById("sidenav-expand").style.textAlign = "right";
  document.getElementById("sidenav-heading").style.display = "inline-block";
};
sidenav.onmouseout = function() {
  sidenav.style.width = "75px";
  document.getElementById("expand-icon").classList.remove("expand");
  document.getElementById("sidenav-expand").style.textAlign = "center";
  document.getElementById("sidenav-heading").style.display = "none";
};

#sidenav {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;
}

#sidenav-brand {
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#sidenav-heading h2 {
  margin: 0;
}

#sidenav-expand {
  text-align: center;
  margin-left: 3px;
}

.expand {
  transform: rotate(180deg);
}

#sidenav-links {
  margin: 15px 0;
}

#links {
  list-style-type: none;
  padding: 0;
  text-align: center;
  float: left;
}

#links li {
  padding: 18px;
  display: block;
}

#links li:hover {
  color: white;
  background-color: hotpink;
}

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

<head>
  <meta charset="UTF-8" />
  <title>Navigation Bar</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
</head>

<body>
  <div id="sidenav">
    <div id="sidenav-brand">
      <div id="sidenav-heading" style="display:none;">
        <h2>Expanded</h2>
      </div>
      <div id="sidenav-expand">
        <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
      </div>
    </div>

    <div id="sidenav-links">
      <ul id="links">
        <li>
          <i class="fas fa-id-card fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-graduation-cap fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-briefcase fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-smile-beam fa-2x"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Question 4

Just remove the text-align: center rule on #links element. Also I edited your css to add some :hover rules to avoid using javascript:

#sidenav {
  height: 100%;
  min-width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;
}

#sidenav:hover {
  width: 280px;
}

#sidenav:hover #expand-icon {
  transform: rotate(180deg);
}

#sidenav:hover #sidenav-heading {
  display: inline-block;
}

#sidenav #sidenav-heading {
  display: none;
}

#sidenav-brand {
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#sidenav-heading h2 {
  margin: 0;
}

#sidenav-expand {
  text-align: center;
  margin-left: 3px;
}

#sidenav-links {
  margin: 15px 0;
}

#links {
  list-style-type: none;
  padding: 0;
}

#links li {
  padding: 18px 20px;
  /* <-- Add some padding*/
  display: block;
}

#links li:hover {
  color: white;
  background-color: hotpink;
}

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

<head>
  <meta charset="UTF-8" />
  <title>Navigation Bar</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
</head>

<body>
  <div id="sidenav">
    <div id="sidenav-brand">
      <div id="sidenav-heading">
        <h2>Expanded</h2>
      </div>
      <div id="sidenav-expand">
        <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
      </div>
    </div>

    <div id="sidenav-links">
      <ul id="links">
        <li>
          <i class="fas fa-id-card fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-graduation-cap fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-briefcase fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-smile-beam fa-2x"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

Question 5

I’m currently creating a navigation bar that expands and collapses whether the mouse is over or out of the navbar. My issue is that when the navbar is expanded, my icons are aligned to the center but I wish for them to be positioned exactly where they are before the navbar is expanded. I have them aligned to the center because the icons are not the same size and look ‘out of place’ without it, when the navbar is collapsed.

let sidenav = document.getElementById("sidenav");
sidenav.onmouseover = function() {
  sidenav.style.width = "280px";
  document.getElementById("expand-icon").classList.add("expand");
  document.getElementById("sidenav-expand").style.textAlign = "right";
  document.getElementById("sidenav-heading").style.display = "inline-block";
  //document.getElementById("links").style.float = "left";
};
sidenav.onmouseout = function() {
  sidenav.style.width = "75px";
  document.getElementById("expand-icon").classList.remove("expand");
  document.getElementById("sidenav-expand").style.textAlign = "center";
  document.getElementById("sidenav-heading").style.display = "none";
};

#sidenav {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: 0.2s;
}

#sidenav-brand {
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#sidenav-heading h2 {
  margin: 0;
}

#sidenav-expand {
  text-align: center;
  margin-left: 3px;
}

.expand {
  transform: rotate(180deg);
}

#sidenav-links {
  margin: 15px 0;
}

#links {
  list-style-type: none;
  padding: 0;
  text-align: center;
}

#links li {
  padding: 18px;
  display: block;
}

#links li:hover {
  color: white;
  background-color: hotpink;
}

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

<head>
  <meta charset="UTF-8" />
  <title>Navigation Bar</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/6cc49d804e.js" crossorigin="anonymous"></script>
  <script src="js/scripts.js"></script>
</head>

<body>
  <div id="sidenav">
    <div id="sidenav-brand">
      <div id="sidenav-heading" style="display:none;">
        <h2>Expanded</h2>
      </div>
      <div id="sidenav-expand">
        <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
      </div>
    </div>

    <div id="sidenav-links">
      <ul id="links">
        <li>
          <i class="fas fa-id-card fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-graduation-cap fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-briefcase fa-2x"></i>
        </li>
        <li>
          <i class="fas fa-smile-beam fa-2x"></i>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

And JSFiddle link:
https://jsfiddle.net/h86zf4d3/

I tried to float my icons to the left as you can see from the commented out JS code, however, for some reason, this gets rid of the block display for the list items.

Bollate

[ANSWERED] javascript – CSS Alignment Issue on Navigation Bar

By

Solution 1 :

Solution 2 :

Solution 3 :

Solution 4 :

Problem :

Comments

Comment posted by johannchopin

Comment posted by JLi_2398

Comment posted by Kaj

Comment posted by JLi_2398

Comment posted by JLi_2398

Comment posted by Run_Script

Comment posted by johannchopin

By

Related Post

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

[ANSWERED] python – Extract text from a class in HTML using CSS language

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate