HTML & CSS How to convert this boot strap drop down menu to mega menu

mariag · Sep 7, 2020

Code:

/* Template default CSS

html,
body {
    height: 100%;
    font-family: "Montserrat", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #111111;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
}

h1 {
    font-size: 70px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p {
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    color: #666666;
    font-weight: 400;
    line-height: 24px;
    margin: 0 0 15px 0;
}

img {
    max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}

ul,
ol {
    padding: 0;
    margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
    margin-bottom: 45px;
}

.section-title h4 {
    color: #111111;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.section-title h4:after {
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 70px;
    background: #ca1515;
    content: "";
}

.set-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.spad {
    padding-top: 100px;
    padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
    color: #fff;
}

/* buttons */

.primary-btn {
    display: inline-block;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 12px 30px 10px;
    color: #ffffff;
    background: #ca1515;
}

.site-btn {
    font-size: 14px;
    color: #ffffff;
    background: #ca1515;
    font-weight: 600;
    border: none;
    text-transform: uppercase;
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
}

/* Preloder */

#preloder {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #ffffff;
}

.loader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

.spacial-controls {
    position: fixed;
    width: 111px;
    height: 91px;
    top: 0;
    right: 0;
    z-index: 999;
}

.spacial-controls .search-switch {
    display: block;
    height: 100%;
    padding-top: 30px;
    background: #323232;
    text-align: center;
    cursor: pointer;
}

.search-model {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #ffffff;
    z-index: 99999;
}

.search-model-form {
    padding: 0 15px;
}

.search-model-form input {
    width: 500px;
    font-size: 40px;
    border: none;
    border-bottom: 2px solid #dddddd;
    background: 0 0;
    color: #999;
}

.search-close-switch {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #333;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    font-size: 28px;
    line-height: 28px;
    top: 30px;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.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;
}

/*---------------------
  Banner
-----------------------*/

.banner {
    height: 500px;
}

.banner__text span {
    font-size: 18px;
    color: #ca1515;
    text-transform: uppercase;
}

.banner__text h1 {
    font-size: 80px;
    color: #111111;
    font-family: "Cookie", cursive;
    margin-bottom: 15px;
}

.banner__text a {
    font-size: 14px;
    color: #111111;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    padding: 0 0 3px;
    display: inline-block;
}

.banner__text a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: #ca1515;
    content: "";
}

.banner__slider {
    text-align: center;
    padding: 150px 0 0;
}

.banner__slider.owl-carousel .owl-dots {
    position: absolute;
    left: 0;
    top: 430px;
    width: 100%;
    text-align: center;
}

.banner__slider.owl-carousel .owl-dots button {
    height: 12px;
    width: 12px;
    background: #a1a1a1;
    border-radius: 50%;
    margin-right: 10px;
}

.banner__slider.owl-carousel .owl-dots button.active {
    background: #ca1515;
}

.banner__slider.owl-carousel .owl-dots button:last-child {
    margin-right: 0;
}




/*---------------------
  Shop
-----------------------*/

.shop {
    padding-top: 70px;
    padding-bottom: 80px;
}

.sidebar__categories {
    margin-bottom: 50px;
}

.sidebar__categories .section-title {
    margin-bottom: 35px;
}

.sidebar__categories .section-title h4 {
    font-size: 18px;
}

.categories__accordion .card {
    border: none;
    border-radius: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f2f2f2 !important;
    margin-bottom: 12px;
}

.categories__accordion .card:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none !important;
}

.categories__accordion .card-heading {
    cursor: pointer;
}

.categories__accordion .card-heading a {
    font-size: 14px;
    font-weight: 500;
    color: #111111;
    display: block;
}

.categories__accordion .card-body {
    padding-left: 0;
    padding-top: 6px;
    padding-bottom: 0;
}

.categories__accordion .card-body li {
    list-style: none;
    position: relative;
    padding-left: 16px;
}

.categories__accordion .card-body li:before {
    position: absolute;
    left: 4px;
    top: 14px;
    height: 1px;
    width: 4px;
    background: #666666;
    content: "";
}

.categories__accordion .card-body li a {
    font-size: 14px;
    color: #666666;
    line-height: 30px;
}

.categories__accordion .card-heading a:after,
.categories__accordion .card-heading>a.active[aria-expanded=false]:after {
    content: "";
    font-size: 14px;
    font-family: "FontAwesome";
    color: #666666;
    position: absolute;
    right: 30px;
    top: 0px;
}

.categories__accordion .card-heading.active a:after {
    content: "";
    font-size: 14px;
    font-family: "FontAwesome";
    color: #666666;
    position: absolute;
    right: 30px;
    top: -1px;
}

.categories__accordion .card-heading a[aria-expanded=true]:after,
.categories__accordion .card-heading>a.active:after {
    content: "";
    font-size: 14px;
    font-family: "FontAwesome";
    color: #666666;
    position: absolute;
    right: 30px;
    top: -1px;
}

.sidebar__filter {
    position: relative;
    margin-bottom: 60px;
}

.sidebar__filter .section-title {
    margin-bottom: 50px;
}

.sidebar__filter .section-title h4 {
    font-size: 18px;
}

.sidebar__filter a {
    font-size: 14px;
    color: #0d0d0d;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    display: inline-block;
    padding: 5px 16px 5px 24px;
    border: 2px solid #ff0000;
    position: absolute;
    right: 0;
    bottom: -5px;
    border-radius: 2px;
}

.filter-range-wrap .range-slider .price-input {
    position: relative;
}

.filter-range-wrap .range-slider .price-input p {
    font-size: 16px;
    color: #0d0d0d;
    font-weight: 500;
    display: inline-block;
    margin-bottom: 0;
}

.filter-range-wrap .range-slider .price-input:after {
    position: absolute;
    left: 81px;
    top: 12px;
    height: 1px;
    width: 5px;
    background: #0d0d0d;
    content: "";
}

.filter-range-wrap .range-slider .price-input input {
    font-size: 16px;
    color: #0d0d0d;
    max-width: 16%;
    border: none;
}

.filter-range-wrap .range-slider .price-input input:nth-child(1) {
    margin-right: 28px;
}

.filter-range-wrap .price-range {
    border-radius: 0;
    margin-bottom: 28px;
}

.filter-range-wrap .price-range.ui-widget-content {
    border: none;
    background: rgba(0, 0, 0, 0.1);
    height: 5px;
}

.filter-range-wrap .price-range.ui-widget-content .ui-slider-handle {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #ca1515;
    border: none;
    outline: none;
    cursor: pointer;
}

.filter-range-wrap .price-range .ui-slider-range {
    background: #ca1515;
    border-radius: 0;
}

.sidebar__sizes,
.sidebar__color {
    margin-bottom: 40px;
}

.sidebar__sizes .section-title,
.sidebar__color .section-title {
    margin-bottom: 35px;
}

.sidebar__sizes .section-title h4,
.sidebar__color .section-title h4 {
    font-size: 18px;
}

.sidebar__sizes .size__list label,
.sidebar__color .size__list label {
    display: block;
    padding-left: 20px;
    font-size: 14px;
    text-transform: uppercase;
    color: #444444;
    position: relative;
    cursor: pointer;
}

.sidebar__sizes .size__list label input,
.sidebar__color .size__list label input {
    position: absolute;
    visibility: hidden;
}

.sidebar__sizes .size__list label input:checked~.checkmark,
.sidebar__color .size__list label input:checked~.checkmark {
    border-color: #ca1515;
}

.sidebar__sizes .size__list label input:checked~.checkmark:after,
.sidebar__color .size__list label input:checked~.checkmark:after {
    border-color: #ca1515;
    opacity: 1;
}

.sidebar__sizes .size__list label .checkmark,
.sidebar__color .size__list label .checkmark {
    position: absolute;
    left: 0;
    top: 4px;
    height: 10px;
    width: 10px;
    border: 1px solid #444444;
    border-radius: 2px;
}

.sidebar__sizes .size__list label .checkmark:after,
.sidebar__color .size__list label .checkmark:after {
    position: absolute;
    left: 0px;
    top: -2px;
    width: 11px;
    height: 5px;
    border: solid #ffffff;
    border-width: 1.5px 1.5px 0px 0px;
    -webkit-transform: rotate(127deg);
    -ms-transform: rotate(127deg);
    transform: rotate(127deg);
    opacity: 0;
    content: "";
}

.sidebar__color .color__list label {
    text-transform: capitalize;
}

.pagination__option a {
    display: inline-block;
    height: 40px;
    width: 40px;
    border: 1px solid #f2f2f2;
    border-radius: 50%;
    font-size: 14px;
    color: #111111;
    font-weight: 600;
    line-height: 40px;
    text-align: center;
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
    margin-right: 6px;
}

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

.pagination__option a i {
    font-weight: 600;
}

.pagination__option a:hover {
    background: #0d0d0d;
    border-color: #0d0d0d;
    color: #ffffff;
}

/*---------------------
  Product Details
-----------------------*/

.product-details {
    padding-top: 70px;
    padding-bottom: 50px;
}

.product__details__pic {
    overflow: hidden;
}

.product__details__pic__left {
    width: 22%;
    max-height: 574px;
    float: left;
    overflow-y: auto;
}

.product__details__pic__left .pt {
    display: block;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
}

.product__details__pic__left .pt::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.product__details__pic__left .pt.active::after {
    opacity: 0.3;
}

.product__details__pic__left .pt:last-child {
    margin-bottom: 0;
}

.product__details__pic__left .pt img {
    min-width: 100%;
}

.product__details__slider__content {
    width: calc(78% - 20px);
    float: left;
    margin-left: 20px;
}

.product__details__pic__slider.owl-carousel .owl-nav button {
    position: absolute;
    left: 10px;
    top: 50%;
    font-size: 22px;
    color: #111111;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    line-height: 44px;
    text-align: center;
    margin-top: -20px;
}

.product__details__pic__slider.owl-carousel .owl-nav button.owl-next {
    left: auto;
    right: 10px;
}

.product__details__text h3 {
    color: #111111;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.product__details__text h3 span {
    display: block;
    font-size: 14px;
    color: #444444;
    text-transform: none;
    font-weight: 400;
    margin-top: 5px;
}

.product__details__text .rating {
    margin-bottom: 16px;
}

.product__details__text .rating i {
    font-size: 12px;
    color: #e3c01c;
    margin-right: -4px;
}

.product__details__text .rating span {
    font-size: 12px;
    color: #666666;
    margin-left: 5px;
}

.product__details__text p {
    color: #444444;
    margin-bottom: 28px;
}

.product__details__price {
    font-size: 30px;
    font-weight: 600;
    color: #ca1515;
    margin-bottom: 30px;
}

.product__details__price span {
    font-size: 18px;
    color: #b1b0b0;
    text-decoration: line-through;
    margin-left: 10px;
    display: inline-block;
}

.quantity {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.quantity>span {
    font-size: 14px;
    color: #111111;
    font-weight: 600;
    float: left;
    margin-top: 14px;
    margin-right: 15px;
}

.pro-qty {
    height: 50px;
    width: 150px;
    border: 1px solid #ebebeb;
    border-radius: 50px;
    padding: 0 20px;
    overflow: hidden;
    display: inline-block;
}

.pro-qty .qtybtn {
    font-size: 14px;
    color: #666666;
    cursor: pointer;
    float: left;
    width: 12px;
    line-height: 46px;
}

.pro-qty input {
    font-size: 14px;
    color: #666666;
    font-weight: 500;
    border: none;
    float: left;
    width: 84px;
    text-align: center;
    height: 48px;
}

.product__details__button {
    overflow: hidden;
    margin-bottom: 25px;
}

.product__details__button .cart-btn {
    display: inline-block;
    font-size: 14px;
    color: #ffffff;
    background: #ca1515;
    font-weight: 600;
    text-transform: uppercase;
    padding: 14px 30px 15px;
    border-radius: 50px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.product__details__button ul {
    float: left;
}

.product__details__button ul li {
    list-style: none;
    display: inline-block;
    margin-right: 5px;
}

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

.product__details__button ul li a {
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid #ebebeb;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    padding-top: 1px;
}

.product__details__button ul li a span {
    font-size: 18px;
    color: #666666;
}

.product__details__widget {
    border-top: 1px solid #ebebeb;
    padding-top: 35px;
}

.product__details__widget ul li {
    list-style: none;
    margin-bottom: 10px;
}

.product__details__widget ul li:last-child {
    margin-bottom: 0;
}

.product__details__widget ul li span {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #111111;
    width: 150px;
    float: left;
}

.product__details__widget ul li .stock__checkbox {
    overflow: hidden;
}

.product__details__widget ul li .stock__checkbox label {
    display: block;
    padding-left: 20px;
    font-size: 14px;
    color: #666666;
    position: relative;
    cursor: pointer;
}

.product__details__widget ul li .stock__checkbox label input {
    position: absolute;
    visibility: hidden;
}

.product__details__widget ul li .stock__checkbox label input:checked~.checkmark {
    border-color: #ca1515;
}

.product__details__widget ul li .stock__checkbox label input:checked~.checkmark:after {
    border-color: #ca1515;
    opacity: 1;
}

.product__details__widget ul li .stock__checkbox label .checkmark {
    position: absolute;
    left: 0;
    top: 5px;
    height: 10px;
    width: 10px;
    border: 1px solid #444444;
    border-radius: 2px;
}

.product__details__widget ul li .stock__checkbox label .checkmark:after {
    position: absolute;
    left: 0px;
    top: -2px;
    width: 11px;
    height: 5px;
    border: solid #ffffff;
    border-width: 1.5px 1.5px 0px 0px;
    -webkit-transform: rotate(127deg);
    -ms-transform: rotate(127deg);
    transform: rotate(127deg);
    opacity: 0;
    content: "";
}

.product__details__widget ul li .color__checkbox label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin-right: 20px;
}

.product__details__widget ul li .color__checkbox label.active input~.checkmark:after {
    border-color: #ffffff;
    opacity: 1;
}

.product__details__widget ul li .color__checkbox label:last-child {
    margin-right: 0;
}

.product__details__widget ul li .color__checkbox label input {
    position: absolute;
    visibility: hidden;
}

.product__details__widget ul li .color__checkbox label input:checked~.checkmark:after {
    border-color: #ffffff;
    opacity: 1;
}

.product__details__widget ul li .color__checkbox label .checkmark {
    position: absolute;
    left: 0;
    top: -10px;
    height: 20px;
    width: 20px;
    background: #e31e2f;
    border-radius: 50%;
    content: "";
}

.product__details__widget ul li .color__checkbox label .checkmark.black-bg {
    background: #111111;
}

.product__details__widget ul li .color__checkbox label .checkmark.grey-bg {
    background: #e4aa8b;
}

.product__details__widget ul li .color__checkbox label .checkmark:after {
    position: absolute;
    left: 3px;
    top: 5px;
    width: 13px;
    height: 6px;
    border: solid #ffffff;
    border-width: 1.5px 1.5px 0px 0px;
    -webkit-transform: rotate(127deg);
    -ms-transform: rotate(127deg);
    transform: rotate(127deg);
    opacity: 0;
    content: "";
}

.product__details__widget ul li .size__btn label {
    font-size: 14px;
    color: #666666;
    text-transform: uppercase;
    cursor: pointer;
    margin-right: 10px;
    display: inline-block;
    margin-bottom: 0;
}

.product__details__widget ul li .size__btn label:last-child {
    margin-right: 0;
}

.product__details__widget ul li .size__btn label.active {
    color: #ca1515;
}

.product__details__widget ul li .size__btn label input {
    position: absolute;
    visibility: hidden;
}

.product__details__widget ul li p {
    margin-bottom: 0;
    color: #666666;
}

.product__details__tab {
    padding-top: 80px;
    margin-bottom: 65px;
}

.nav {
    border-bottom: none;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    margin-bottom: 40px;
}

.nav::before {
    position: absolute;
    left: 0;
    top: 13px;
    height: 1px;
    width: 335px;
    background: #e1e1e1;
    content: "";
}

.nav::after {
    position: absolute;
    right: 0;
    top: 13px;
    height: 1px;
    width: 335px;
    background: #e1e1e1;
    content: "";
}

.nav-item {
    margin-right: 46px;
}

.nav-item:last-child {
    margin-right: 0;
}

.nav-item .nav-link {
    font-size: 18px;
    color: #666666;
    font-weight: 600;
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0;
}

.nav-item .nav-link.active {
    color: #111111;
}

.tab-content .tab-pane h6 {
    color: #666666;
    font-weight: 600;
    margin-bottom: 24px;
}

.tab-content .tab-pane p:last-child {
    margin-bottom: 0;
}

.related__title h5 {
    font-size: 20px;
    color: #111111;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 35px;
}





/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1600px) and (max-width: 1900px) {
    .header {
        padding: 0 85px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .header__menu ul li {
        margin-right: 20px;
    }
    .header {
        padding: 0 30px;
    }
}

@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header__menu ul li {
        margin-right: 20px;
    }
    .header__right__auth {
        margin-right: 5px;
    }
    .sidebar__filter a {
        padding: 5px 15px 5px 15px;
    }
    .nav::before {
        width: 240px;
    }
    .nav::after {
        width: 240px;
    }
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .filter__controls li {
        margin-right: 15px;
    }
    .discount__pic img {
        height: auto;
    }
    .discount__text {
        height: auto;
    }
    .sidebar__filter a {
        position: relative;
        bottom: 0;
    }
    .filter-range-wrap .range-slider .price-input input {
        max-width: 27%;
    }
    .filter-range-wrap .range-slider .price-input {
        margin-bottom: 20px;
    }
    .product__details__pic {
        margin-bottom: 50px;
    }
    .nav::before {
        width: 125px;
    }
    .nav::after {
        width: 125px;
    }
    .discount__content {
        margin-bottom: 40px;
    }
    .checkout__order {
        margin-top: 20px;
    }
    .blog__sidebar {
        padding-left: 0;
    }
    .canvas__open {
        display: block;
        font-size: 22px;
        color: #222;
        height: 35px;
        width: 35px;
        line-height: 35px;
        text-align: center;
        border: 1px solid #323232;
        border-radius: 2px;
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 24px;
    }
    .offcanvas-menu-overlay {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        content: "";
        z-index: 98;
        -webkit-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        transition: all, 0.5s;
        visibility: hidden;
    }
    .offcanvas-menu-overlay.active {
        visibility: visible;
    }
    .offcanvas-menu-wrapper {
        position: fixed;
        left: -300px;
        width: 300px;
        height: 100%;
        background: #ffffff;
        padding: 90px 20px 30px 30px;
        display: block;
        z-index: 99;
        overflow-y: auto;
        -webkit-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        transition: all, 0.5s;
        opacity: 0;
    }
    .offcanvas-menu-wrapper.active {
        opacity: 1;
        left: 0;
    }
    .offcanvas__close {
        position: absolute;
        width: 40px;
        height: 40px;
        right: 30px;
        top: 25px;
        border: 1px solid #ddd;
        border-radius: 50%;
        font-size: 26px;
        text-align: center;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        cursor: pointer;
    }
    .offcanvas__menu {
        display: none;
    }
    .slicknav_btn {
        display: none;
    }
    .slicknav_menu {
        background: transparent;
        padding: 0;
        margin-bottom: 20px;
    }
    .slicknav_nav ul {
        margin: 0;
    }
    .slicknav_nav .slicknav_row,
    .slicknav_nav a {
        padding: 7px 0;
        margin: 0;
        color: #111111;
        font-weight: 600;
    }
    .slicknav_nav .slicknav_row:hover {
        border-radius: 0;
        background: transparent;
        color: #111111;
    }
    .slicknav_nav a:hover {
        border-radius: 0;
        background: transparent;
        color: #111111;
    }
    .slicknav_nav {
        display: block !important;
    }
    .offcanvas__logo {
        margin-bottom: 25px;
    }
    .offcanvas__widget {
        text-align: center;
        margin-bottom: 20px;
    }
    .offcanvas__widget li {
        list-style: none;
        display: inline-block;
        font-size: 18px;
        color: #111111;
        margin-right: 20px;
        cursor: pointer;
    }
    .offcanvas__widget li:last-child {
        margin-right: 0;
    }
    .offcanvas__widget li a {
        font-size: 18px;
        color: #111111;
        position: relative;
    }
    .offcanvas__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__auth a {
        font-size: 15px;
        color: #111111;
        position: relative;
        margin-right: 8px;
        font-weight: 500;
    }
    .offcanvas__auth a:last-child {
        margin-right: 0;
    }
    .offcanvas__auth a:last-child:after {
        display: none;
    }
    .offcanvas__auth a:after {
        position: absolute;
        right: -8px;
        top: -2px;
        content: "/";
        font-size: 13px;
    }
    .header__menu {
        display: none;
    }
    .header__right {
        display: none;
    }
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
    .canvas__open {
        display: block;
        font-size: 22px;
        color: #222;
        height: 35px;
        width: 35px;
        line-height: 35px;
        text-align: center;
        border: 1px solid #323232;
        border-radius: 2px;
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 24px;
    }
    .offcanvas-menu-overlay {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.7);
        content: "";
        z-index: 98;
        -webkit-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        transition: all, 0.5s;
        visibility: hidden;
    }
    .offcanvas-menu-overlay.active {
        visibility: visible;
    }
    .offcanvas-menu-wrapper {
        position: fixed;
        left: -270px;
        width: 270px;
        height: 100%;
        background: #ffffff;
        padding: 90px 20px 30px 30px;
        display: block;
        z-index: 99;
        overflow-y: auto;
        -webkit-transition: all, 0.5s;
        -o-transition: all, 0.5s;
        transition: all, 0.5s;
        opacity: 0;
    }
    .offcanvas-menu-wrapper.active {
        opacity: 1;
        left: 0;
    }
    .offcanvas__close {
        position: absolute;
        width: 40px;
        height: 40px;
        right: 30px;
        top: 25px;
        border: 1px solid #ddd;
        border-radius: 50%;
        font-size: 26px;
        text-align: center;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        cursor: pointer;
    }
    .offcanvas__menu {
        display: none;
    }
    .slicknav_btn {
        display: none;
    }
    .slicknav_menu {
        background: transparent;
        padding: 0;
        margin-bottom: 20px;
    }
    .slicknav_nav ul {
        margin: 0;
    }
    .slicknav_nav .slicknav_row,
    .slicknav_nav a {
        padding: 7px 0;
        margin: 0;
        color: #111111;
        font-weight: 600;
    }
    .slicknav_nav .slicknav_row:hover {
        border-radius: 0;
        background: transparent;
        color: #111111;
    }
    .slicknav_nav a:hover {
        border-radius: 0;
        background: transparent;
        color: #111111;
    }
    .slicknav_nav {
        display: block !important;
    }
    .offcanvas__logo {
        margin-bottom: 25px;
    }
    .offcanvas__widget {
        text-align: center;
        margin-bottom: 20px;
    }
    .offcanvas__widget li {
        list-style: none;
        display: inline-block;
        font-size: 18px;
        color: #111111;
        margin-right: 20px;
        cursor: pointer;
    }
    .offcanvas__widget li:last-child {
        margin-right: 0;
    }
    .offcanvas__widget li a {
        font-size: 18px;
        color: #111111;
        position: relative;
    }
    .offcanvas__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__auth a {
        font-size: 15px;
        color: #111111;
        position: relative;
        margin-right: 8px;
        font-weight: 500;
    }
    .offcanvas__auth a:last-child {
        margin-right: 0;
    }
    .offcanvas__auth a:last-child:after {
        display: none;
    }
    .offcanvas__auth a:after {
        position: absolute;
        right: -8px;
        top: -2px;
        content: "/";
        font-size: 13px;
    }
    .header__menu {
        display: none;
    }
    .header__right {
        display: none;
    }
    .filter__controls {
        text-align: left;
        margin-bottom: 40px;
    }
    .filter__controls li {
        margin-right: 20px;
    }
    .discount__pic img {
        height: auto;
    }
    .discount__text {
        padding: 75px 40px 50px;
        height: auto;
    }
    .product__details__pic__left {
        height: auto;
    }
    .product__details__pic {
        margin-bottom: 30px;
    }
    .quantity {
        float: none;
        margin-right: 0;
    }
    .nav::before {
        display: none;
    }
    .nav::after {
        display: none;
    }
    .shop__cart__table {
        overflow-x: auto;
    }
    .shop__cart__table tbody tr .cart__product__item img {
        float: none;
        margin-right: 0;
    }
    .cart__btn {
        text-align: center;
        margin-bottom: 25px;
    }
    .cart__btn.update__btn {
        text-align: center;
    }
    .discount__content h6 {
        display: block;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .discount__content {
        margin-bottom: 35px;
    }
    .blog__sidebar {
        padding-left: 0;
        padding-top: 40px;
    }
    .contact__content {
        margin-bottom: 40px;
    }
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
    .categories__item.categories__large__item {
        padding-left: 30px;
    }
    .banner__text h1 {
        font-size: 45px;
    }
    .filter__controls li {
        margin-right: 5px;
        margin-bottom: 5px;
    }
    .discount__text {
        padding: 75px 0px 50px;
    }
    .footer__newslatter form {
        text-align: center;
    }
    .footer__newslatter form input {
        margin-bottom: 10px;
    }
    .footer__newslatter form button {
        position: relative;
        right: 0;
        top: 0;
    }
    .product__details__button .cart-btn {
        float: none;
        margin-right: 0;
    }
    .product__details__button ul {
        float: none;
    }
    .nav-item {
        margin-right: 20px;
    }
    .blog__details__item__title {
        margin-right: 30px;
    }
    .blog__comment__item.blog__comment__item--reply {
        padding-left: 0;
    }
    .blog__comment__item__text ul li {
        margin-right: 5px;
    }
    .primary-btn.load-btn {
        padding: 12px 50px 10px;
    }
    .blog__comment__item__pic {
        float: none;
        margin-bottom: 20px;
    }
    .discount__content form {
        width: 100%;
    }
    .search-model-form input {
        width: 100%;
        font-size: 24px;
    }
}

the menu here is simple dropdown 1 column responsive menu, I want to edit it to 3 column dropdown responsive menu and add an icon of arrow beside each item in menu right now it is just underlined

Screenshot_7941×157 31.2 KB

is it possible, I tried getting 3 column dropdown menu from here and applying it

Code:

https://alijafarian.com/tutorial/bootstrap-multi-column-dropdown-menu/

but it did not work

please help !
thank you so much in advance
Maria

Tealk · Sep 8, 2020

The html template would be of advantage, otherwise you have to guess how the navigation is structured.

mariag · Sep 8, 2020

here it is

Code:

    <!-- Header Section Begin -->
    <header class="header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-3 col-lg-2">
                    <div class="header__logo">
                        <a href="./index.html"><img src="img/logo.png" alt=""></a>
                    </div>
                </div>
                <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>
                <div class="col-lg-3">
                    <div class="header__right">
                        <div class="header__right__auth">
                            <a href="#">Login</a>
                            <a href="#">Register</a>
                        </div>
                        <ul class="header__right__widget">
                            <li><span class="icon_search search-switch"></span></li>
                            <li><a href="#"><span class="icon_heart_alt"></span>
                                <div class="tip">2</div>
                            </a></li>
                            <li><a href="#"><span class="icon_bag_alt"></span>
                                <div class="tip">2</div>
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="canvas__open">
                <i class="fa fa-bars"></i>
            </div>
        </div>
    </header>
    <!-- Header Section End -->

Tealk · Sep 8, 2020

It would be much easier if you had all the code, so this is untested now but should look something like this:
Add Fantawesome and this code

HTML:

<li class="dropdownicon"><a href="#">Pages</a>

CSS:

.dropdownicon::after {
    font-family            : 'Font Awesome 5 Free';
    content                : "\f0d7";
}

mariag · Sep 8, 2020

hi, I have this on code pen if this helps

poyaebv

...

codepen.io

mariag · Sep 9, 2020

I am using this template https://colorlib.com/preview/#ashion and I need to convert its menu (navigation bar) 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
multiple columns like they have here https://www.shutterfly.com/

I hope this makes sense?

edenwax · Sep 11, 2020

Ahh I think I understand what you're asking for. Essentially, you want to convert the standard Bootstrap "dropdown" menu into a larger mega-dropdown, something like:

If that's the case, you just need to convert <ul class="dropdown"> to <div class="dropdown">, then fill it out however you want. In the screenshot I have above, I simply threw in a couple of divs and applied some flexbox to align them properly.

HTML Changes:

HTML:

<li>
   <a href="#">Pages</a>
   <div class="dropdown custom-dropdown">
      <div>
         <h1>First column</h1>
         <a href="">Product 1</a>
         <a href="">Product 2</a>
         <a href="">Product 3</a>
      </div>
      <div>
         <h1>Second column</h1>
         <a href="">Article 1</a>
         <a href="">Article 2</a>
         <a href="">Article 3</a>
      </div>
      <div>
         <h1>Third column</h1>
         <a href="">Page 1</a>
         <a href="">Page 2</a>
         <a href="">Page 3</a>
      </div>
   </div>
</li>

CSS Changes:

CSS:

.custom-dropdown {
  width: 800px !important; /* overriding bootstrap */
  left: -100px !important; /* overriding bootstrap */
  display: flex;
  justify-content: space-between;
  padding: 12px !important; /* overriding bootstrap */
}
.custom-dropdown div {
  width: 240px;
}
.custom-dropdown h1 {
  font-size: 1.4em;
  color: salmon;
  margin-bottom: 1rem !important; /* overriding bootstrap */
}
.custom-dropdown a {
  color: white !important; /* overriding bootstrap */
  text-decoration: none !important; /* overriding bootstrap */
}
.custom-dropdown a:after {
  content: none !important; /* overriding bootstrap */
}

If you've got any questions you can DM me here or ask below.

Welcome!

HTML & CSS How to convert this boot strap drop down menu to mega menu

mariag

Coder

Tealk

Platinum Coder

mariag

Coder

Tealk

Platinum Coder

mariag

Coder

poyaebv

mariag

Coder

edenwax

Well-Known Coder

New Threads

Latest posts

Share this page

Buy us a coffee!

About Us

Site links

We value your privacy

Welcome!

HTML & CSS How to convert this boot strap drop down menu to mega menu

Coder

Platinum Coder

Coder

Platinum Coder

Coder

Coder

Well-Known Coder

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy