Add widget/extended category information above post title

[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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[David]

Hi there,

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

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

[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

[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.

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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

You could try this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts