How do I add a categories tab bar for my news section

Support
#1

Hi there,

I am trying to add a categories tab bar to my news section…I have been able to achieve a drop down but would like all the categories to be displayed on desktop so user does not have to click and scroll to find the different categories, on mobile the tab bar is fine, just not on desktop.

#2

Hi there,

You will have to create a new menu for the categories then add a Navigation Dropdown element then set the display to only be visible on mobile.

Hope this helps.

#3

But how does the navigation inline know what categories the posts belong to?..I have 4 categories- all, news, press release and video…I want the navigation inline to know each time i posts something that it goes in the right category

#4

Hi Carolina,

When you create a post, you need to assign your posts to your preferred categories. So that it will show it under those categories, when a user click on the respective category menu items.

Under you menus (Appearance -> Menus) you can assign your categories to the menu.

You can also check the following detailed tutorial if needed (https://en.support.wordpress.com/category-pages/).

Hope that helps.

#5

Thats very helpful but I think theres a misunderstanding. All Im trying to achieve is the UI to look like this below:

Thats a screengrab from the portfolio section, how do i achieve this for posts? currently its hidden in a drop down menu…the dropdown menu is good for mobile but not desktop.

#6

Hi,

To make it show on desktop, you can add the code below in Theme Options > CSS

@media(min-width:767px) {
.option-set .x-index-filters {
   display:none;
}

.option-set .x-index-filters-menu {
   display:block !important;
}
}

Hope that helps

#7

It worked but is it possible to stylize it like the one above? thats its in boxes and that whatever the user is in/on is highlighted ? currently there is no indication of what section the user is in

#8

Hi Carolina,

Please add this to Theme Options > CSS

ul.x-index-filters-menu li a {
	border: 1px solid #ccc;
    padding: 5px;
}
ul.x-index-filters-menu li:after {
	content: "" !important;
}

Feel free to adjust the padding value, if you find the rectangle/border is too narrow.

Unfortunately, there is no unique class for the selected item, so nope we can not style it differently from others.

Thanks,

#9

Ok since there is not much styling options and i need to let the user now what category they are in, is have a drop down that shows all the categories option possible like this:

#10

Hi Carolina,

It’s not possible because the filters aren’t a dropdown element by buttons, for that to work, you’ll have to customize the codes itself and use dropdown instead of button. I recommend contacting a developer for better implementation (like using special dropdowns instead of just <select> element).

Thanks!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.