Jump to content

Right justified dropdown in menu will not right justify


RRR
 Share

Recommended Posts

Below is an excerpted example from the w3schools website with a right justified on hover dropdown but the dropdown will NOT right justify.  Can someone please assist here?  Thankyou.

 

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Navigation Bar with Dropdown</h2>
  <p>Add a dropdown menu inside the navigation bar:</p>

  <div class="w3-bar w3-light-grey">
    <a href="#" class="w3-bar-item w3-button">Home</a>
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    
    <div class="w3-dropdown-hover w3-right">
      <button class="w3-button">Dropdown</button>
      <div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0">
        <a href="#" class="w3-bar-item w3-button">Link 1</a>
        <a href="#" class="w3-bar-item w3-button">Link 2</a>
        <a href="#" class="w3-bar-item w3-button">Link 3</a>
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

Link to comment
Share on other sites

Solution.

 

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body >

<div class="w3-container" >
      <h2>Navigation Bar with Dropdown</h2>
      <p>Add a dropdown menu inside the navigation bar:</p>

    <div style="position:relative;"> <!-- Enclosing the entire menu in a relative div resolves the issue -->
    
          <div class="w3-bar w3-light-grey">
            <a href="#" class="w3-bar-item w3-button">Home</a>
            <a href="#" class="w3-bar-item w3-button">Link 1</a>

            <div class="w3-dropdown-hover w3-right">
              <button class="w3-button">Dropdown</button>
              <div>                
                <div class="w3-dropdown-content w3-bar-block w3-card-4" style="right:0px;">
                  <a href="#" class="w3-bar-item w3-button">Link 1</a>
                  <a href="#" class="w3-bar-item w3-button">Link 2</a>
                  <a href="#" class="w3-bar-item w3-button">Link 3</a>   
                </div>
              </div>        
            </div>
        </div>
            
    </div>

        
        
</div>

</body>
</html>

Link to comment
Share on other sites

Hello,

To right align the dropdown items, you can add the w3-right-align class to the anchors of the dropdown as shown below:

 

<div class="w3-dropdown-content w3-bar-block w3-card-4">
        <a href="#" class="w3-bar-item w3-button w3-right-align">Link 1</a>
        <a href="#" class="w3-bar-item w3-button w3-right-align">Link 2</a>
        <a href="#" class="w3-bar-item w3-button w3-right-align">Link 3</a>
</div>

Hope this is useful

PascalZ

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...