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! 👍
Did you mean something like this?