shadeed / headers-css

The blueprint HTML and CSS for 17+ website headers

Hello 👋

My name is Ahmad, Digital Product Designer and Front-End Developer from Palestine. I enjoy working on large scale product design and front-end projects which involves solving complex design problems.

I have a business named Uxable that is specialized in user experience design and front-end development. In my free time, I write in-depth articles about CSS. I own three blogs:

• www.ishadeed.com
• www.rtlstyling.com
• www.a11ymatters.com

📘 I wrote an ebook about Debugging CSS. Check it out and let me know what do you think!

How to reach me

The fastest way to reach me is via Twitter @shadeed9. If you prefer email, feel free to email me: shadeed9[at]gmail.

Supporting my work

If you want to support my open source projects, I would appreciate buying me a coffee.

headers-css's Issues

Navigation with Centered Logo

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;
}
}

Redundant display of menu

Hello Shadeed.
I am new to github so kindly excuse if I raise the issue in anomalous format.
While exploring "Header 12" file I notices the there is a menu button as well as the list is displayed in the "sub_nav" class.

This is persistent even when the window is resized.

Thank you.

Problem when menu drops down, it seems to slide underneath the main content

I tested on a few of your header designs, and it is the same issue when you click on the menu button. The nav__wrapper seems to slide underneath the main content. I tried to remove the z-index: -1 on the nav__wrapper, it seem to fix the problem, but now it slides over the site-header, and not underneath it. Here is a codepen link that demonstrate it https://codepen.io/QTT/pen/wvgEoPW