Can't get mega menu to go full width

[noahfshearer]

I am trying to make the mega menu the full length of the navigation. But I can’t get it to farther than the default width.

I tried a few of the solutions in other forum posts and they aren’t working either.

The apparel tab is the mega drop down I’m trying to get to work.

http://drimprint.wjserver590.com/home.jhtm#

<nav class="navbar navbar-custom" role="navigation">
												<!-- Brand and toggle get grouped for better mobile display -->
												<div class="navbar-header">
													<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
														<span class="sr-only">Toggle navigation</span>
														<span class="icon-bar"></span>
														<span class="icon-bar"></span>
														<span class="icon-bar"></span>
													</button>
													<span class="navbar-brand visible-xs">Menu</span>
												</div>
												<!-- Collect the nav links, forms, and other content for toggling -->
												<div class="collapse navbar-collapse">
													<ul class="nav navbar-nav">
														<li class="dropdown">
															<a href="/category/27/Apparel--and--Caps.html">APPAREL</a>
                                                                <ul class="mega-menu dropdown-menu">
                                                                    <li>
                                                                        <div style="width:400px;max-width:100%;">
                                                                          
                                                                        	 <ul class="col-sm-6">
                                                                                <li class="dropdown-header">Dresses</li>
                                                                                <li><a href="#">Unique Features</a></li>
                                                                                <li><a href="#">Image Responsive</a></li>
                                                                                <li><a href="#">Auto Carousel</a></li>
                                                                                <li><a href="#">Newsletter Form</a></li>
                                                                                <li><a href="#">Four columns</a></li>
                                                                                <li class="divider"></li>
                                                                                <li class="dropdown-header">Tops</li>
                                                                                <li><a href="#">Good Typography</a></li>
                                                                              </ul>
                                                                           
                                                                             
                                                                         <ul class="col-sm-6">
                                                                            <li class="dropdown-header">Dresses</li>
                                                                            <li><a href="#">Unique Features</a></li>
                                                                            <li><a href="#">Image Responsive</a></li>
                                                                            <li><a href="#">Auto Carousel</a></li>
                                                                            <li><a href="#">Newsletter Form</a></li>
                                                                            <li><a href="#">Four columns</a></li>
                                                                            <li class="divider"></li>
                                                                            <li class="dropdown-header">Tops</li>
                                                                            <li><a href="#">Good Typography</a></li>
                                                                          </ul>
                                                                          
                                                                    	</div>
                                                                    </li>
                                                                </ul>
														</li>
														<li class="dropdown">
															<a href="#">CHARGER</a>
														</li>
														<li class="dropdown">
															<a href="#">HEADPHONES</a>
														</li>
														<li class="dropdown">
															<a href="#">DATA CABLE</a>
														</li>
														<li class="dropdown">
															<a href="#">
																CATAGORY 1 <b class="caret"></b>
															</a>
															<ul class="dropdown-menu">
																<li><a href="#">Link</a></li>
																<li><a href="#">Another Link</a></li>
															</ul>
														</li>
														<li class="dropdown">
															<a href="#">
																CATAGORY 2 <b class="caret"></b>
															</a>
															<ul class="dropdown-menu">
																<li><a href="#">Link</a></li>
																<li><a href="#">Another Link</a></li>
															</ul>
														</li>
														<li class="dropdown">
															<a href="/category/861/Brands.html">Brands</a>
														</li>
													</ul>
												</div><!-- /.navbar-collapse -->
											</nav>

[admin]

Sorry for the late reply! Please let me know if this is still relevant. I don’t see the SmartMenus script being used on the page you posted.

[oznog]

Hi,

Good question. Here the original mega menu. Changing « width:400px; » for « width:100%; » do nothing. I try change the li, ul or inside <div> width without result.

<li><a href="#">Mega menu</a>
      <ul class="mega-menu">
        <li>
          <!-- The mega drop down contents -->
          <div style="width:400px;max-width:100%;">
            <div style="padding:5px 24px;">
              <p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
              <p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
  	  </div>
  	</div>
        </li>
      </ul>
    </li>

I whant to change the width : 800px, dynamic width or full wide mega menu.

Thanks a lot.

[admin]

Take a look at the following topic:

http://www.smartmenus.org/forums/topic/mega-menu-full-width-of-parent-element/

[Author]

Posts