Add widget/extended category information above post title

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.

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

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 :)

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

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.

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

Hi there,

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

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

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.

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 :)

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

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.

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

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

You could try this:

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