Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

mariag

Coder
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_7
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
 
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 -->
 
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";
}
 
Last edited:
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:

1599858405854.png

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.
 
Last edited:

New Threads

Buy us a coffee!

Back
Top Bottom