Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
dlip
8,499 PointsHow to get center menu logo to overlap page content
I'd appreciate guidance in how to achieve this common effect.
To have the logo center, and half of the nav bar items on the left of logo, and half on the right. In addition, to have the logo OVERLAP the content below. Here's an example of what I mean: http://templatation.com/Site-templates/Cakery/
What's the best way to going about achieving this? With a flexbox? To create 2 separate nav's and place a logo div between them?
Thanks a lot
2 Answers
Christian Andersson
8,712 PointsThe best way is to create a normal navbar with an unordered list and each menu option being a list item. The site you link to has 4 items, the logo would go between the 2nd and the 3rd item.
I would personally set one of those two to have an :before or :after pseudo-element to serve as the logo. You can then have that list item take some extra margin to make "room" for the logo.
Here's a demo I made: https://jsfiddle.net/kjnpoL6v/
Owa Aquino
19,277 PointsWell, my preferences would be creating two navigation tag and a logo (img tag) between them. Then style the layout using flexbox so they'll stick together.
There are so many ways actually.
Cheers!
dlip
8,499 PointsThank you!
dlip
8,499 Pointsdlip
8,499 PointsThank you!
Christian Andersson
8,712 PointsChristian Andersson
8,712 Pointsdlip no problem. If this solved your question, please mark it as solved. Thanks