[Support request] Centered navigation with logo on the left

Home Forums Support Centered navigation with logo on the left

  • This topic has 1 reply, 2 voices, and was last updated 1 year ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1232145
    Filip

    Hi there!

    First off: I love the theme – it’s a brilliant product.

    However, I’m having trouble setting up a fairly easy (if I were to code it from scratch) header design that would contain a logo on the left, centered navigation and some additional content on the right (a text widget).

    Screenshot: https://d.pr/i/gQphSj

    The question is: do I have to completely wipe the default GeneratePress and code this from scratch (which I wouldn’t like to do because I’d strip my client from native theme functionality and Customizer) or are there some steps to create a “base” for such design and add some of the additional content with hooks + extra CSS styling?

    Thanks!

    #1232424
    David
    Staff
    Customer Support

    Hi there,

    Glad to hear that 🙂
    theres a few ways to do this – the simplest method requires this setup:

    Normal Site header with logo ie.NOT navigation as header.
    Primary Navigation Location set to Float Right
    Widgets added to the Header Widget

    and some CSS:

    .inside-header {
        display: flex;
        align-items: center;
    }
    .header-widget {
        top: unset;
        order: 10;
    }
    .main-navigation {
        margin-left: auto;
        margin-right: auto;
    }

    Depending on the design / logo widths / nav length etc. it will require a little CSS to tune that layout.

    Alternative options when using the Navigation as Header or the Mobile Header is GP Hooks to insert other content. Two hooks are: inside_navigation and inside_mobile_header. Will require some Flex CSS for re-ordering.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.