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

Home Forums Support [Support request] Block Element – Site Header .. float right nav?

Home Forums Support Block Element – Site Header .. float right nav?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2296760
    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

    #2296770
    Fernando
    Customer Support

    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. 🙂

    #2296776
    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

    #2296799
    Fernando
    Customer Support

    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. 🙂

    #2297596
    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:

    Header design

    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

    #2297609
    Ying
    Staff
    Customer Support

    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!

    #2301349
    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 🙂

    #2301356
    Fernando
    Customer Support

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

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

    #2302650
    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

    #2302674
    Fernando
    Customer Support

    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;
        }
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.