responsive menu

how to achieve this, see video

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

check video
but so far so good

Hello,

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

Best Regards

done 🙂

Hello,

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

Best Regards

i removed the code you gave me above ^^

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

I would love to outcommen the css code, but since its a live running webshop, and i dont know when you guys will come with a soultion (this is not to be disrespectful) then my client does not wish to do that.

would it be possible to just add !important to all your custorm code ?

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

it sort of is really close.

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

works very well on my end, a tons of thanks from me and my client.
Today though he experince that on mac + chrome, that the megamneu dropdown, is pushed to the side

Attachments:

You must be logged in to view attached files.

could you

mac came with a big os update yesterday, those who didnt update it sees the mega menu fine, those who does, it will fuck up. even in chrome browser.

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

Hi Elise
we have updated the theme to the newest version and cleared catch.
client on the new mac update is still seeing the problems.

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

[Author]

Posts