[Resolved] Add widget/extended category information above post title

Home Forums Support Add widget/extended category information above post title

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1169541
    William

    Hi there,

    I’m quite new to GP Premium so wanted to confirm how I could make the page look something like this:

    https://www.litcharts.com/lit/1984/themes

    or get my website (https://bookanalysis.com) look as close to this example of a post (from litcharts) as possible.

    I especially like the search bar in the header, category appearing above the post content, and menus that change per category displayed. Is this possible or how would I go about making GP Premium appear like this?

    Many thanks,

    Will

    #1169852
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Best to tackle one thing at a time.

    The first thing I would do is float your navigation right using the Navigation Location option:

    Then, I would add the “Search” widget to the “Header” widget area in “Appearance > Widgets”.

    Then let me know and I’ll provide some CSS to make the layout work.

    #1170250
    William

    Hi there,

    Thank you for your help. I’ve modified the website as much as I think I can and hope that’s good basis to go by.

    With the widgets in the header, is there able to be padding between them as they are directly next to eachother.

    Also, regarding the mentioning of the category appearing above the post content, and menus that change per category displayed, similar to litcharts.com, is this possible?

    Kind regards,

    Will

    #1171045
    Tom
    Lead Developer
    Lead Developer

    Try this CSS:

    .inside-header {
        display: flex;
        align-items: center;
    }
    
    .site-branding {
        order: 1;
    }
    
    .header-widget {
        order: 2;
        margin-left: auto;
        margin-right: 20px;
    }
    
    .main-navigation {
        order: 3;
    }
    
    .nav-float-right .header-widget .widget {
        padding-bottom: 0;
    }
    
    .nav-float-right .header-widget {
        top: auto;
    }

    Can you explain a bit more about the category titles/menus changing? Screenshots pointing out specifically what you’re after might help.

    Let me know 🙂

    #1171422
    William

    Hello,

    This is great. But this has changed the mobile look from the search bar appearing the width of the mobile device. Also, is it possible to have the menu appear as links and not in a canvas? (for the top menu)?

    I’ve worked on adding an element for the category so that’s all good.

    Kind regards,

    Will

    #1171841
    Tom
    Lead Developer
    Lead Developer

    Try adding this as well:

    @media (max-width: 768px) {
        .inside-header {
            flex-direction: column;
        }
    
        .header-widget {
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
        }
    }

    You can change the appearance of the menu items in Customize > Colors > Secondary Navigation.

    #1172500
    William

    Thank you for this – that seems to have worked. In terms of expanding the menu, so it isn’t a drop down, but shows just links for mobile (like it does for desktop), can that be achieved?

    Kind regards,

    Will

    #1172714
    David
    Staff
    Customer Support

    Hi there,

    in Customizer > Layout > Primary Navigation you can set the Mobile Menu Breakpoint to 0 so it uses the desktop nav instead.

    #1172747
    William

    Hello,

    bookanalysis.com looks better – the only issues are:

    1. the primary menu and search bar does not appear side by side for desktop/tablet viewing
    2. for the mobile view, I would prefer the search bar to appear below the header, and the primary menu to be centered

    Thanks for the support,

    Will

    #1172772
    William

    Also, is there a way to change the width of the menu/search bar collectively for desktop/tablet? The search bar has a small width at the moment.

    #1173136
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    This CSS is no longer on the site: https://generatepress.com/forums/topic/add-widget-extended-category-information-above-post-title/#post-1171045

    To increase the search bar width, try adding this:

    .nav-float-right .header-widget {
        width: 300px;
        max-width: 100%;
    }

    Let me know 🙂

    #1173321
    William

    Hi there,

    Sorry about that, I’ve added the CSS back in and added the extra css above. However, it doesn’t seem to have an impact on the width.

    Kind regards,

    Will

    #1173791
    Tom
    Lead Developer
    Lead Developer

    Here’s what I’m seeing now: https://www.screencast.com/t/wNY0VJqMVWW

    If you want it to be wider, you can increase the 300px.

    #1174205
    William

    Hi there,
    That’s great thank you. I think the issue is that on posts, it doesn’t still show correctly:

    http://bookanalysis.com/1984/summary

    #1174535
    Tom
    Lead Developer
    Lead Developer

    That’s because the navigation is floating right like on the other page.

    You could try this:

    .header-widget {
        width: 300px;
        max-width: 100%;
    }
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.