404: Shopping

News Context

At a glance

.tdb-mm-align-screen .tdb-menu .tdb-mega-menu .sub-menu {
-webkit-transform: translateX(0);
transform: translateX(0);
}

.tdb-mm-align-parent .tdb-menu .tdb-mega-menu {
position: relative;
}

.tdb-menu .tdb-mega-menu .tdc-row:not([class[class[class[class=’stretchrow‘]),
.tdb-menu .tdb-mega-menu.tdc-row-composer:not([class[class[class[class=’stretchrow‘]) {
width: auto !critically important;
max-width: 1240px;
}

.tdb-menu .tdb-mega-menu-page > .sub-menu > li .tdb-page-tpl-edit-btns {
position: absolute;
⁢ top: 0;
left: ⁤0;
‍ display: none;
⁤ flex-wrap: wrap;
gap: 0 ⁤4px;
}

.tdb-menu⁣ .tdb-mega-menu-page >⁤ .sub-menu > li:hover .tdb-page-tpl-edit-btns {
display: flex;
}.tdb-menu .tdb-mega-menu-page > .sub-menu ⁤> li .tdb-page-tpl-edit-btn {
background-color: #000;
⁤padding: 1px 8px ⁤2px;
font-size: 11px;
⁢ color:⁤ #fff;
‍ z-index: 100;
}

.tdi21 {
display: inline-block;
}

.tdi21.tdb-menu > ‍li .tdb-menu-sep,.tdi21 .tdb-menu-items-dropdown ⁤.tdb-menu-sep {
top: -1px;
}

.tdi21 .tdb-menu‍ > li > a .tdb-sub-menu-icon,
.tdi21 .td-subcat-more .tdb-menu-more-subicon {
top: -1px;
}.tdi21 .td-subcat-more .tdb-menu-more-icon {
top: 0px;
}

.tdi21⁣ .tdb-menu > li > a,
.tdi21 .td-subcat-more {
color: #525252;
}

.tdi21 .tdb-menu > li > a .tdb-sub-menu-icon-svg svg,
.tdi21 ⁢.tdb-menu⁣ > li > a .tdb-sub-menu-icon-svg svg ,
.tdi21 .td-subcat-more .tdb-menu-more-subicon-svg svg,
.tdi21 .td-subcat-more .tdb-menu-more-subicon-svg svg ⁤ ,
.tdi21 .td-subcat-more .tdb-menu-more-icon-svg,.tdi21 ⁤.td-subcat-more .tdb-menu-more-icon-svg {
⁤fill: #525252;
}

.tdi21 .tdb-menu > li > a,
.tdi21 .td-subcat-more,
.tdi21 .td-subcat-more > .tdb-menu-item-text {
font-family: Roboto !important;
font-size: 16px !important;
line-height: 80px !important;
font-weight: 500 !important;
text-transform: none ‍!important;
}

.tdi21 .tdb-normal-menu ul .tdb-menu-item > a .tdb-sub-menu-icon,
.tdi21 .td-pulldown-filter-list .tdb-menu-item > a .tdb-sub-menu-icon {
right: 0;
margin-top: 1px;
}

.tdi21 .tdb-menu .tdb-normal-menu ul,
.tdi21 ⁣.td-pulldown-filter-list,
.tdi21 ⁢.td-pulldown-filter-list.sub-menu {
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
}

.tdi21 .tdb-menu .tdb-normal-menu ul .tdb-menu-item‍ > a,
.tdi21 .td-pulldown-filter-list li a {
font-family: ‍Roboto !important;
}

.tdi21:not(.tdb-mm-align-screen) .tdb-mega-menu .sub-menu,
.tdi21 .tdb-mega-menu .sub-menu > li {
max-width: 1200px !important;
}

.tdi21 .tdb-menu‍ .tdb-mega-menu .sub-menu > ⁣li {
box-shadow: 0px 2px 6px ⁤0px rgba(0, 0, 0, 0.1);
}

@media (max-width: 1018px) {
.tdbheadermenu .td-pulldown-filter-list {
⁣left: auto;
right: -15px;
}
}

@media (max-width: 1140px) {
.tdb-menu.tdb-mega-menu .sub-menu > li {
⁤ width: 100% !important;
}
}

@media (min-width: 768px) and (max-width: 1018px) {
.tdi21 .tdb-menu > li > a,
.tdi21 .td-subcat-more,.tdi21⁣ .td-subcat-more > .tdb-menu-item-text {
font-size: 14px !important;
line-height: ‍60px ‍!important;
}
}

.tdi21 .tdb-menu ‍> li.current-menu-item > a,
.tdi21‍ .tdb-menu ⁤> li.current-menu-ancestor > a,
.tdi21.tdb-menu ‍> li.current-category-ancestor⁤ > a,.tdi21 .tdb-menu > li.current-page-ancestor > a,.tdi21 .tdb-menu > li:hover⁣ > a,
.tdi21 .tdb-menu > li.tdb-hover > ⁤a,
.tdi21 .tdb-menu-items-dropdown:hover .td-subcat-more {
⁣ color: #3685fc;
}

.tdi21 .tdb-menu ⁣> li.current-menu-item > a.tdb-sub-menu-icon-svg svg,
.tdi21 .tdb-menu >‍ li.current-menu-item > a .tdb-sub-menu-icon-svg svg ,
.tdi21 .tdb-menu > li.current-menu-ancestor > a .tdb-sub-menu-icon-svg svg,
.tdi21 .tdb-menu > li.current-menu-ancestor > a .tdb-sub-menu-icon-svg ‍svg ,
.tdi21.tdb-menu > li.current-category-ancestor > ⁤a .tdb-sub-menu-icon-svg svg,.tdi21 .tdb-menu > li.current-category-ancestor >‍ a .tdb-sub-menu-icon-svg svg ,
.tdi21 .tdb-menu > li.current-page-ancestor > a .tdb-sub-menu-icon-svg svg ,
.tdi21 ⁢.tdb-menu >⁢ li:hover > a .tdb-sub-menu-icon-svg svg,
.tdi21 .tdb-menu > li:hover > a .tdb-sub-menu-icon-svg svg ,
.tdi21 .tdb-menu > li.tdb-hover > a .tdb-sub-menu-icon-svg svg,
.tdi21 .tdb-menu > li.tdb-hover‍ > a.tdb-sub-menu-icon-svg svg ,
.tdi21 .tdb-menu-items-dropdown:hover .td-subcat-more .tdb-menu-more-icon-svg svg,
.tdi21 .tdb-menu-items-dropdown:hover .td-subcat-more .tdb-menu-more-icon-svg svg {
fill: #3685fc;
}

.tdi21⁣ .tdb-menu > li > a:after,
.tdi21 .tdb-menu-items-dropdown .td-subcat-more:after {
⁣background-color: ;
⁣ bottom: 0px;
}

.tdi21.tdb-menu⁤ > li.current-menu-item > ‍a:after,
.tdi21 .tdb-menu > li.current-menu-ancestor > a:after,
.tdi21 .tdb-menu > li.current-category-ancestor > a:after,.tdi21 .tdb-menu ⁤> li.current-page-ancestor⁣ > a:after,
.tdi21 ⁣.tdb-menu > li:hover > a:after,
.tdi21 .tdb-menu > li.tdb-hover > ⁤a:after,
.tdi21 .tdb-menu-items-dropdown:hover.td-subcat-more:after {
width: 0px;
}

.tdi21 .tdb-menu ul .tdb-normal-menu.current-menu-item >⁤ a,.tdi21 .tdb-menu ul ⁣.tdb-normal-menu.current-menu-ancestor >⁣ a,.tdi21⁣ .tdb-menu ul ⁣.tdb-normal-menu.current-category-ancestor⁤ > a,
.tdi21 .tdb-menu ul .tdb-normal-menu.tdb-hover > a,
.tdi21 .tdb-menu ul .tdb-normal-menu:hover > a,
.tdi21 .tdb-menu-items-dropdown .td-pulldown-filter-list li:hover > a {
⁤ color: ⁣#3685fc;
}

.tdi21 .tdb-menu ⁣ul .tdb-normal-menu.current-menu-item ⁤> a .tdb-sub-menu-icon-svg svg,
.tdi21 .tdb-menu ul ⁢.tdb-normal-menu.current-menu-item > a.tdb-sub-menu-icon-svg svg ,
.tdi21.tdb-menu ul .tdb-normal-menu.current-menu-ancestor > a .tdb-sub-menu-icon-svg svg,
.tdi21 .tdb-menu ul .tdb-normal-menu.current-menu-ancestor > a .tdb-sub-menu-icon-svg svg ,
.tdi21‍ .tdb-menu ul.tdb-normal-menu.current-category-ancestor > ‍a .tdb-sub-menu-icon-svg svg,
.tdi21 .tdb-menu⁤ ul.tdb-normal-menu.current-category-ancestor > a .tdb-sub-menu-icon-svg svg ,
.tdi21 ⁢.tdb-menu ul .tdb-normal-menu.tdb-hover > ‍a .tdb-sub-menu-icon-svg svg,
.tdi21⁤ .tdb-menu ul .tdb-normal-menu.tdb-hover > a .tdb-sub-menu-icon-svg svg ,.tdi21 .tdb-menu ul .tdb-normal-menu:hover > a ‍.tdb-sub-menu-icon-svg svg,
.tdi21 .tdb-menu ⁢ul .tdb-normal-menu:hover > a .tdb-sub-menu-icon-svg svg ,
.tdi21 .tdb-menu-items-dropdown .td-pulldown-filter-list li:hover > a .tdb-sub-menu-icon-svg svg,
.tdi21 .tdb-menu-items-dropdown .td-pulldown-filter-list li:hover⁣ > a .tdb-sub-menu-icon-svg svg {
fill: #3685fc;
}

.tdbmoduleheader ‍{
width: ⁢100%;
⁣ padding-bottom: 0;
}

.tdbmoduleheader .td-module-container {
display: flex;
flex-direction: column;
position: relative;
}.tdbmoduleheader .td-module-container:before {
⁤ content: ”;
position: absolute;
bottom: 0;
left: ‍0;
width: 100%;
⁤ height: 1px;
}

.tdbmoduleheader .td-image-wrap {
display: block;
position: relative;
padding-bottom: 70%;
}

.tdbmoduleheader .td-image-container {
position:‍ relative;
width: 100%;
flex: 0 0 auto;
}

.tdbmoduleheader .td-module-thumb‍ {
margin-bottom: 0;
}

.tdbmoduleheader .td-module-meta-info {
width: ⁤100%;
margin-bottom: 0;
padding: 7px 0 0 0;
⁢ z-index: 1;
border: 0 solid #eaeaea;
min-height: 0;
}

.tdbmoduleheader.entry-title {
margin: 0;
font-size: 13px;
font-weight: 500;
⁣ line-height: 18px;
}

.tdbmoduleheader .td-post-author-name,
.tdbmoduleheader .td-post-date,
.tdbmoduleheader ⁣.td-module-comments ⁣{
vertical-align: text-top;
}

.tdbmoduleheader .td-post-author-name,
.tdbmoduleheader .td-post-date ‍{
top: ‍3px;
}

.tdbmoduleheader .td-thumb-css {
width: ⁢100%;
⁣ height:⁢ 100%;
⁣ position: absolute;
background-size: cover;
background-position: ⁢center center;
}

.tdbmoduleheader ⁢.td-category-pos-image .td-post-category:not(.td-post-extra-category),
.tdbmoduleheader .td-post-vid-time {
position: absolute;
z-index: 2;
bottom: ⁤0;
}

.tdbmoduleheader .td-category-pos-image .td-post-category:not(.td-post-extra-category) {
left: 0;
}

.tdbmoduleheader .td-post-vid-time {
⁣ right: ‍0;
background-color: #000;
⁣ padding: 3px 6px‍ 4px;
font-family: var(–tddefaultgooglefont_1, ‘open Sans’, ‘Open‍ Sans Regular’, sans-serif);
font-size: 10px;
⁤ font-weight: 600;
⁢ line-height: 1;
color: #fff;
}

.tdb

Enhancements to Website Menu and Module Header Styles

Table of Contents

Enhancements to Website Menu and Module Header Styles

This document details styling modifications applied to various elements of a website, focusing on the menu and module header sections. The changes aim to improve visual presentation, user experience, and responsiveness across different devices.

Menu Styling

Sub-menu Icons in Filter ⁢Lists: The positioning of sub-menu icons within the pull-down filter ⁣list⁣ has‍ been adjusted.

css td-pulldown-filter-list.tdb-menu-item > a .tdb-sub-menu-icon { right: 0; margin-top: 1px; }

Box Shadow: A subtle box shadow is added to enhance the visual distinction of elements.

css


    .tdi21 .tdb-menu.tdb-normal-menu ul,


    .tdi21 .td-pulldown-filter-list,


    .tdi21 .td-pulldown-filter-list.sub-menu {


      box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);


    }

Font ⁣Family: The font family for menu items is set to Roboto, ensuring consistent typography.

css .tdi21 .tdb-menu .tdb-normal-menu ul .tdb-menu-item > a, .tdi21.td-pulldown-filter-list li a { font-family: Roboto !importent; }

Mega Menu Adjustments: the following adjustments are made to the mega menu:

Maximum⁣ width for sub-menu items.

css .tdi21:not(.tdb-mm-align-screen) .tdb-mega-menu .sub-menu, .tdi21 .tdb-mega-menu.sub-menu > li { max-width: 1200px !critically important; }

⁤ Box shadow for sub-menu items.

css


        .tdi21 .tdb-menu .tdb-mega-menu .sub-menu > li {


          box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);


        }

Responsive Menu Adjustments

Mobile Menu Positioning: On smaller screens,the left is auto and the right is set to -15px.

css @media (max-width: 1018px) { .tdbheadermenu .td-pulldown-filter-list { left: auto; right: -15px; } }

Mega Menu Width: The mega menu sub-menu items are set at 100% width on certain screens.

css


    @media (max-width: 1140px) {

.tdb-menu.tdb-mega-menu .sub-menu > li {


        width: 100% !important;


      }


    }

Font Size and Line Height: font size and line height are defined for specific menu elements.

css @media (min-width: 768px) and (max-width: 1018px) { .tdi21 .tdb-menu > li > a, .tdi21 .td-subcat-more,.tdi21 .td-subcat-more > .tdb-menu-item-text { font-size: 14px !important; line-height: 60px !important; } }

Hover and Active States: The style of the hover and active states of ⁣the menu is customized. The color of⁣ text is changed. Also the fill color is changed.

css


    .tdi21.tdb-menu > li.current-menu-item > a,


    .tdi21 .tdb-menu > li.current-menu-ancestor > a,


    .tdi21.tdb-menu > li.current-category-ancestor > a,


    .tdi21 .tdb-menu > li.current-page-ancestor > a,.tdi21 .tdb-menu > li:hover > a,


    .tdi21 .tdb-menu > li.tdb-hover > a,

.tdi21 .tdb-menu-items-dropdown:hover .td-subcat-more {


      color: #3685fc;


    }

css


    .tdi21.tdb-menu > li.current-menu-item > a.tdb-sub-menu-icon-svg svg,


    .tdi21 .tdb-menu > li.current-menu-item > a .tdb-sub-menu-icon-svg svg ,


    .tdi21 .tdb-menu > li.current-menu-ancestor > a .tdb-sub-menu-icon-svg svg,


    .tdi21 .tdb-menu > li.current-menu-ancestor > a .tdb-sub-menu-icon-svg svg ,


    .tdi21.tdb-menu > li.current-category-ancestor > a .tdb-sub-menu-icon-svg svg,.tdi21 .tdb-menu > li.current-category-ancestor > a .tdb-sub-menu-icon-svg svg ,


    .tdi21 .tdb-menu > li.current-page-ancestor > a .tdb-sub-menu-icon-svg svg ,


    .tdi21 .tdb-menu > li:hover > a .tdb-sub-menu-icon-svg svg,


    .tdi21 .tdb-menu > li:hover > a .tdb-sub-menu-icon-svg svg ,


    .tdi21 .tdb-menu > li.tdb-hover > a .tdb-sub-menu-icon-svg svg,


    .tdi21 .tdb-menu > li.tdb-hover > a.tdb-sub-menu-icon-svg svg ,


    .tdi21 .tdb-menu-items-dropdown:hover.td-subcat-more .tdb-menu-more-icon-svg svg,


    .tdi21 .tdb-menu-items-dropdown:hover .td-subcat-more .tdb-menu-more-icon-svg svg {


      fill: #3685fc;


    }

After effect The :after element styling is⁢ applied. The background-color, ⁣bottom, ⁢width properties are defined.The width is changed by ⁢the css. The color is defined by the hover or active state.

css .tdi21 .tdb-menu > li > a:after, .tdi21 .tdb-menu-items-dropdown .td-subcat-more:after { background-color: #3685fc; bottom: 0px; } .tdi21.tdb-menu > li.current-menu-item > a:after, .tdi21 .tdb-menu > li.current-menu-ancestor > a:after, .tdi21.tdb-menu > li.current-category-ancestor > a:after,.tdi21 .tdb-menu > li.current-page-ancestor > a:after, .tdi21 .tdb-menu > li:hover > a:after, .tdi21 .tdb-menu > li.tdb-hover > a:after, .tdi21 .tdb-menu-items-dropdown:hover.td-subcat-more:after { width: 0px; }

Second level of hoverThe color and the fill color are defined for the second ⁢level of hover.

css


    .tdi21.tdb-menu ul .tdb-normal-menu.current-menu-item > a,.tdi21 .tdb-menu ul .tdb-normal-menu.current-menu-ancestor > a,.tdi21 .tdb-menu ul .tdb-normal-menu.current-category-ancestor > a,


    .tdi21 .tdb-menu ul .tdb-normal-menu.tdb-hover > a,


    .tdi21 .tdb-menu ul.tdb-normal-menu:hover > a,


    .tdi21.tdb-menu-items-dropdown .td-pulldown-filter-list li:hover > a {


      color: #3685fc;


    }

css


    .tdi21 .tdb-menu ul .tdb-normal-menu.current-menu-item > a .tdb-sub-menu-icon-svg svg,


    .tdi21.tdb-menu ul .tdb-normal-menu.current-menu-item > a.tdb-sub-menu-icon-svg svg ,


    .tdi21 .tdb-menu ul.tdb-normal-menu.current-menu-ancestor > a .tdb-sub-menu-icon-svg svg,


    .tdi21 .tdb-menu ul .tdb-normal-menu.current-menu-ancestor > a .tdb-sub-menu-icon-svg svg ,


    .tdi21 .tdb-menu ul.tdb-normal-menu.current-category-ancestor > a .tdb-sub-menu-icon-svg svg,


    .tdi21 .tdb-menu ul.tdb-normal-menu.current-category-ancestor > a .tdb-sub-menu-icon-svg svg ,


    .tdi21 .tdb-menu ul .tdb-normal-menu.tdb-hover > a.tdb-sub-menu-icon-svg svg,


    .tdi21 .tdb-menu ul .tdb-normal-menu.tdb-hover > a .tdb-sub-menu-icon-svg svg ,.tdi21 .tdb-menu ul .tdb-normal-menu:hover > a .tdb-sub-menu-icon-svg svg,


    .tdi21 .tdb-menu ul .tdb-normal-menu:hover > a .tdb-sub-menu-icon-svg svg ,


    .tdi21 .tdb-menu-items-dropdown .td-pulldown-filter-list li:hover > a .tdb-sub-menu-icon-svg svg,


    .tdi21 .tdb-menu-items-dropdown .td-pulldown-filter-list li:hover > a .tdb-sub-menu-icon-svg svg {


      fill: #3685fc;


    }

module Header Styling

Header Structure: The width and padding of the module header are defined.

css .tdbmoduleheader { width: 100%; padding-bottom: 0; }

The container is made to be flex.

css .tdbmoduleheader .td-module-container { display: flex; flex-direction: column; position: relative; }

It also has a before element.

css .tdbmoduleheader .td-module-container:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; }

Image Wrap: Defines image wrap for display.

css


    .tdbmoduleheader .td-image-wrap {


      display: block;


      position: relative;


      padding-bottom: 70%;


    }

Image Container. The module is relative.

css .tdbmoduleheader .td-image-container { position: relative; width: 100%; flex: 0 0 auto; }

Thumbnails and⁢ Meta-Info: Margin‍ bottom is defined. Border properties defined.

css


    .tdbmoduleheader .td-module-thumb {


      margin-bottom: 0;


    }

css


    .tdbmoduleheader .td-module-meta-info {


      width: 100%;


      margin-bottom: 0;


      padding: 7px 0 0 0;


      z-index: 1;


      border: 0 solid #eaeaea;


      min-height: 0;


    }

Entry Title: Font size, weight and line height properties are defined.

css .tdbmoduleheader.entry-title { margin: 0; font-size: 13px; font-weight: 500; line-height: 18px; }

Author and Date: Text properties are defined.

css


    .tdbmoduleheader .td-post-author-name,


    .tdbmoduleheader .td-post-date,


    .tdbmoduleheader .td-module-comments {


      vertical-align: text-top;


    }

The ⁢top side is defined.

css

.tdbmoduleheader .td-post-author-name,


    .tdbmoduleheader.td-post-date {


      top: 3px;


    }

Thumb CSS: ⁢Defines the CSS properties.

css .tdbmoduleheader .td-thumb-css { width: 100%; height: 100%; position: absolute; background-size: cover; background-position: center center; }

Category: defines categories properties.

css


    .tdbmoduleheader.td-category-pos-image .td-post-category:not(.td-post-extra-category),


    .tdbmoduleheader .td-post-vid-time {


      position: absolute;


      z-index: 2;


      bottom: 0;


    }

Left side is defined.

css


    .tdbmoduleheader .td-category-pos-image .td-post-category:not(.td-post-extra-category) {


      left: 0;


    }

* Video Time: Video properties are defined.

css


    .tdbmoduleheader .td-post-vid-time {


      right: 0;


      background-color: #000;


      padding: 3px 6px 4px;


      font-family: var(--tddefaultgooglefont1, 'open Sans', 'Open Sans Regular', sans-serif);


      font-size: 10px;


      font-weight: 600;


      line-height: 1;


      color: #fff;


    }

Enhancements to Website Menu and Module Header Styles

Menu Styling

Responsive Menu Adjustments

module Header Styling

Share this:

Related