[Resolved] Navigation similar to this example

Home Forums Support [Resolved] Navigation similar to this example

Home Forums Support Navigation similar to this example

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #789534
    sergey

    Hi,

    I would like to set up a navigation like this site if possible:
    https://www.racycles.com/

    Thank you.

    #789562
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Is there something specific about it you’re wanting to achieve?

    From what I can see it looks pretty standard, you should be able to replicate it inside our navigation color options (Customize > Colors > Primary Navigation).

    #789569
    sergey

    I would like to have the logo, search and menu in a row. The second row would be just the sticky menu. I understand how the colors work and how to change. Not sure how to line up the items.

    I’ve been trying various ways…. am I just overthinking it?

    #790137
    Tom
    Lead Developer
    Lead Developer

    The top header could be:

    1. Your logo set in Customize > Site Identity.
    2. A search widget added into the Header widget area in Appearance > Widgets.
    3. The Secondary Nav set to float right.

    Then you can add this CSS to set up their positioning:

    .inside-header {
        display: flex;
        align-items: center;
    }
    
    .site-logo, .site-branding {
        order: 1;
    }
    
    .header-widget {
        order: 2;
        margin-left: auto;
        margin-right: auto;
    }
    
    .secondary-navigation {
        order: 3;
    }

    Depending on necessary browser support, you might want to run that code through this tool: https://autoprefixer.github.io/

    Now, for the sticky navigation bar, I would:

    1. Set the primary navigation to below the header.
    2. Add a navigation logo, and set it to display on sticky only.
    3. Turn on the sticky navigation.

    That should do it ๐Ÿ™‚

    #791409
    sergey

    Thank you very much, that worked.

    #791454
    Tom
    Lead Developer
    Lead Developer

    You’re welcome ๐Ÿ™‚

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