Home > Mobile >  Bootstrap navbar [mobile or phone aspect ratio] dropdown menu aligned to left instead of right
Bootstrap navbar [mobile or phone aspect ratio] dropdown menu aligned to left instead of right

Time:08-16

(new to coding)

enter image description here

The bootstrap (mobile) dropdown menu has the list items on the left. Is there any way to align them to the right?

CodePudding user response:

Yes. text-align:right on the relevant ul. You might want to make that under a media query that would limit it to mobile if it changes things for your desktop view.

ul.navbar-nav {
  text-align: right;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<nav >
  <a  href="#">Navbar</a>
  <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span ></span>
  </button>

  <div  id="navbarSupportedContent">
    <ul >
      <li >
        <a  href="#">Home <span >(current)</span></a>
      </li>
      <li >
        <a  href="#">Link</a>
      </li>
      <li >
        <a  href="#" role="button" data-toggle="dropdown" aria-expanded="false">
          Dropdown
        </a>
        <div >
          <a  href="#">Action</a>
          <a  href="#">Another action</a>
          <div ></div>
          <a  href="#">Something else here</a>
        </div>
      </li>
      <li >
        <a >Disabled</a>
      </li>
    </ul>

  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

  • Related