Archived topic
Navigation bar question
4 replies · Started by ballerinamoose on February 9, 2022
What's the best approach to get a navigation bar to look like this? It is slightly wider than the rest of the content, with a little bit of flair on either end. Unfortunately, I don't have a live example.
I'm thinking of maybe defining the width of inside-navigation as larger than the rest of the elements in the grid-container, and setting a background image on inside-navigation... would that work?
Or would it be better to use a header element somehow?
Thanks for your help.
Hi there,
Try this CSS:
nav#site-navigation {
max-width: 1060px;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Ah, thank you! That worked for the width... how would I get the two little triangles in the lower corners (below the bar--they give the illusion of a shadow)?
Never mind, I discovered I could approximate the look I was going for by using the box-shadow property on the nav#site-navigation element.
Thank you! :)
Glad you figured it out :)
