[Resolved] Blog Categories filter on Blog page

[Ireneusz]

Hi guys,

I’m trying to recreate a blog page that would allow me to filter posts based on a category list below the menu.

The one way of thinking is to create a different page for each category with a list of all categories and use Tom’s great plugin WSP to show posts with a category taxonomy for respective pages.

The other one is to use gp_elements and add a header with the category list to refresh posts below (I would appreciate any hints pointing in a good direction!).

What approach is better?

Thank you!

[Leo]

Hi there,

I’ve got a couple of examples in our site library:
https://gpsites.co/read/
https://gpsites.co/dispatch/

Is one of them what you are after?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ireneusz]

Hi Leo,

Yes, actually Dispatch layout is a good start.

Thank you!

[Ireneusz]

Hi again,

How can I add a vertical line (top/bottom border) across the whole page below the generate_after_header hook separating secondary menu with blog posts only on blog website and archives?

Thank you!

[David]

Hi there,

can you share a link to your site so i can see the layout?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ireneusz]

Sure!

[David]

Try this CSS:

body:not(.single) .second-nav {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #fff;
}

and to make it full width edit the HTML you have for the secondary-nav wrapper ie.

<div class="second-nav grid-container">

and remove the grid-container class so it looks like:

<div class="second-nav">

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ireneusz]

Perfect! Thank you David!

[Ireneusz]

Hello,

May I have a question regarding second navigation? Currently it behaves as a normal navigation with a toggle menu on mobile. Eventually I would like to avoid that and be able to swipe menu left/right in one line on mobile. Is that possible?

Thank you guys, I really appreciate your work!

[David]

This article explains how to disable the Mobile version of the secondary nav.

https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

once done ill find the CSS to make it swipeable.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ireneusz]

Done!

[David]

Try this CSS:

#menu-category {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: mandatory;
}

.secondary-navigation .sf-menu>li {
    scroll-snap-align: start;
}

#menu-category ::-webkit-scrollbar {
    display: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ireneusz]

Thank you David for that code. Menu collapsed into one line, but the scrollbar position is still visible on web and mobile what covers the whole menu. Maybe because of the height of the menu

Can I somehow make the scrollbar transparent on mobile? If not, increase the gap to 10px between items and underline to avoid the scrollbar on the menu items (with the underline on the same level as margin)?

Thank you!

[David]

In Customizer > Layout > Secondary > Navigation increase the Menu Item Height.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ireneusz]

Thank you David, I forgot about that.

I think my CSS is messed up a bit – how can I lower the underline?

.menu-text {
    position: relative;
}

.secondary-navigation li.current-menu-item > a .menu-text {
    border-bottom: 3px solid #f1c40f;
}

[Author]

Posts