[Support request] Hiding site identity and different primary navigation location on different page

[Phil]

On home page have merge w/ site header, prime nav float right, identity shown. On other pages, client wants to hide site identity and move primary nav below banner, as both hides the banner (also how to resize banner so it “fits” and not cut off). Is it possible to set this up for pages other than the home page? Here’s what I mean:

http://model.noticedwebsites.com/ (home page)
http://model.noticedwebsites.com/731-2/ (contact page).

Thanks for suggestions. I’m using Elementor 1.5.3, if that helps.

[Tom]

Hi Phil,

Hiding the site identity on all pages except the home page can be done with this CSS:

body:not(.home) .site-branding {
    display: none;
}

For the navigation, set your global navigation location to Below Header (Customize > Layout > Primary Navigation).

Then use the filter to set it to float right on the home page:

add_filter( 'generate_navigation_location', 'tu_home_float_right' );
function tu_home_float_right( $location ) {
    if ( is_front_page() ) {
        return 'nav-float-right';
    }

    return $location;
}

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

[Phil]

Hi Tom,
Thanks. Both code worked. I pasted the CSS code in style.css, didn’t work (have a child theme) but when I pasted into your Simple CSS plugin it worked then.

I noticed though, after setting primary navigation below header as per your suggestions, the home page’s title, tag line and primary nav are far from top now. I pasted this CSS code into Simple CSS to try to reposition then, but no affect:

body:.home.site-branding {
display: top;
}

How would I get the home page’s title and tag line & primary navigation closer to the top for balance. Here’s home page as it looks now: https://bruce-art.ca/

Thanks again.

Regards, Phil

[Leo]

Try reducing the top header padding: https://docs.generatepress.com/article/header-padding/

[Phil]

Hi Leo,

The problem is I just want to reduce the top header padding of the Home page only and not affect the other page’s header (The home page header is merge w/ site header, the other pages have a different header; bruce-art.ca vs. https://bruce-art.ca/contact/ for example).

[Leo]

I see. Try this CSS then:

.home .inside-header {
    padding: 40px 0px 137px 0px;
}

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

The notation is top, right, bottom, left.

[Phil]

Thanks Leo. I should have saw that. Code worked great!

BTW, is there a list of Generate Press selectors so that I can guess which selectors I can target to apply CSS styling to? That would be a handy guide.

Thanks again.

Regards, Phil

[Tom]

That’s been requested a few times – I’ll try to get something up soon 🙂

[Author]

Posts