Hey there,
I wanted to achieve a specific thing with my header.
I want to attach a small row on mobile view on different categories that would allow users to browse easily. The idea is the following I want to have a dropdown menu for the parent categories and a sliding single row menu that shows the current parent category subcategories.
So far I did this – for all my 7 parent categories I created custom headers from the manager menu and I created 7 custom menus that I would use. So far so good.
This is how it looks (check on mobile view tho) – https://eurocom.bg/category/bulgariya/
There is one problem – the single line horizontal menu doesn’t scroll until the end and one category isn’t getting displayed. Check this video I made here so that you can see what I mean – https://www.loom.com/share/b04bed87c3204ead863883ee1fad07f6?sid=538719f5-6ffd-4396-92dc-a55aa83b17a2
So my questions are – is there a smarter way to do this? Instead of creating all these menus? Also I want to try to achieve that on my single post pages too but in that case – how can I call the current parent category and its subcategories?
I would be really thankful if you help me doing this! It is a great feature to have on a news website.
Hello!
You can specify the width of the inner columns there. For example: for the first column 20% and for the second one 80%. You can display the subcategories with the Subcategories shortcode on a category page.
There is a shortcode Single Post Categories for the Single Post Template that will display the parent category and the subcategories assigned for that current post. So, you can assign the subcategories to the posts, and then you can display them easily with Single Post Categories.
Thank you!
I tried that but the result is bad. If I set them to 20% / 80% or something similar I risk overlapping because the parent categories I have have different name length I have this one “Свят” (4 letters) and this one “Лайфстайл” (9 letters) and the result is bad. Check the img in the link – https://ibb.co/qryQVsp
Hello!
Do you have any padding or margin on that row/element in the CSS tab?
Thank you!
Hey there, I fixed it by adding specific paddings to the right side of the menu and now it looks great.
I checked the elements you suggested for the posts but I want to find a way to make them look the same as the header at the categories. That would bring consistency to the design of the website. Is it possible for such a feature to be considered in future updates as it will be useful for everyone? A lot of news websites have such headers and it increases the page depth of views if made properly.
Hello!
I’ll add this request to our improvement list!
Thank you!
Can you please guide me on which files are related to the mobile horizontal menu so that I can try to experiment and see if I can edit them to work as I expect them to?
Hello!
The path is this one: td-cloud-library\shortcodes\header\tdb_mobile_horiz_menu.php
Thank you!
Great, with a bit of coding I changed what I wanted and I achieved the desired result (there are some corner cases that I have to fix but it is okay now, I also have to find a way to highlight the categories from the post but I will do that tomorrow).
I changed the inner function and render function, I can post my edits if needed by anyone in the community.
Check eurocom.bg now and whenever you go to a post it grabs its parent category and displays the parent category subcategories in a sliding menu so that the user can easily navigate across the site.
