Site logo

Archived topic

Navigation similar to this example

5 replies · Started by sergey on January 22, 2019

Viewing posts 1–6 of 6

Hi,

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

Thank you.

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

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?

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 :)

Thank you very much, that worked.

You're welcome :)

This archived topic is closed to new replies.