Header Menus

[giscus[bot]]

Header Menus

This article describes how to configure the header’s menus.

https://hbstack.dev/en/modules/header/menus/

[bigkevuk]

HI Razon, I can't see where in the parameters how I can make the menu go along time as per the screenshot here.
It's always the ... as per the site is currently displaying this page if that makes sense.

So to be clear I have done a clean install and the menu is under the ... at the top right. Just like it is for this website.
What I would like to do is to have the items across the top as per the image on the top of this page.

Hope this makes sense and any help apprecaited.

[razonyang]

Could you please provide screenshots what you want to implement? I don't get it.

[razonyang]

If you mean the social links (icon buttons) on the right, see https://hbstack.dev/en/modules/header/socials/.

If you mean the header image/background, see https://hbstack.dev/en/modules/header/banner/.

The banner is not included in the theme, you should import the module yourself and tweak the parameters.

If you're requesting a new feature, please file an issue for it and describe it in detail if possible.

[razonyang]

The header parts as follows.

You can find the working configurations and examples on the docs and original theme template (github.com/hbstack/theme).
Please feel free to ask if you don't remember and can't find where it is.

[bigkevuk]

I think the media queries are set-up wrong and see where the confusion is from my side :-)

1920x1080 - Desktop View

1600x900 - Desktop View

1440x900 - Desktop View

1365x768 - Mobile View

1280x960 - Mobile View

Lenevo X13 Yoga Screen: 2560x1600 @ 200% recommended scale give Mobile View

Changing to 100% makes it a a lot harder to use but does give desktop view

[razonyang]

The theme is designed to collapse the menus when the width less than 1400px, and expand when the width is great than that point.
Please file a new issue for this if you want to see it can be configurable, but it may not happen so fast, I think there are some stuff need to be pay attention.

[bigkevuk]

Thanks for the heads up :-) will take a look

[TetraTheta]

How can I use custom SVG/PNG for icon of menu? Icon module doesn't seem to support 'custom icon'.

For example, I'd like to add icon as transparent PNG or custom SVG which is not provided from venders of Icon module.
Since subject of my custom icon is not popular, I can't ask those vendors to add my icons.

↑ Example of 'custom icon'.

Currently, it seems without forking or overrideing Menus module, I can't use my icons in menu.

---

Also, how can I remove 'grey gradiented rounded square backgroud' from menu icon? I want it to have different style or not displayed.

↑ This 'grey gradiented rounded square backgroud'.

[razonyang]

You can just put your SVG (not PNG) icons on assets/icons/whatever (whatever is the vendor name, replace with whatever you want), and then you are able to use it in menus.

You can override the via custom styles with the !important option. I don't suggest to override the layout, since there is no gurantee there won't be BREAKING CHANGES on the layouts/partials.

.dropdown-item-icon {
    background-color: transparent !important;
}

[TetraTheta]

If then, how can I use PNG icon? Like I said, I want to use PNG icon because I can't find SVG icon that I can use.

[razonyang]

You can either 1) specify the raw PNG <img> HTML as the pre or post property, or 2) convert the PNG to SVG and follow the steps I mentioned above.

[TetraTheta]

Thank you!

I've managed to convert PNG to SVG, so I can use it without making HTML code stuff.