locked
boot strap nav bar (multi column) to increase width RRS feed

  • Question

  • User1182587605 posted

    I have a bootstrap navbar, in which I have separated i by 2 columns. Unfortunately, it takes my custom css off in the 2 columns and does not increase the width of the 2 columns. Please check my code and CSS and suggest me something that makes the 2 columns grow width and take my CSS.

     <li class="dropdown">
                                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Reports <span class="caret"></span></a>
                                <ul class="dropdown-menu multi-column column-2">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <ul class="multi-column-dropdown">
                                                <li><a href="javascript:;">Spl. Order – By Locn</a></li>
                                                <li><a href="javascript:;">Spl. Order – All Locns</a></li>
                                                <li><a href="javascript:;">Capacity – By Locn</a></li>
                                                <li><a href="javascript:;">Capacity – All Locns</a></li>
                                                <li><a href="javascript:;">Production Case</a></li>
                                                <li><a href="javascript:;">Overall Perform – Item</a></li>
                                                <li><a href="javascript:;">Overall Perform – Location</a></li>
                                                <li><a href="javascript:;">Overall Perform – DMM</a></li>
                                                <li><a href="javascript:;">Invoice Summary – ALL Locn.</a></li>
                                                <li><a href="javascript:;">Total Billing – All Locn. </a></li>
                                                </ul>
                                            </div>
                                        <div class="col-md-6">
                                            <ul class="multi-column-dropdown">
                                                <li><a href="javascript:;">Locn Pick Slip – Load Priority</a></li>
                                                <li><a href="javascript:;">Projected to Ship – All Locn</a></li>
                                                <li><a href="javascript:;">Retail Sales – Location</a></li>
                                                <li><a href="javascript:;">Retail Sales – All Locn </a></li>
                                                <li><a href="javascript:;">YTD sales – All Items</a></li>
                                                <li><a href="javascript:;">YTD sales – By Item</a></li>
                                                <li><a href="javascript:;">Daily Sales – By Item</a></li>
                                                <li><a href="javascript:;">Store Sales Target plan</a></li>
                                                <li><a href="javascript:;">Weekly Sales by Region</a></li>
                                                </ul> 
                                            </div>
                                    </div> 
                                </ul>
                            </li>

    My CSS is:

    .dropdown-menu {
        	min-width: 200px;
        }
        .dropdown-menu.columns-2 {
        	min-width: 800px;
        }
        .dropdown-menu.columns-3 {
        	min-width: 1200px;
        }
        .dropdown-menu li a {
        	padding: 5px 15px;
        	font-weight: 300;
        }
        .multi-column-dropdown {
        	list-style: none;
        }
        .multi-column-dropdown li a {
        	display: block;
        	clear: both;
        	line-height: 1.428571429;
        	color: #333;
        	white-space: normal;
        }
        .multi-column-dropdown li a:hover {
        	text-decoration: none;
        	color: #262626;
        	background-color: #f5f5f5;
            text-decoration:underline;
        }
         
        @media (max-width: 767px) {
        	.dropdown-menu.multi-column {
        		min-width: 240px !important;
        		overflow-x: hidden;
        	}
        }

    right now, All my navbar content looks mixed up without column separation in the drop down.

    Please help me work on the CSS to increase the width and get my CSS to work on this.

    Monday, February 6, 2017 11:47 AM

Answers

  • User1771544211 posted

    Hi Deepak,

    But unfortunately, even after I do that the width of column-2 does not expand. It is still the same. Please help me in this.

    After I made above change, it works as expected. It seems that the style is overwrite by some other style settings. Please try use the following code and try again.

    .dropdown-menu.column-2 {
        min-width: 800px !important;
    }

    If it still not working, please use Web Developer Tool to check the style setting of the element. The following link shows how to use Web Developer Tool to debug css, please take it as reference.

    Chrome : https://developer.chrome.com/devtools

    IE : https://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx

    Best Regards,

    Jean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 9, 2017 7:38 AM

All replies

  • User1771544211 posted

    Hi acmedeepak,

    .dropdown-menu.columns-2 {

    I checked your HTML code and don't find any element with class name "columns-2", I only find the following HTML code with class name "column-2".

    <ul class="dropdown-menu multi-column column-2">

    Please modify your css code to change the "columns-2" to "column-2".

        .dropdown-menu.column-2 {
        	min-width: 800px;
        }
        .dropdown-menu.column-3 {
        	min-width: 1200px;
        }

    Best Regards,

    Jean

    Tuesday, February 7, 2017 3:28 AM
  • User1182587605 posted

    Thanks for the response Jean Sun,

    But unfortunately, even after I do that the width of column-2 does not expand. It is still the same. Please help me in this.

    Regards,

    Deepak

    Tuesday, February 7, 2017 10:15 AM
  • User1771544211 posted

    Hi Deepak,

    But unfortunately, even after I do that the width of column-2 does not expand. It is still the same. Please help me in this.

    After I made above change, it works as expected. It seems that the style is overwrite by some other style settings. Please try use the following code and try again.

    .dropdown-menu.column-2 {
        min-width: 800px !important;
    }

    If it still not working, please use Web Developer Tool to check the style setting of the element. The following link shows how to use Web Developer Tool to debug css, please take it as reference.

    Chrome : https://developer.chrome.com/devtools

    IE : https://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx

    Best Regards,

    Jean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, February 9, 2017 7:38 AM