Archived topic
Navigation similar to this example
5 replies · Started by sergey on January 22, 2019
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 :)