[Resolved] ChildPages Navigation Below Page Header

[Naman Nepal]

Hi,

Is there a way I can setup a navigation/option to display a list of child pages for parent pages after the page header?

Here’s an example of what I meant: https://prnt.sc/koqbjd

Thanks!

GeneratePress 2.1.4

GP Premium 1.7.2

[Leo]

Hi there,

Not quite sure if I understand what you mean.

So what would be in the primary navigation?

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

[Naman Nepal]

Hi Leo,

Primary navigation can have anything we want it to be there that we add from “Appearance>>Menus” on WP.

On the nav below the page header, I want to show child pages of the parent page I’m on.

Let’s say we have three pages (Page 1- the parent page, and Page 2 and Page 3- the child pages). I want to show Page 2 and Page 3 in the nav below the page header.

Or, say Page 4 has child pages Page 5, Page 6, Page 7. Then, Page 5, 6, 7 will be in the nav below the page header.

Do you understand now?

[Tom]

Hi there,

There’s nothing inside GP that will allow you to do that.

How would child pages be defined?

You may need to ask over on https://wordpress.stackexchange.com/ how to get a list of child pages from a parent.

Then you could hook that solution into the theme after the page header like this:

add_action( 'generate_after_header', function() {
    // The solution in here
}, 15 );

Sorry I can’t be more helpful!

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

[Naman Nepal]

Nice, this helps!

[Naman Nepal]

Hi Tom,

I had to re-open this again for a simple request again.

I’ve achieved what I wanted to (but had to go with a different layout). I’ve created a sidebar that only shows child pages here. – http://bit.ly/2C20ZMz

For pages with less child pages, the design looks perfect. (Example: https://prnt.sc/kp4pcv)

But for pages with a big list of child pages (and on smaller screen) the body content falls behind the sidebar I created. (Example: https://prnt.sc/kp4ql9)

I’ve set the sidebar to have position: absolute !important;.

How can I avoid the content to fall behind? (I tried setting up the position to relative but that brought the body content up in the header for pages that don’t have child pages).

Any help will be appreciated.

Thanks.

[Tom]

What if you added it inside the content (before_content), and then set it to float left instead of absolute positioning it?

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

[Naman Nepal]

Thanks Tom!

This seem to remove the spacing issue. But since my container width is set to 1080px, how do I float it to the left of the whole page and not just the container?

[Tom]

That won’t be easy to keep responsive. Any chance you can link me to what you have so far?

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

[Naman Nepal]

Don’t need it to be responsive. I only want it on the desktop. (Will add class to turn off on mobile and tablet).

How do I get you my details if you want to login and see?

[Tom]

You can send them through an account issue form here: https://generatepress.com/contact

Just be sure to mention this topic 🙂

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

[Naman Nepal]

Just did that. 🙂

[Tom]

The problem with doing this is you’ll end up with the nav overlapping the content.

However, if you add a media query to include the container width + the width of the nav, it might work:

@media (min-width: 1300px) {
    .subpagemenu {
        position: absolute;
        left: 0;
    }
}

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

[Naman Nepal]

This did not seem to work, Tom.

I might have another fix. By setting up a left sidebar and then moving it to left: 0.

I tried doing that but I can’t seem to get the sidebars to the left most of the page. Is there a fix for the sidebars to have left: 0?

[Tom]

I would actually keep it the way we were trying. Any chance you can change it back and add the CSS I suggested again? I should be able to tell why it’s not working 🙂

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

[Author]

Posts