CSS and layout for new header for website desktop and mobile version

I need some creative ideas for redesign the header of my website [login to view URL] in a way that it could be implemented straight along for mobile with more narrow displays. First steps are prepared and clear but not implemented as it affects unfinished portions: 1) upper menu above the header as a simple text line 2) lower menu line moves up to the top of the header and becomes mainmenu 3) the new empty line is used for social media buttons and search input 4) adsense 728x90 earns nothing at that position and has to move into content below 5) blue breadcrumb below the header might be a simple text line -------- Here your job starts: the lower blue breadcrumb should vanish, but there are 3 pages where it is (currently) used and needed: a) menu items "Autoren" and "Themen" have a letter array A..Z for chosing first letter of names/topics. This has to be redesigned b) menu item "Sprichwörter" (engl. "sayings"): it has some geographic selections and most right "Bauernregeln" which is a special section of saying. These need to be rearranged. The links of a) and b) are needed and have to remain but should be placed better -------- Hints: Right column will be reduced from 300px to 200px. Also the layout of the content pages will be changed to more straight along style and put the focus on text. The graphics elements will be reduced. ------------------------------------- What I need is: a solution how to implement the new header section for web and also adaption for a (sperate [login to view URL]) mobile website layout + css code