Jump to content
ideasvacuum

W3 CSS Mobile

Recommended Posts

Horizontal_OK.png

Dropdown%20button%20set%20left.png

 

Following this snippet:

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_ref_dropdown_menu2

As-is, the example works perfectly, but if edited for mobile (w3-mobile), all the buttons are stacked vertically in a narrow view port (as designed) but the buttons with dropdowns are not centered like the others - instead, they are justified left, which is incredibly ugly :)

Here is my edit of the code - can anyone tell me what I'm doing wrong?

<!DOCTYPE html
<!-- https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_ref_dropdown_menu2 -->
<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 w3-mobile">Home</a>
    <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
    <div class="w3-dropdown-hover">
      <button class="w3-button w3-mobile">Dropdown</button>
      <div class="w3-dropdown-content w3-bar-block w3-card-4">
        <a href="#" class="w3-bar-item w3-button">Link A</a>
        <a href="#" class="w3-bar-item w3-button">Link B</a>
        <a href="#" class="w3-bar-item w3-button">Link C</a>
      </div>
    </div>
    <a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
    <a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
  </div>
</div>

</body>
</html>

Share this post


Link to post
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

×