Metronic 9 Tailwind - HTML
Hello,
Question 1:
On https://keenthemes.com/metronic/tailwind/demo5/, I would like to make the navigation section (containing menu items like Dashboards, Public Profiles, Account Settings, Network, Authentication, Store-Client, etc.) stretch fully across the screen on desktop view — without any padding or margin on the left and right sides.
Currently, it behaves perfectly on mobile (scrollable and responsive), but on desktop it appears aligned to the left with unused space on the right. How can I make it span the full width of the screen on desktop?
Question 2:
On this page: https://keenthemes.com/metronic/tailwind/demo5/store-client/home, the cards feature a badge in the top-right corner.
How can I apply badges to all four corners of an image-based card, such as those found on this page: https://keenthemes.com/metronic/tailwind/demo5/public-profile/profiles/creator? I’m aiming to place badges on the top-left, top-right, bottom-left, and bottom-right of each image within the card.
I’m currently using Tailwind CSS along with HTML. Thank you very much for your support!
Regards
Replies (3)
Hi,
Changing the demo5 layout navigation as per your requirements would require major changes in the codebase. If you can contact us via support@keenthemes.com send your preferred layout wireframes we will consider adding it as a new layout in the upcoming updates.
Placing the badge as per your requirements you can reuse the code and position it as you need:
kt-badge kt-badge-destructive kt-badge-sm absolute top-2 end-2 uppercaseYou should put this under a card with "relative" class and use "bottom-2", "start-2" classes to set left and bottom positions. For more info please refer to the position direction classes of Tailwind:
Regards,
Sean
Hello,
Thank you for your quick response. I have already tried the code you shared, and there are no issues with the top right and top left positions. However, after adding the bottom class, the badge image is not positioned on top of the image, but on top of the text below it. In other words, it is positioned at the bottom of the card, not the bottom of the image. I am using the cards with images shared in the link below:
https://keenthemes.com/metronic/tailwind/demo5/public-profile/profiles/creator
I would greatly appreciate your help.
Best regards
Hi,
Then try to use "z-10" z-index classes for the badge if its related to the positioning issues. This is more tailwind customization rather than the Metronic issue so we are not quite sure how your a customizing it.
Regards,
Sean
