fix header main menu

Hello,

I have my categories in the header but on small screen they look bad its not responsive how can I fix this?

https://imgur.com/a/1wHCX5g

Hello,

I saw the screenshot you attached.

Our theme is completely responsive for all the standard devices.

I am sorry but this is not the standard way of testing the site, every Theme in the world uses certain breakpoints to change the layout as per the screen resolution, and Woodmart also based on that theory, Woodmart uses the Bootstrap framework which works on certain predefined rules for the different layouts on different screen resolutions, like for Desktop ( start from 1025px), For Tablets ( from 992px to 1024px) For Mobile. ( end till 1023px) these are the standard points.

So if you test the site like you are doing simply resizing the browser then on a certain point/screen resolution it must break the layout.

You must have to test your site on the real devices OR on the online simulator like Responsinator: https://www.responsinator.com

Regards.
Xtemos Studios.

I don’t know how you where you got that I resized the browser from but fine it’s all good i know your theme is responsive I have been using it for 2 months.

The first image is from 27inch monitor
The second one is from my 13 inch MacBook

Forget about the word responsive for a second and try to help me fix this because it’s a theme issue I can only put 7 items in the header otherwise it will look exactly as the picture I sent to you..

Hello,

How exactly you would like to fix the issue? If you place too many links to the header then on small screens you can face such problems. We can give you a custom CSS to reduce the font size and spacing between items if you want.

Kind Regards

yes please that would be good, custom css is fine, thank you

is there a way to make a scrollable menu (horizonta)?

Hi,

1. Try to add the following custom code to Global Custom CSS field to change font size and paddings for header main menu items depending on screen size:

@media (max-width: 1500px) {
body .whb-header-bottom .item-level-0 > a {
	font-size: 11px;
	padding-right: 8px;
	padding-left: 8px;
}
}

@media (max-width: 1350px) {
body .whb-header-bottom .item-level-0 > a {
	font-size: 10px;
	padding-right: 5px;
	padding-left: 5px;
}
}

@media (max-width: 1150px) {
body .whb-header-bottom .item-level-0 > a {
	font-size: 9px;
	padding-right: 3px;
	padding-left: 3px;
}
}

Depending on how many menu items you want to use, you can change custom code to match your design.
@media (max-width: 1500px) – means that code below will apply on device screen width 1500px;

2. Unfortunately it cannot be done. CSS scroll is made via overflow property which will make main menu dropdowns cut off.

Kind Regards

Thank you very much

can you please help me with 2 more things.

1-how to remove this price fliter https://imgur.com/a/ObQz0j8?
2-I have created categories menu on phone am using it in the mobile menu and its working fine I have also added it in the Shop widget area when you click on the links nothing happens it only happen on phone on pc its working fine.

Hello,

1. You can remove this widget from the sidebar via Appearance -> Widgets.

2. Mega menu dropdowns built with HTML Blocks are supported by the main desktop menu only. You need to create separate mobile navigation in Appearance -> Menus without HTML Blocks dropdowns.

Regards

Hi,

1. As you can see in the screen shot the price filter is not in the widget menu and this is not a sidebar it’s the shop filters.

2. This menu does not have a any html block it’s just a drop down of categories links. Do you mean I should remove the Woodmart Mega menu?

Thank you

Add the following snippet to the functions.php file in the child theme to remove standard sorting and price filter widgets from the filters area

add_action( 'wp', function (){
	add_filter( 'woodmart_use_custom_order_widget', '__return_false' );
	add_filter( 'woodmart_use_custom_price_widget', '__return_false' );
}, 10 );

2. Sorry, we meant that this menu is created for the mega menu element. And if you want to have a hierarchical menu of categories then you need to use the Product Categories widget. The one that you use doesn’t have dropdowns on mobile devices.

Kind Regards

Perfect thank you very much, first one worked fine.

Is there a way to add css and make the categories look like the mega menu? With icons, larger fonts etc…? I tried to change the font from Typography but couldn’t find the exact one that should be changed

Sorry, but icons can’t be added there as with our mega menu widget. As for the typography, you can try to use our advanced typography settings for this purpose. https://xtemos.com/docs/woodmart/advanced-typography-settings/

Hello

is it possible to make 2 different sidebars for shop page one for phone other for desktop? and if not is it possible to add 4 widgets for one sidebar and hide 2 for example only on phone

lets say I added category with mega menu to the sidebar of shop page but I want to hide it on phone is it possible?

Regards

Hello,

There is no option for different sidebars. But you can show/hide different widgets on different devices with custom CSS code.

Kind Regards

[Author]

Posts