responsive menu

Hello,

We can reduce the font size of the menu items at the point when the menu is broken:

Please add this code to the Theme Settings > Custom CSS > Global:

@media screen and (max-width:1438px){
body .woodmart-navigation .item-level-0>a {
    padding-right: 5px;
    padding-left: 5px;
}
}
@media screen and (max-width:1329px){
body .whb-color-dark .navigation-style-bordered .item-level-0 > a {
    font-size: 11px;
}
}
@media screen and (max-width:1235px){
body .whb-color-dark .navigation-style-bordered .item-level-0 > a {
    font-size: 8px;
}
}

Best Regards

Hello,

Please comment all your custom CSS related to the menu. Remove the custom I have provided. Provide site admin access.

Best Regards

Hello,

Please comment or remove all your custom CSS code related to the header main menu

Best Regards

In the following reply we asked you to:

1. Remove custom code that we provided to you in this reply
2. Remove or disable your custom code related to the header main menu (for example height, background, font-size, colour and others: https://prnt.sc/vhz7zi, https://prnt.sc/vhz8j0, https://prnt.sc/vhz8xx)

Your custom CSS code override theme styles and options which does not allow us to prepare custom code for you to make your menu justified and responsive like on the site you provided as an example.

Best Regards

Try to add the following code snippet to the General Custom CSS area in Theme Settings.

.woodmart-navigation .menu {
  display: flex;
  justify-content: space-between;
  padding-left: 8px;
  padding-right: 8px;
  flex-wrap: nowrap;
}

.woodmart-navigation .item-level-0 {
  flex-grow: 1;
}

.whb-header-bottom.whb-flex-flex-middle .whb-col-center {
  flex-basis: 100%;
  width: 100%;
}

@media (max-width: 1240px) {
  
  body .woodmart-navigation .menu .item-level-0 > a {
    font-size: 10px !important;
    padding-left: 5px;
    padding-right: 5px;
  }
}

Best Regards

Try to replace previous custom code with this one:

.woodmart-navigation .menu {
  display: flex;
  justify-content: space-between;
  padding-left: 8px;
  padding-right: 8px;
  flex-wrap: nowrap;
}

.woodmart-navigation .item-level-0 {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.woodmart-navigation .item-level-0:not(:last-child) {
   margin-right: 2px;
}

.whb-header-bottom.whb-flex-flex-middle .whb-col-center {
  flex-basis: 100%;
  width: 100%;
}

.woodmart-navigation .menu .item-level-0 > a {
  white-space: nowrap
}

.menu-item:not(:last-child) a {
  border:none;
}

@media (max-width: 1450px) {
    body .woodmart-navigation .menu .item-level-0 > a {
    font-size: 10px !important; 
  }
}

@media (max-width: 1300px) {
  
  body .woodmart-navigation .menu .item-level-0 > a {
    font-size: 9px !important;
    padding-left: 5px;
    padding-right: 5px;  
  }
}

Best Regards

Hello,

Please make the full backup of your site and update the theme and related plugins to the recent version. https://xtemos.com/docs/woodmart/update-theme-2/

Best Regards

Please, disable all external plugins that are not related to our theme so we can check.