[Resolved] Block Element – Site Header .. float right nav?

[William]

Aloha GP Team 🙂

I just built my first ‘Block Element – Site Header’

I couldn’t be happier – the combo of Elements and GenBlocks is making multi-device designing a dream 🙂

But I’m confused on one thing:

In the Customizer … Layout >> Primary Navigation > Navigation Location

If I choose ‘Below Header’, my Primary Navigation appears perfectly below my custom ‘Block Element – Site Header’

But if I choose ‘Float Right’ it disappears.

Do I need to do something special with my ‘Block Element – Site Header’ so that it can accept/handle the ‘Float Right’ option?

Or do I somehow add the Primary Navigation directly into the ‘Block Element – Site Header’ design as a shortcode or widget?

Thanks a million for any insights you can offer on this one 🙂

_Bill

[Fernando]

Hi William,

A Block Element – Site Header overrides the actual/default Header. For this reason, the primary nav wont work if you set it to “float right” for instance. You’ll need to manually add it in the Block Element.

You can use a WP Navigation Block or simply, GenerateBlocks Headline or Button Blocks.

Using a Block Element – Site Header is ideal if your planning to make a totally custom header design. 🙂

[William]

ahhhhh … that makes MUCH more sense 🙂

Then is there a way to replace just the logo/title/description ‘area’ of the default header with a custom element?

Thanks a million for helping shed light on this Fernando 🙂

_bill

[Fernando]

You can replace those in Appearance > Customize > Site Identity.

Or are you trying to create a specific custom design? You can try to use a Block Element – Hook, hooked to after_logo, and we can hide the logo, etc. through CSS. 🙂

[William]

Aloha Fernando,

OK – so that hook was super easy, but it’s not what I want — but I did learn something – so thank you!!

Maybe this image is the best way to tell you what I need:

GP offers all the type/logo controls I need for Desktop and Tablet.

I just need the logo, title, and description to all align center on mobile.

I don’t see the mobile design above as achievable via the Customizer.

Do you have a preferred chunk of CSS (or another method) to do this?

You the best – thanks!

_BIll

[Ying]

Hi Bill,

Any chance you can link us to your site so I can take a look at the current custom header structure?

Let me know!

[William]

Aloha Ying – sorry for the delay 🙂

I think I’m moving away from the “custom header structure” because I need to use the Primary Nav. options only available in the Customizer.

But I did mock-up the simple look I need – pretty standard Branding area layout – but goes center aligned on mobile.

I just don’t know how best to do the centering, and don’t see the controls for this in the Customizer.

I’m sending you the mock-up 🙂

[Fernando]

Where would you like the hamburger menu toggle icon be on mobile?

And, would the site title and description still appear on mobile?

[William]

Aloha Fernando,

Where would you like the hamburger menu toggle icon be on mobile?

– center aligned under branding

And, would the site title and description still appear on mobile?

– yes.

Thanks!

_bill

[Fernando]

I see. Thank you for clarifying!

You can try this CSS:

@media (max-width: 768px) {
    .site-branding-container {
        flex-shrink: unset;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .site-header .inside-header.grid-container {
        justify-content: center;
    }

    .site-header nav#mobile-menu-control-wrapper {
        margin-left: unset;
    }
}

[William]

Thank you Fernando!!! Just got back to this one 🙂

You the best!

_bill

[Fernando]

You’re welcome William! 🙂

[Author]

Posts