Looking for advice on how to build this navigation
I found a piece of inspiration for navigation design on Framer. Wondering how I would acheive this following proper semantics.
The nav is positioned in the center with a border around the container and has a button that is positioned on the right. In the DOM the button is not placed in the nav element.
Is there any way to achieve this with keeping the button in the nav?
I am building this in WordPress with Bricks.
https://agencee.framer.website/
Free Agency Framer Template
Nexa is a free agency framer template for agencies and businesses such as Digital Marketing and SEO Agency, Creative Agency, Digital Agency etc. The design is simple yet modern and very easy to customize.
10 Replies
This should help maybe
This is where grid for headers shines imo
This is usually what I do, but I'm trying to keep the button in the same nav wrapper and style it as last-child. I can acheive everything except the border around the middle navigation items.
Then just go with another wrapper inside
I'm not at a PC or I'd give you an example sry.
I see what you're saying. I'm thinking builder when I should be thinking semantics. Apply a custom nav tag to the outer container. I think you helped me talk through it. 😂
Yup! Np sometimes just taking it out helps
great examples from b1.
was just playing with it myself but forgot to press enter. Here still my pen
https://codepen.io/MarkBoots/pen/KKLWJQp
This actually got me thinking of logo=home it could all be <nav> 🤔
So seeing you do it with just the logo makes me happy 😂
I might have to rethink how I think
haha, yea...
@MarkBoots You're AMAZING! Now it's time to sit and learn from your codepen. Thank you!
@b1mind Thanks for your help too.
This community is amazing for CSS noobs like me trying to learn.