Home › Forums › WoodMart support forum › Desktop Header with Hamburger and Centered Logo

Desktop Header with Hamburger and Centered Logo

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • April 10, 2021 at 3:33 pm #281335

    pierredemeudon
    Participant

    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

    April 10, 2021 at 6:59 pm #281420

    Elise Noromit
    Member

    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

    April 11, 2021 at 5:11 am #281481

    pierredemeudon
    Participant

    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

    April 11, 2021 at 8:53 am #281509

    Artem Temos
    Keymaster

    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

    April 11, 2021 at 11:30 am #281575

    pierredemeudon
    Participant

    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

    April 12, 2021 at 7:00 am #281731

    Artem Temos
    Keymaster

    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

    April 13, 2021 at 5:21 pm #282456

    pierredemeudon
    Participant

    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

    April 14, 2021 at 6:17 am #282586

    Artem Temos
    Keymaster

    Hi,

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

    April 14, 2021 at 6:41 am #282612

    pierredemeudon
    Participant

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

    April 14, 2021 at 6:47 am #282620

    Artem Temos
    Keymaster

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

    April 14, 2021 at 7:02 am #282634

    pierredemeudon
    Participant

    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

    April 14, 2021 at 8:23 am #282676

    Artem Temos
    Keymaster

    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

    April 14, 2021 at 4:34 pm #282896

    pierredemeudon
    Participant

    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

    April 14, 2021 at 5:00 pm #282901

    pierredemeudon
    Participant

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

    April 15, 2021 at 6:58 am #283065

    Artem Temos
    Keymaster

    Great, we are glad that you sorted it out!

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Desktop Header with Hamburger and Centered Logo’ is closed to new replies.