[Resolved] Blog Categories filter on Blog page

Home Forums Support [Resolved] Blog Categories filter on Blog page

Home Forums Support Blog Categories filter on Blog page

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1574605
    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!

    #1574712
    Leo
    Staff
    Customer Support

    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?

    #1574750
    Ireneusz

    Hi Leo,

    Yes, actually Dispatch layout is a good start.

    Thank you!

    #1575913
    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!

    #1576007
    David
    Staff
    Customer Support

    Hi there,

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

    #1576145
    Ireneusz

    Sure!

    #1576285
    David
    Staff
    Customer Support

    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">

    #1576319
    Ireneusz

    Perfect! Thank you David!

    #1576544
    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!

    #1576788
    David
    Staff
    Customer Support

    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.

    #1577076
    Ireneusz

    Done!

    #1578012
    David
    Staff
    Customer Support

    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;
    }
    #1578226
    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!

    #1578410
    David
    Staff
    Customer Support

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

    #1578659
    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;
    }
Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.