Navigation with Centered Logo

[gitlerat]

Hi shadeed, thank you for your afford providing this excellent components! I want to suggest adding another style: the navigation with the centered logo. For me then would be everything covered. I am a bit new to github so here is the code:

html (pastebin, because github breaks html here)

https://pastebin.com/raw/g4U4EGex

css

.container { display: -webkit-box; display: flex; justify-content: space-around; -webkit-box-align: center; align-items: center; background: #111; margin: 25px 0; box-shadow: 0 5px 15px -10px #111; }

.logo { -webkit-box-ordinal-group: 2; order: 1; border-radius: 100%; background: #4382d6; box-shadow: 0 0 0 3px #fff, 0 0 0 15px #111; font-size: 24px; color: #fff; line-height: 32px; padding: 10px; }

.item { color: rgba(255, 255, 255, 0.88); text-decoration: none; font-family: sans-serif; padding: 24px; } .item:hover{ color: #fff; background: rgba(255, 255, 255, 0.15); }

.item:nth-of-type(n+4) { -webkit-box-ordinal-group: 3; order: 2; }

@media all and (max-width: 800px) { .container { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: stretch; align-items: stretch; }

.logo { -webkit-box-ordinal-group: 1; order: 0; text-align: center; width: 100px; margin: auto auto 20px; }

.item { text-align: center; border-bottom: 1px solid #111; } }

[shadeed]

Thanks for your suggestion, I appreciate it.

Can you please attach a screenshot to the header design?

[gitlerat]

Hi, thats cool to hear! :+1: Did you mean something like this?