Home > Back-end >  Overlapping text of CSS aligned elements
Overlapping text of CSS aligned elements

Time：09-27

The following is CSS & HTML code that I was working on but for some reasons all the text is overlapping on each other (are not in proper position). I don't have a clue of what I am doing wrong here writing this code. I think maybe this is happening because of alignment of this menu-item. Thanks for helping me in advance.

body {
  overflow: hidden;
  background: linear-gradient(to right, #fc354c, #0abfbc);
}

.menu-toggler {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

.menu-toggler:hover label,
.menu-toggler:hover label:before,
.menu-toggler:hover label:after {
  background: white;
}

.menu-toggler:checked label {
  background: transparent;
}

.menu-toggler:checked label:before,
.menu-toggler:checked label:after {
  top: 0;
  width: 40px;
  transform-origin: 50% 50%;
}

.menu-toggler:checked label:before {
  transform: rotate(45deg);
}

.menu-toggler:checked label:after {
  transform: rotate(-45deg);
}

.menu-toggler:checked~ul .menu-item {
  opacity: 1;
}

.menu-toggler:checked~ul .menu-item:nth-child(1) {
  transform: rotate(0deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(2) {
  transform: rotate(60deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(3) {
  transform: rotate(120deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(4) {
  transform: rotate(180deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(5) {
  transform: rotate(240deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(6) {
  transform: rotate(300deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item a {
  pointer-events: auto;
}

.menu-toggler label {
  width: 40px;
  height: 5px;
  display: block;
  z-index: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.5s, top 0.5s;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.menu-toggler label:before,
.menu-toggler label:after {
  width: 40px;
  height: 5px;
  display: block;
  z-index: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.5s, top 0.5s;
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggler label:before {
  top: 10px;
}

.menu-toggler label:after {
  top: -10px;
}

.menu-item:nth-child(1) a {
  transform: rotate(0deg);
}

.menu-item:nth-child(2) a {
  transform: rotate(-60deg);
}

.menu-item:nth-child(3) a {
  transform: rotate(-120deg);
}

.menu-item:nth-child(4) a {
  transform: rotate(-180deg);
}

.menu-item:nth-child(5) a {
  transform: rotate(-240deg);
}

.menu-item:nth-child(6) a {
  transform: rotate(-300deg);
}

.menu-item {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 80px;
  height: 80px;
  display: block;
  opacity: 0;
  transition: 0.5s;
}

.menu-item a {
  display: block;
  width: 520px;
  height: 60px;
  font-family: Courgette;
  line-height: 60px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 38px;
  text-align: center;
  text-decoration: none;
  font-size: 30px;
  pointer-events: none;
  transition: 0.2s;
}

.menu-item a:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  color: white;
  background: rgba(255, 255, 255, 0.3);
  font-size: 34.4444444444px;
}
<body translate="no">
  <nav class="menu">
    <input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
    <label for="menu-toggler"></label>
    <ul>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
    </ul>
  </nav>
</body>

My desired output is like this:

enter image description here

CodePudding user response：

The text boxes are too big and it doesn't have enough space to expand so it is overlapping. You can try to make it bigger by setting:

.menu-item {
   width: 300px;
   height: 560px;
}

Working example:

body {
  overflow: hidden;
  background: linear-gradient(to right, #fc354c, #0abfbc);
}

.menu-toggler {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

.menu-toggler:hover label,
.menu-toggler:hover label:before,
.menu-toggler:hover label:after {
  background: white;
}

.menu-toggler:checked label {
  background: transparent;
}

.menu-toggler:checked label:before,
.menu-toggler:checked label:after {
  top: 0;
  width: 40px;
  transform-origin: 50% 50%;
}

.menu-toggler:checked label:before {
  transform: rotate(45deg);
}

.menu-toggler:checked label:after {
  transform: rotate(-45deg);
}

.menu-toggler:checked~ul .menu-item {
  opacity: 1;
}

.menu-toggler:checked~ul .menu-item:nth-child(1) {
  transform: rotate(0deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(2) {
  transform: rotate(60deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(3) {
  transform: rotate(120deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(4) {
  transform: rotate(180deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(5) {
  transform: rotate(240deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(6) {
  transform: rotate(300deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item a {
  pointer-events: auto;
}

.menu-toggler label {
  width: 40px;
  height: 5px;
  display: block;
  z-index: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.5s, top 0.5s;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.menu-toggler label:before,
.menu-toggler label:after {
  width: 40px;
  height: 5px;
  display: block;
  z-index: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.5s, top 0.5s;
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggler label:before {
  top: 10px;
}

.menu-toggler label:after {
  top: -10px;
}

.menu-item:nth-child(1) a {
  transform: rotate(0deg);
}

.menu-item:nth-child(2) a {
  transform: rotate(-60deg);
}

.menu-item:nth-child(3) a {
  transform: rotate(-120deg);
}

.menu-item:nth-child(4) a {
  transform: rotate(-180deg);
}

.menu-item:nth-child(5) a {
  transform: rotate(-240deg);
}

.menu-item:nth-child(6) a {
  transform: rotate(-300deg);
}

.menu-item {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 300px;
  height: 700px;
  display: block;
  opacity: 0;
  transition: 0.5s;
}

.menu-item a {
  display: block;
  width: 520px;
  height: 60px;
  font-family: Courgette;
  line-height: 60px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 38px;
  text-align: center;
  text-decoration: none;
  font-size: 30px;
  pointer-events: none;
  transition: 0.2s;
}

.menu-item a:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  color: white;
  background: rgba(255, 255, 255, 0.3);
  font-size: 34.4444444444px;
}
<body translate="no">
  <nav class="menu">
    <input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
    <label for="menu-toggler"></label>
    <ul>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
    </ul>
  </nav>
</body>

If you can change the width and height of individual options, It might look even better.

body {
  overflow: hidden;
  background: linear-gradient(to right, #fc354c, #0abfbc);
}

.menu-toggler {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

.menu-toggler:hover label,
.menu-toggler:hover label:before,
.menu-toggler:hover label:after {
  background: white;
}

.menu-toggler:checked label {
  background: transparent;
}

.menu-toggler:checked label:before,
.menu-toggler:checked label:after {
  top: 0;
  width: 40px;
  transform-origin: 50% 50%;
}

.menu-toggler:checked label:before {
  transform: rotate(45deg);
}

.menu-toggler:checked label:after {
  transform: rotate(-45deg);
}

.menu-toggler:checked~ul .menu-item {
  opacity: 1;
}

.menu-toggler:checked~ul .menu-item:nth-child(1) {
  transform: rotate(0deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(2) {
  transform: rotate(60deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(3) {
  transform: rotate(120deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(4) {
  transform: rotate(180deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(5) {
  transform: rotate(240deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item:nth-child(6) {
  transform: rotate(300deg) translateX(-110px);
}

.menu-toggler:checked~ul .menu-item a {
  pointer-events: auto;
}

.menu-toggler label {
  width: 40px;
  height: 5px;
  display: block;
  z-index: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.5s, top 0.5s;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.menu-toggler label:before,
.menu-toggler label:after {
  width: 40px;
  height: 5px;
  display: block;
  z-index: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.5s, top 0.5s;
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggler label:before {
  top: 10px;
}

.menu-toggler label:after {
  top: -10px;
}

.menu-item:nth-child(1) a {
  transform: rotate(0deg);
}

.menu-item:nth-child(2) a {
  transform: rotate(-60deg);
}

.menu-item:nth-child(3) a {
  transform: rotate(-120deg);
}

.menu-item:nth-child(4) a {
  transform: rotate(-180deg);
}

.menu-item:nth-child(5) a {
  transform: rotate(-240deg);
}

.menu-item:nth-child(6) a {
  transform: rotate(-300deg);
}

.menu-item {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 250px;
  height: 225px;
  display: block;
  opacity: 0;
  transition: 0.5s;
}

.menu-item a {
  display: block;
  width: 200px;
  height: 60px;
  font-family: Courgette;
  line-height: 60px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 38px;
  text-align: center;
  text-decoration: none;
  font-size: 30px;
  pointer-events: none;
  transition: 0.2s;
}

.menu-item a:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  color: white;
  background: rgba(255, 255, 255, 0.3);
  font-size: 34.4444444444px;
}
<body translate="no">
  <nav class="menu">
    <input checked="checked" class="menu-toggler" id="menu-toggler" type="checkbox">
    <label for="menu-toggler"></label>
    <ul>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
      <li class="menu-item">
        <a target="_blank">Company Goal</a>
      </li>
    </ul>
  </nav>
</body>

Page link：https//www.codepudding.com/Backend/129747.html

Prev:How to add the navbar as in the picture? (Html CSS)
Next:Conditionals in css?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding