Header layout

  1. what would be the proper way to increase .header height just to allow more breathing room and considering this drop down menu?

  2. right now menu top visible border (where it becomes visible) is slightly above image thumbs. how can I move it slightly down so it starts drop down on the thumbs level?


I think it should not more than 30 PX. Because it look awkward with maximum height it’s impact not good on visitor. so you can use sticky header.


You could just add padding top and bottom to the header if you just want more whitespace.

Then you would adjust the top position on the ul to account for the extra bottom padding you added.

The gap is the 7px top padding on those image blocks. You could either remove the top padding from the first two images or just push the menu down another 7px to match what padding was added to the images. Or apply a bottom negative margin to the header to drag those images back up by 7px. Or remove the 7px top padding and add 14px bottom padding to keep the look the same as it is now.


.header{padding:30px 7px;}
.header h1{margin:0;}
main > div {
  flex-basis: 50%;
  padding:0 7px 14px;

@media screen and (max-width:960px){
   .responsive .topnav ul{top:30px}

There are loads of other ways this could go but its up to you to decide which is best for your case.

I’ve update the example with the above changes integrated.



Thanks Paul.

I am also trying to make

<button class="ham-icon">

behave so that cursor changes into a hand. A quick google search returned a few results where it says that things like

<a href="http://www.stackoverflow.com/">
    <button>Click me</button>

are not valid in HTML5…:thinking:…because button element was originally designed as a form element…


A button is not allowed inside an anchor (nor vice versa) and makes no sense anyway because they both have distinct actions that are not compatible with each other.

If you want the cursor:pointer on the button then just add it in css.


  .ham-icon {

It’s as simple as that :slight_smile:



Sorry Paul. I completely forgot about this. I used it before. Thanks for the reminder.


I am trying to build a simple footer for this layout. Please see http://buildandtest.atspace.cc/ for current footer where I used pretty much same display:table code from the header. Its more of a starting point and probably better suits tablet and mobile views (social icons on top of the paragraph with webhost link). For desktop view I would probably “float” social icons to the left and webhost link to the right. Not sure yet…

Since content will vary on each page my understanding is sticky footer could be a solution. I came across this article https://css-tricks.com/couple-takes-sticky-footer/ and was wondering if any of the described techniques could help…

The only technique with flexible height is a flexbox one though…


Try this one by @PaulOB.