Cannot Make Max-Width Work with Bootstrap Dropdown-Menu

How to make bootstrap dropdown not change width with different text or not impact other elements?

Add a width to your button class, as follows, this will stop it from changing depending on the value that is selected.

.btn-success {
    width:250px;
    max-width:100%;
}

https://jsfiddle.net/0yur1s42/

Increase bootstrap dropdown menu width

Add the following css class

.dropdown-menu {
    width: 300px !important;
    height: 400px !important;
}

Of course you can use what matches your need.

Dropdown Menu that takes full width inside a Max Width Container

Remove position: relative from nav.

If the parent's position is set to relative, a child element with position: absolute assumes an absolute position relative to its parent.

.max{ max-width:500px;   margin: 0 auto;}nav {  text-align:center;  width: 100%;  background: #bebebe;  padding: 0;  margin: 0;  height: 60px;}
nav ul {  background: #bebebe;  list-style:none;  padding:0 20px;  margin: 0;  height: 60px;
}

nav ul li {  display: inline-block;}

nav ul li a {  color:#333333;  display:block;  padding:0px 40px;  text-decoration:none;  float: left;  height: 60px;   line-height: 60px;}
nav ul li:hover {  background: #333333;}

nav ul li:hover > a{    color:#FFFFFF;}
nav ul li:hover > ul {  display:block;}
nav ul ul {  background: red;  padding:0;  text-align: center;  display:none;   width: 100vw;  position: absolute;  top: 60px;  left:-0px;  right:0px;    }

<div class="max">  <nav>    <ul>      <li><a href="#">Home</a></li>      <li><a href="#">Tutorials</a>        <ul>          <li><a href="#">Photoshop</a>             </li>          <li><a href="#">Illustrator</a>           </li>        </ul>      </li>      <li><a href="#">User Experience</a></li>    </ul>  </nav>

Make Bootstrap dropdown menu full width of device and stop icon from moving

.dropdown .dropdown-menu {
    left: auto;
    right: 5px;
    position: absolute;
    width: calc( 100vw - 5px );
    margin : auto ;
}

Add this style to avoid jumping of the menu button...
I have written this code by referring your live website ( http://m.elysiumrpg.com/index.php ).

100vw means 100% of viewport width.

---

Related Topics