Can't get mega menu to go full width

Home Forums Older releases 1.0.x Can't get mega menu to go full width

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #3216
    noahfshearer
    Participant

    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>
    #3230
    admin
    Keymaster

    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.

    #3240
    oznog
    Participant

    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.

    #3250
    admin
    Keymaster
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?