Desktop Header with Hamburger and Centered Logo

Hi there,
I was on Basel, now moving to Woodmart given your recent upgrade. Congratulations for this achievement!
Many questions re. Header
You will find here the current settings, layout and menu layout after click on hamburger:
https://snipboard.io/jdkmUE.jpg

Q1: how to get logo centered for each device?
Logo is in central zone, but slightly on the left in final layout. This could be corrected with space element, but the right correction depends on screen width. A way to get the logo / image set as “centered”?

Q2: how to modify the size of icons per device?
For desktop, would nbe better for readibility to get them bigger

W3. when using hamburger on desktop, how to withdraw the 2nd menu?
Hamburger when tapped reveals 2 menus: the one for the site, and one for categories.
How to withdraw the one for categories? Again, withdraw it only to desktop.

Thanks in advance

Kind regards

Hello,

1. Please try to set the flex for the central column: https://xtemos.com/docs/woodmart/header-builder/header-rows-flex-layouts/ and you can find the option here: https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

2. The icon can be changed with the custom CSS, please specify which ones you want to increase?

3. You can disable the Category menu in the Mobile menu element of the Mobile view of the Header builder: https://xtemos.com/docs/woodmart/header-builder/header-responsive-settings/

If you have any questions please feel free to contact us.

Best Regards

Hello,
Q1 is OK now. I had not understood the jargon in doc.
Q3. OK, sorry, I should have found by myself.

Q2. All icons, to get them all at the same size.
To be more explicit, here you’ll see my current layout, the benchmark – bottom is for another question.
https://snipboard.io/YJ3Um8.jpg
So:
– how to slightly increase the size of icons?
– how to reduce the width of the rectangle (search)?
– is there any setting which decides that the inside of the search rectangle is “theme” color? Or is it simply transparent?
– how to get the right side more on the right, and left side more on the left? Ie get the menu wider on wider screen, and narrower on narrower screen?

I suppose that this last one relates with General Layout / Site width.
Q3: Do yo have a doc on this, I am struggling to understand the ins and outs.

Q4. Lastly, is it possible to set conditions on the bottom row of the header? Ie get 1 specific 3rd row on shop (on desktop an mobile with different layout), and another specific 3rd row on blog (on desktop an mobile with different layout)?

Kind regards

Try to add the following code snippet to the Custom CSS area in Theme Settings as per your request

.whb-column .wd-tools-icon:before {
	 font-size: 24px!important;
}
div[class*="wd-header-search-form"] {
    flex: 0 0 auto;
    width: 365px;
}
div[class*="wd-header-search-form"] input[type='text'] {
	 background-color: white;
}
.whb-row .container {
    max-width: 100%;
    width: 90%;
}

Q3. Could you please clarify the question? Provide us some screenshot for a better understanding.

Q4. In this case, you need to create a separate header for this page. And use our Theme Settings Presets https://xtemos.com/docs/woodmart/theme-settings-presets/

Kind Regards

Hello,

Thank you for that 🙂 I will revert to you if needed, but at first glance, it looks fine.

Re. Q3.
General Layout / Side width proposes 6 options. I don’t concretely understand the impacts of the 6. So, I am not looking for something precise, rather a tutorial or guide. I roughly tried …
– Full width is clear
– Boxed OK, with padding all around
– boxed with hidden overflow – I don’t understand
– Content full width: Means that there is no sidebar?
– wide 1600. What is the benefit of chosing this, given it shall be responsive / adaptative …
Kind regards

Hello,

Boxed layout with hidden overflow doesn’t allow any full-width blocks inside it. So if you want to build a boxed layout like our Camping version you need to select just Boxed. https://woodmart.xtemos.com/demo-camping/demo/camping/
Content full width means the page takes the whole size of the screen and all the content inside is stretched too. It is not about the sidebar.

Kind Regards

Hello,
Coming back to a former point here.
I use hamburger menu on Desktop.
When I click on it, menu comes, with search and a sub-menu of categories
In desktop settings, and in the mobile settings, search and categories are un-ticked.
What shall I do to have no categories sub-menu?
All this in image:
https://snipboard.io/HTx6KQ.jpg
Kind regards

Hi,

Please, provide us your admin access so we can check what is wrong.

Hi,
It’s staging site; no issue there whatever you do.
Kind regards

You have this menu enabled for mobile devices https://gyazo.com/f37c66ebd091abd3525d3135e19cc063

Hi,
On desktop, as of now, on the left, a hamburger.
If I click on it, I get the right menu for the website.
The question was about withdrawing / NOT having the search bar and categories.
Supposedly, not to have search bar and categories suggest that we shall have them unticked, no?
Maybe I am wrong, but it looks like you are supposing that the issue is “categories not showing”, when the issue / question is: is it possible to get rid of categories?
Kind regards

Hello,

If you want to disable categories and search form you need to edit this element both on desktop and mobile devices and disable these options https://gyazo.com/f37c66ebd091abd3525d3135e19cc063

Kind Regards

Hi,
Indeed, it works, thanks.
That said, sorry, I noticed something I did not expect.

For Shop, my original target was to replicate what I do have in Basel, ie a 3rd row which is full width, with the product categories. With those 2 different layouts, for desktops and mobile:
https://snipboard.io/wuiOWa.jpg
For me, it’s clear, simple, visible, rather elegant and obvious.

Apparently, the Headers of Woodmart are designed to ONLY have 3 sections per row. And indeed, the only option I see for categories, is your “categories dropdown”, which is more appropriate for mobile than desktops.

So, question is: would that be simple for you to make like Basel? If complicated or demanding in terms of resources, I would then try to find something within what the Theme offers. My particular view is that, when it’s overloaded with texts and rows (like Woodmart tend to be), visitors have to make an effort to find what they want, and then most go away.

Waiting for your feedback
Kind regards

Hi,
Sorry, forget it, I just found how to make it happen
Kind regards

Great, we are glad that you sorted it out!

[Author]

Posts