Question 43741 in Html Question posted in
Some basic documentation can be found here.

Icon just does'nt want to move to the right or clashes with my ul below – Html

I Assume the empty space is a div element, in which there is space to the right
As seen in the screen, I just need the Bars-Icon to move to the right side of the div, to be in the Top right corner, and have the ul below. But I’ve tweaked now for at least an hour and cant seem to find a solution.
Thanks for a reply!

HTML:

<div><i class="fa-solid fa-bars fa-3x">
                <div class="container-navmenu">
                    <ul>
                        <li><a href="https://www.playrealm.de/home">Home</a></li>
                        <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
                        <li><a href="https://www.playrealm.de/shop">Shop</a></li>
                        <li><a href="https://www.playrealm.de/team">Team</a></li>
                        <li><a href="https://www.playrealm.de/news">News</a></li>
                        <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
                    </ul>
                </div>
                </i>
                </div>

Stylesheet:

.fa-bars{
    color: white;
    float: right;
}
.fa-bars:hover{
    color: rgba(161,51,255,1.00);
}
.fa-bars:hover ul{
    display: block;
}
.container-navmenu{
    margin-right: 200px;
    margin-top: 50px;
    float:right;
    text-align: right;
}
.container-navmenu ul{
    display: block;
    position: absolute;
    background-color: #262F3D;
    border-radius: 20px;
    float: right;
}
.container-navmenu ul li{
    list-style: none;
    position: relative;
}
.container-navmenu ul li a{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: all 0.3s ease 0s;
}
.container-navmenu ul li a:hover{
    color: rgba(161,51,255,1.00)
}

I tried tweaking margin & Padding, but the Icon is connected to the List, and therefor it just does nothing to change the relative position of both.
I also tried just ending the </i> right after the icon, not including the List, but the outcome is, that I didn’t find a way to display the List on Hover, because .fa-bars:hover.container-navmanu ul{display:block} did nothing.

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    closing the </i> Tag right after the icon, and moving the Icon not by using float: right; but by using position: absolute; top: 30px; right: 20px; in my fa-bars style, I have repositioned the Icon to the Top right, and the List below. To further expand the Solution, you should use a new class in a Tag around the Icon AND the List all together, from whom you can now call a [new class]:hover .container-navmenu ul To keep the List open while ur on the icon AND on the List. If you don't do that, the List will disappear as soon as you leave the Icon. Massive Thanks to everyone that gave me this solution!


  2. 0

    To move the bars icon to the top right corner of the div, you can try adding the following CSS properties to the .fa-bars class:

    .fa-bars {
  color: white;
  position: absolute;
  top: 0;
  right: 0;
}

    This will position the icon at the top right corner of the div.

    To display the list on hover, you can use:

    .fa-bars:hover {
  color: rgba(161, 51, 255, 1.00);
}

.navmenu-container:hover .container-navmenu ul {
  display: block;
}

    This will display the ul element when the bars icon is hovered over.

    Here’s the updated code:

    <div class="navmenu-container">
  <i class="fa-solid fa-bars fa-3x"></i>
  <div class="container-navmenu">
    <ul>
      <li><a href="https://www.playrealm.de/home">Home</a></li>
      <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
      <li><a href="https://www.playrealm.de/shop">Shop</a></li>
      <li><a href="https://www.playrealm.de/team">Team</a></li>
      <li><a href="https://www.playrealm.de/news">News</a></li>
      <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
    </ul>
  </div>
</div>

    .navmenu-container {
  position: relative;
  display: inline-block;
}

.fa-bars {
  color: white;
  position: absolute;
  top: 0;
  right: 0;
}

.fa-bars:hover {
  color: rgba(161, 51, 255, 1.00);
}

.navmenu-container:hover .container-navmenu ul {
  display: block;
}

.container-navmenu {
  margin-top: 50px;
  float: right;
  text-align: right;
}

.container-navmenu ul {
  display: none;
  position: absolute;
  background-color: #262F3D;
  border-radius: 20px;
  float: right;
}

.container-navmenu ul li {
  list-style: none;
  position: relative;
}

.container-navmenu ul li a {
  font-family: "forma-djr-display", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: white;
  text-decoration: none;
  padding: 10px;
  display: block;
  transition: all 0.3s ease 0s;
}

.container-navmenu ul li a:hover {
  color: rgba(161, 51, 255, 1.00)
}

    I hope this helps!

    Login or Signup to reply.
  3. 0

    Try adding position:absolute and right:0 to .fa-bars::before like this:

    .fa-bars::before {
    position: absolute;
    right: 0;
}
.fa-bars{
    color: black;
    float: right;
}
.fa-bars:hover{
    color: rgba(161,51,255,1.00);
}
.fa-bars:hover ul{
    display: block;
}
.container-navmenu{
    margin-right: 200px;
    margin-top: 50px;
    float:right;
    text-align: right;
}
.container-navmenu ul{
    display: block;
    position: absolute;
    background-color: #262F3D;
    border-radius: 20px;
    float: right;
}
.container-navmenu ul li{
    list-style: none;
    position: relative;
}
.container-navmenu ul li a{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: all 0.3s ease 0s;
}
.container-navmenu ul li a:hover{
    color: rgba(161,51,255,1.00)
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <div>
     <i class="fa-solid fa-bars fa-3x">
     <div class="container-navmenu">
       <ul>
         <li><a href="https://www.playrealm.de/home">Home</a></li>
         <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
         <li><a href="https://www.playrealm.de/shop">Shop</a></li>
         <li><a href="https://www.playrealm.de/team">Team</a></li>
         <li><a href="https://www.playrealm.de/news">News</a></li>
         <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
       </ul>
     </div>
    </i>
   </div>
    Login or Signup to reply.
  4. 0

    I found a solution to do this:

    Close the </i> tag immediately after the icon,

    and change your CSS selector .fa-bars:hover ul to .fa-bars:hover + div ul

    (see also change in .container-navmenu ul to display: none)

    good luck!

    .fa-bars{
    color: black;
    float: right;
}
.fa-bars:hover{
    color: rgba(161,51,255,1.00);
}
.fa-bars:hover + div ul{
    display: block;
}
.container-navmenu{
    margin-right: 200px;
    margin-top: 50px;
    float:right;
    text-align: right;
}
.container-navmenu ul{
    display: none;
    position: absolute;
    background-color: #262F3D;
    border-radius: 20px;
    float: right;
}
.container-navmenu ul li{
    list-style: none;
    position: relative;
}
.container-navmenu ul li a{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: all 0.3s ease 0s;
}
.container-navmenu ul li a:hover{
    color: rgba(161,51,255,1.00)
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div>
  <i class="fa-solid fa-bars fa-3x"></i>
  <div class="container-navmenu">
    <ul>
      <li><a href="https://www.playrealm.de/home">Home</a></li>
      <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
      <li><a href="https://www.playrealm.de/shop">Shop</a></li>
      <li><a href="https://www.playrealm.de/team">Team</a></li>
      <li><a href="https://www.playrealm.de/news">News</a></li>
      <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
    </ul>
  </div>
</div>
    Login or Signup to reply.
  5. 0

    The CSS isn’t the problem; it’s your HTML. The <i> tag may only have phrasing content as children, or it will result in unexpected behavior.

    .fa-bars {
  float: right;
}

.fa-bars:hover {
  color: rgba(161, 51, 255, 1.00);
}

.fa-bars:hover ul {
  display: block;
}

.container-navmenu {
  margin-right: 200px;
  margin-top: 50px;
  float: right;
  text-align: right;
}

.container-navmenu ul {
  display: block;
  position: absolute;
  background-color: #262F3D;
  border-radius: 20px;
  float: right;
}

.container-navmenu ul li {
  list-style: none;
  position: relative;
}

.container-navmenu ul li a {
  font-family: "forma-djr-display", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: white;
  text-decoration: none;
  padding: 10px;
  display: block;
  transition: all 0.3s ease 0s;
}

.container-navmenu ul li a:hover {
  color: rgba(161, 51, 255, 1.00)
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />

<div>
  <i class="fa-solid fa-bars fa-3x"></i>
  <div class="container-navmenu">
    <ul>
      <li><a href="https://www.playrealm.de/home">Home</a></li>
      <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
      <li><a href="https://www.playrealm.de/shop">Shop</a></li>
      <li><a href="https://www.playrealm.de/team">Team</a></li>
      <li><a href="https://www.playrealm.de/news">News</a></li>
      <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
    </ul>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search