Fix the sticky header. On wider screens it is really screwed up.

[sumeetpareek]

Fix the sticky header. On wider screens it is really screwed up.

Most of developers are on smaller screens and never really noticed this.. but if we use FF and test the site on a really wide screen.. (using FF CTRL+SHIFT+M frame).. this is what we see..

[sumeetpareek]

Some of the reasons why the header is screwed up..

• in AAP Layout .. both the Top Row and Top Region has been assigned the same class name = top-header-row .. which has been then styled to show the fixed content etc.. and the SASS / CSS to do that is just not right ..
• TO FIX - We should add a different class 'top-header-region' to the region.. and change our CSS accorgingly.. looking at facebook or some other website should give us a better indicator of how to put our CSS together..

Steps for solving -

• remove width style from top header row
• remove padding too
• most out should be display block
• then inner shoudl be postion fixed with l,r,t = 0 and margin = 0
• the next inner should have width and margin auto

// Add the below
.panels-flexible-row-aap_layout-main-row {
  display: block;
  .panels-flexible-row-aap_layout-main-row-inside {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
  }
  .top-header-region {
    width: 1000px;
    margin: 0px auto;
  }
}
// Remove the below
.top-header-row {
    padding: 0;
  width: 1000px !important;
  left: 0px;
  padding-left: 8em;
  padding-right: 10em;
  margin-left: 0em;
  z-index: 9990;
  background: white;
  border-bottom: 1px solid green;
  position: fixed;
  top: 0;
}

[tkuldeep]

@sumeetpareek Now on wider screen is showing like this

and on normal screen

I am changing width from 1000px to 1130px.

[sumeetpareek]

@tkuldeep This is not okay.. We want the content inside the header aligned just like the rest of the page.. the left edge of the logo with the the left edge of page text you see in below paragraphs.. the right edge of the donate/contact buttons with the right edge of the right sidebars..

[sumeetpareek]

Fixed here and in #120