-1

I am using this template https://colorlib.com/preview/#ashion and I need to convert its menu of single column into multiple column (mega menu) (click pages and dropdown menu of single column appears) which works in responsive version as well. it is using Bootstrap 4 I tried but it did not work what I have tried

CSS

.header {
    background: #ffffff;
    -webkit-box-shadow: 0px 5px 10px rgba(91, 91, 91, 0.1);
    box-shadow: 0px 5px 10px rgba(91, 91, 91, 0.1);
}

.header__logo {
    padding: 26px 0;
}

.header__logo a {
    display: inline-block;
}

.header__menu {
    padding: 30px 0 27px;
}

.header__menu ul li {
    list-style: none;
    display: inline-block;
    margin-right: 40px;
    position: relative;
}

.header__menu ul li.active a:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.header__menu ul li:hover a:after {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.header__menu ul li:hover .dropdown {
    top: 27px;
    opacity: 1;
    visibility: visible;
}

.header__menu ul li:last-child {
    margin-right: 0;
}

.header__menu ul li .dropdown {
    position: absolute;
    left: 0;
    top: 56px;
    width: 150px;
    background: #111111;
    text-align: left;
    padding: 2px 0;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
    display: block;
    margin-right: 0;
}

.header__menu ul li .dropdown li a {
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
    padding: 8px 20px;
    text-transform: capitalize;
}

.header__menu ul li .dropdown li a:after {
    display: none;
}

.header__menu ul li a {
    font-size: 15px;
    text-transform: uppercase;
    color: #111111;
    font-weight: 500;
    display: block;
    padding: 2px 0;
    position: relative;
}

.header__menu ul li a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #ca1515;
    content: "";
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.header__right {
    text-align: right;
    padding: 30px 0 27px;
}

.header__right__auth {
    display: inline-block;
    margin-right: 25px;
}

.header__right__auth a {
    font-size: 12px;
    color: #666666;
    position: relative;
    margin-right: 8px;
}

.header__right__auth a:last-child {
    margin-right: 0;
}

.header__right__auth a:last-child:after {
    display: none;
}

.header__right__auth a:after {
    position: absolute;
    right: -8px;
    top: -2px;
    content: "/";
    font-size: 13px;
}

.header__right__widget {
    display: inline-block;
}

.header__right__widget li {
    list-style: none;
    display: inline-block;
    font-size: 18px;
    color: #111111;
    margin-right: 20px;
    cursor: pointer;
}

.header__right__widget li:last-child {
    margin-right: 0;
}

.header__right__widget li a {
    font-size: 18px;
    color: #111111;
    position: relative;
}

.header__right__widget li a .tip {
    position: absolute;
    right: -12px;
    top: -11px;
    height: 18px;
    width: 18px;
    background: #111111;
    font-size: 10px;
    font-weight: 500;
    color: #ffffff;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
}

.offcanvas-menu-wrapper {
    display: none;
}

.canvas__open {
    display: none;
}

the html is

 <div class="col-xl-6 col-lg-7">
   <nav class="header__menu">
       <ul>
           <li class="active"><a href="./index.html">Home</a></li>
           <li><a href="#">Women’s</a></li>
           <li><a href="#">Men’s</a></li>
           <li><a href="./shop.html">Shop</a></li>
           <li><a href="#">Pages</a>
               <ul class="dropdown">
                   <li><a href="./product-details.html">Product Details</a></li>
                   <li><a href="./shop-cart.html">Shop Cart</a></li>
                   <li><a href="./checkout.html">Checkout</a></li>
                   <li><a href="./blog-details.html">Blog Details</a></li>
               </ul>
           </li>
           <li><a href="./blog.html">Blog</a></li>
           <li><a href="./contact.html">Contact</a></li>
       </ul>
   </nav>
</div>

Can someone help me with this I have tried but I am making a mess it is not working?

KeenLearner
  • 53
  • 1
  • 9
  • Do you plan on using Bootstrap for your whole website or just for parts of it? – avia Sep 09 '20 at 18:13
  • Also, what do you mean 3 columns? You want for example Home on top of Women's that would be on top of Men's ? There are better cleaner ways to make your menu responsive I think. Have a look at this for example https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors – avia Sep 09 '20 at 18:15
  • yes I plan to use bootstrap 3 columns like here https://alijafarian.com/demos/bootstrap-multi-column-dropdown-menu/ – KeenLearner Sep 09 '20 at 18:31
  • May I suggest using a more recent version of Bootstrap? They still have similar templates for 3 columns dropdown nav menus too. – avia Sep 09 '20 at 18:45
  • it is using bootstrap4, this is the template i want to edit https://colorlib.com/preview/#ashion under pages it is dropdown menu with one column i want it 3 column like here https://alijafarian.com/demos/bootstrap-multi-column-dropdown-menu/ click 3 column – KeenLearner Sep 09 '20 at 18:48
  • ok give me 1 minute I'll post a template for you – avia Sep 09 '20 at 18:49
  • thank you please see original post edited – KeenLearner Sep 09 '20 at 18:51

1 Answers1

1

Codepen to play with: https://codepen.io/larrytherabbit/pen/rNedewJ

So, here is a template, you will have to play with it and insert your own values and links, and remove/add what you don't need/need.

The libraries used:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js

HTML

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Logo</a>
    </div>
    <!--/.navbar-header-->
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">One Column <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>
                <ul class="dropdown-menu multi-column columns-2">
                    <div class="row">
                        <div class="col-sm-6">
                            <ul class="multi-column-dropdown">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </div>
                        <div class="col-sm-6">
                            <ul class="multi-column-dropdown">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </div>
                    </div>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Three Column <b class="caret"></b></a>
                <ul class="dropdown-menu multi-column columns-3">
                    <div class="row">
                        <div class="col-sm-4">
                            <ul class="multi-column-dropdown">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </div>
                        <div class="col-sm-4">
                            <ul class="multi-column-dropdown">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </div>
                        <div class="col-sm-4">
                            <ul class="multi-column-dropdown">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </div>
                    </div>
                </ul>
            </li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
    <!--/.navbar-collapse-->
</nav>
<!--/.navbar-->

CSS


.dropdown-menu {
    min-width: 200px;
}
.dropdown-menu.columns-2 {
    min-width: 400px;
}
.dropdown-menu.columns-3 {
    min-width: 600px;
}
.dropdown-menu li a {
    padding: 5px 15px;
    font-weight: 300;
}
.multi-column-dropdown {
    list-style: none;
  margin: 0px;
  padding: 0px;
}
.multi-column-dropdown li a {
    display: block;
    clear: both;
    line-height: 1.428571429;
    color: #FF8803;
    white-space: normal;
}
.multi-column-dropdown li a:hover {
    text-decoration: none;
    color: #262626;
    background-color: #999;
}
 
@media (max-width: 767px) {
    .dropdown-menu.multi-column {
        min-width: 240px !important;
        overflow-x: hidden;
    }
}
avia
  • 1,527
  • 7
  • 19
  • Glad I could help! – avia Sep 09 '20 at 19:09
  • I have included link to the template i am trying to edit [link](https://colorlib.com/preview/#ashion) I am having a difficulty integrating your given code to his template, it is changing the complete style i just want this theme menu bar when you click "pages" to have 3 column instead of 1 , I hope am making sense – KeenLearner Sep 09 '20 at 20:09
  • i have edited original question, perhaps might make some sense now – KeenLearner Sep 09 '20 at 20:19