I discovered the cause for the problem ..I don’t want the header/logo to be resized when I scroll down the page and so I added the following into CSS

#header_main .container, .main_menu ul:first-child > li a, .logo img, .logo a {
height: 88px !important;
line-height: 88px !important;
max-height: none !important;
}

This solved the logo resize issue but causing problem on the menu… Can you do necessary modification on the given code (or give me a new code ) to avoid the menu related issue.

How to adjust gap between links in the pull down menus that drops from the header main menus. By default there is a big gap between links due to which the pull down menu touches the status bar of the browser if there are around 4 links. Please advise how to fix this.