[Resolved] Navbar, blog layout, and content hook questions

[Alasdair]

Navigation padding

I am looking to increase the padding of the primary navigation. Currently, it is a different colour to the content body. However, using –

.main-navigation{
	padding-top: 30px;
	padding-bottom: 30px;
	}

However, I also have the primary navigation set to sticky with a slide transition so the bar looks overly big when moving about the page. Adding margins instead of padding unfortunately exposes the different content colour above and below the navigation. Is there a way to add padding only to the navigation when it’s at the top of the page?

Blog layout

On blog and archive pages is it possible to move the post categories to appear underneath the date rather than after the ‘Read more’ button?

Content hook

Is there a hook for places elements (in this case social sharing buttons) after the post content, but before the category and tag metadata?

Widgets added with hook

I am also trying to add widgets for categories and archive to the bottom of the blog and every archive. Is there a way to place them in a container to match the rest of the content as well as display them centred and side by side rather than one underneath the other?

[Leo]

Hi there,

– Have you considered using this option?
https://docs.generatepress.com/article/navigation-as-a-header/

Then you can adjust the navigation height and the sticky navigation height as instructed in the link above.

– This should help:
https://docs.generatepress.com/article/generate_header_entry_meta_items/

Adding PHP: https://docs.generatepress.com/article/adding-php/

– Try this:
https://www.screencast.com/t/wKwdqlyrHWN

We will add this hook to the list in the next update.

– Can you add it in first and link me to the page so I can see the container issue? As for side by side, you will need to create columns similar to this HTML here:
https://docs.generatepress.com/article/split-header-three-sections/

Let me know 🙂

[Alasdair]

Thanks for the reply.

Navigation padding

Perfect! Sorry, I didn’t even notice the separate height field for the sticky nav.

Blog layout

My PhP knowledge is near zero. What would be the basic code for adding a folder icon and categories on a line above the date on blog feed and archives but not single post pages? When I tried modifying the examples I ended up with categories (with no folder icon) on same line as date on blog feed and categories added to top of all single post pages.

Content hook

Similar to the “after_content” hook adding a custom “generate_after_entry_content” also places the element after the categories, rather than before.

Widgets added with hook

I managed to get part of the way thanks to your link. So you’ll see at the bottom of the blog feed the two widgets. What I want is for them to be in box so it looks like the blog post containers above and for the widgets to be centered within their divs.

Thanks again!

[David]

Hi there,

Blog Layout:

This filter to move the categories on blog:

add_filter( 'generate_header_entry_meta_items', function( $items ) {
    if ( is_home() || is_archive() ) {
        $items = array(
            'date',
            'categories',
        );
    } return $items;
} );

This filter to remove the categories for the blog footer meta:

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    if ( is_home() || is_archive() ) {
        $items = array_diff( $items, [ 'categories' ] );
    }
    return $items;
} );

And then this CSS for alignment and icon:

.entry-meta span.cat-links {
	display: block;
}

.entry-meta span.cat-links:before {
    display: inline-block;
    visibility: visible;
}

Content hook

Reduce the Priority to 1 in the Hook Element to move your content above.

Widgets added with hook

Add to this line of HTML the inside-article class:

<div class="cat-and-archive inside-article">

Then you can center the two widgets and add some bottom margin with this CSS:

.cat-and-archive {
    text-align: center;
    margin-bottom: 40px;
}

[Alasdair]

Thanks David –

Blog Layout:

Sorry if I was not clear. What I want to achieve is –

1. Keep the categories at the end of the content when viewing individual posts.
2. When viewing blog roll or archives place the categories after the date and before the blog excerpt.

I was able to modify the code to achieve 2, however it also places the category at the top when viewing individual posts. Is there a view to make the code not apply to the post page but only the blog roll and archive pages?

Content hook

Perfect!

Widgets added with hook

Magic! Only got a couple of issues left.

1. Adding responsiveness so that the containers move one under the other on mobile view.
2. When loading more posts and scrolling to the very end the header and footer elements are duplicated.

Thanks again.

[David]

Blog

Do you still have any other snippets added, like those when Leo originally posted the articles? As the code i provided should only apply to the Blog/Archives.

Widgets added with hook

@media (max-width: 768px) {
    .cat-and-archive {
        flex-wrap: wrap;
    }
    .cat-and-archive > div {
        width: 100%;
        margin-bottom: 2em;
    }
}

You will need to move the Hooked in widgets outside of the content, try putting them before_footer

[Alasdair]

Blog

Code I added as snippet is –

add_filter( 'generate_header_entry_meta_items', function( $items ) {
    if ( is_home || is_archive() ) {
        $items = array(
			'date',
                        'categories',            
        );
    } return $items;
} );

It and snippet to add a Google font are the only snippets active. With it active categories are appearing at the top of blog posts.

Widgets added with hook

That’s the responsiveness fixed cheers. However, with before_footer hook the container is full-width rather than contained – and the header and footer still duplicate when loading more posts.

Thanks again for all your help, much appreciated.

[David]

Sorry made a mistake in the code here been updated to provide the end result.

Can you remove the Widget hook for the time being so we can check that it is the issue ( pretty sure it is ).

[Alasdair]

Blog

That’s it working now, cheers. What would be the CSS for modifying the amount of spacing after the ‘Read more’ buttons? I can’t seem to find the right class when picking elements using Firefox’s developer tools.

Widgets added with hook

Was still happening with element disabled – so after some investigation it turned out to be a plugin causing the issue! I had been looking for a Gutenberg block plugin to add code blocks with syntax highlighting and installed the Enlighter – Customizable Syntax Highlighter plugin. Deactivated it and the blog feed and archive pages work normally again – so been able to go back to the original after_primary_content hook.

[Leo]

Blog

I assume you want to remove some space?

If so try this CSS:

.blog footer.entry-meta, .archive footer.entry-meta {
    margin-top: 0;
}

Let us know 🙂

[Alasdair]

Perfect, thanks.

[Leo]

Glad we could help 🙂

[Vebjørn]

This is excellent.

I also wanted to move the category-field below the date (and not at the end of the excerpt). Now it’s done in 20 mins. Thank you, David and Leo! This saved me a lot of time and effort 🙂

And the excellent documentation showed me how to add php and css. Great theme and great support.

[David]

Glad we could be of help

[Author]

Posts