Submenu alignment issue in RTL mode

Question

Submenu alignment issue in RTL mode

I am currently utilizing bootstrap 4.4.1 for my template and I am attempting to implement a right-to-left (RTL) Nav bar for an Arabic website, ensuring the menu displays from right to left.

In my code, the fifth item from the right has a submenu which is not aligning correctly with the left side of the parent menu, as demonstrated in both the example and screenshot. If I add right :0; to the .submenu, it shifts the menu all the way to the extreme right.

Additionally, the menu does not remain open when hovering over it; it simply disappears when trying to move to child items.

I am uncertain about what mistake I might be making...

https://i.sstatic.net/BcFUM.png

The desired menu layout can be observed in the image below:

https://i.sstatic.net/0h59s.jpg

https://codepen.io/KGuide/pen/gOpdLPR

.menu{direction:rtl;}
.header-menu{background:#EEE6D3; min-height:30px; text-align:center;  font-size:18px;}
.header-menu ul {
margin: 0;
list-style: none;
position: relative;
}

... (Code continues)

... (Additional Code continues)

html css twitter-bootstrap nav arabic-support

Answer 1

Answer №1

Simply switch display: inherit; to block.

.header-menu ul li:hover ul {
  display: block;
}

Update: To resolve the quick hover problem, consider removing the top and padding properties from .header-menu ul ul:

.header-menu ul ul {
  display: none;
  position: absolute;
  /* top: 50px */
  background: #eee6d3;
  padding: 0 /* remove padding */
}

https://codepen.io/awran5/pen/vYOzyJm

However, I recommend exploring Bootstrap-rtl

<link href="https://hamidheidarinia.github.io/bootstrap-rtl/4.2/assets/css/bootstrap-rtl.min.css" rel="stylesheet" />
<script src="https://hamidheidarinia.github.io/bootstrap-rtl/4.2/assets/js/jquery.min.js"></script>
<script src="https://hamidheidarinia.github.io/bootstrap-rtl/4.2/assets/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu
                                                                            dropdown-menu-left" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Answer 2

Simply switch display: inherit; to block.

.header-menu ul li:hover ul {
  display: block;
}

Update: To resolve the quick hover problem, consider removing the top and padding properties from .header-menu ul ul:

.header-menu ul ul {
  display: none;
  position: absolute;
  /* top: 50px */
  background: #eee6d3;
  padding: 0 /* remove padding */
}

https://codepen.io/awran5/pen/vYOzyJm

However, I recommend exploring Bootstrap-rtl

<link href="https://hamidheidarinia.github.io/bootstrap-rtl/4.2/assets/css/bootstrap-rtl.min.css" rel="stylesheet" />
<script src="https://hamidheidarinia.github.io/bootstrap-rtl/4.2/assets/js/jquery.min.js"></script>
<script src="https://hamidheidarinia.github.io/bootstrap-rtl/4.2/assets/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu
                                                                            dropdown-menu-left" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Answer 3

Answer №2

Understanding Positioning

The issue at hand revolves around grasping the functionality of CSS properties like position: relative and position: absolute.

When an absolutely positioned element is nested within a relatively positioned container, it leverages the relative positioning to establish its boundaries, offering potential advantages for layout.

To address your specific scenario, consider implementing the following adjustments -

.header-menu ul li {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    position: relative; /* new attribute */
}

.header-menu ul ul {
    display: none;
    position: absolute;
    top: 50px;
    right: 0; /* new attribute */
    padding: 0; /* additional property to prevent style conflicts */
    background: #EEE6D3;
}

By positioning .header-menu ul ul absolutely beneath .header-menu ul li, which has relative positioning, the submenu aligns with its parent's rules and remains anchored to the right. I trust this clarifies your understanding.

Solution for Hover Issues (not applicable anymore but noted for future queries)

In case of the secondary problem regarding hovering over submenu items, consider these solutions -

Avoid adding background directly to .header-menu ul ul
Transfer the background styling to .header-menu ul ul li
Add slight padding to the top of .header-menu ul ul
Reduce the top property of .header-menu ul ul by about 2 pixels`

.header-menu ul ul {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    padding: 2px 0 0 0;
}

.header-menu ul ul li {
    min-width: 150px;
    float: none;
    display: list-item;
    position: relative;
    background: #EEE6D3;
}

Explanation: The challenge arises from losing hover state when moving over submenu items. The provided code aims to maintain continuous focus on the submenu by adjusting its positioning and padding to keep the cursor within the menu structure.

By staying within the hierarchical boundaries while hovering, the submenu items remain visible without disappearing abruptly.

Codepen Example: https://codepen.io/ardethian/pen/MWwqbQM

Answer 4

Understanding Positioning

The issue at hand revolves around grasping the functionality of CSS properties like position: relative and position: absolute.

When an absolutely positioned element is nested within a relatively positioned container, it leverages the relative positioning to establish its boundaries, offering potential advantages for layout.

To address your specific scenario, consider implementing the following adjustments -

.header-menu ul li {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    position: relative; /* new attribute */
}

.header-menu ul ul {
    display: none;
    position: absolute;
    top: 50px;
    right: 0; /* new attribute */
    padding: 0; /* additional property to prevent style conflicts */
    background: #EEE6D3;
}

By positioning .header-menu ul ul absolutely beneath .header-menu ul li, which has relative positioning, the submenu aligns with its parent's rules and remains anchored to the right. I trust this clarifies your understanding.

Solution for Hover Issues (not applicable anymore but noted for future queries)

In case of the secondary problem regarding hovering over submenu items, consider these solutions -

Avoid adding background directly to .header-menu ul ul
Transfer the background styling to .header-menu ul ul li
Add slight padding to the top of .header-menu ul ul
Reduce the top property of .header-menu ul ul by about 2 pixels`

.header-menu ul ul {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    padding: 2px 0 0 0;
}

.header-menu ul ul li {
    min-width: 150px;
    float: none;
    display: list-item;
    position: relative;
    background: #EEE6D3;
}

Explanation: The challenge arises from losing hover state when moving over submenu items. The provided code aims to maintain continuous focus on the submenu by adjusting its positioning and padding to keep the cursor within the menu structure.

By staying within the hierarchical boundaries while hovering, the submenu items remain visible without disappearing abruptly.

Codepen Example: https://codepen.io/ardethian/pen/MWwqbQM

Submenu alignment issue in RTL mode

Answer №1

Answer №2

Understanding Positioning

Solution for Hover Issues (not applicable anymore but noted for future queries)

Similar questions

Issue with modal window function on iOS 8

Transferring information from Django function to Javascript without the need for refreshing the page

Customizing Material UI Select for background and focus colors

Upload of file successfully completed even though limit was set; input remains unchanged

Bootstrap 5 introduces an innovative animated hamburger icon that transforms into an X symbol when clicked

I am facing issues with my Angular CRUD application when trying to update data through the API, as it is not functioning properly as a Single

Mobile FPS suffering due to slide-out drawer performance issues

What is the best way to make the block rotate each time the button is clicked?

Is it possible to enable auto play on HTML5 Video for iPad similar to BBC iPlayer?

Using jQuery to retrieve the tag name of the selected element

Tips on concealing and deactivating the fullscreen option in flowplayer

Tips for implementing this code for effective DAO and CRUD operations

Every form submission leads to an increment in the number of ajax calls being made

Angular2 can enhance your webpage with a <div> element that covers the entire screen

Placing a Label Next to an Input Field using Bootstrap 4

Using Data URIs can negatively impact the loading speed of a webpage

Tips on placing two tags within one cell in a HTML Bootstrap table

What could be the reason my checkbox won't check using jQuery?

Achieve consistent column heights with flexbox styling

The Hamburger Menu in the Bootstrap Navbar is failing to collapse