Sticky menu - jak na to?

Dobrý den,
jsem v kódování HTML a CSS začátečník. O javascriptu ani nelze mluvit. Vytvořil jsem Wordpress síť (http://www.knihazivota.cz/), kde mi chybí jedna funkce: a to tzv. sticky menu.
O co jde?
U běžného menu, když teď scrooluji, zůstává nahoře. Ale já bych potřeboval, aby vždy bylo vidět, i když uživatel zajede třeba do patičky.
Jak vidíte, teď tam sticky menu mám, ale má velký nedostatek: je průhledné, nemá to růžové pozadí. Navíc by bylo ideální, aby při scroolování přibylo na to menu, nalevo od "Domů" to logo/nápis "KNIHA ŽIVOTA". Vím, že chci moc.
Zatím by stačilo jen vyřešit to (ne)pozadí.
Free pluginy to vyřešit nejde, už jsem to mnohokrát zkoušel (pokud jsem to nedělal špatně). Jedinou možnost vidím v tom, že to od základu naprogramuji. Netušíte, kde najdu nějaký dobrý zdroj, který tento postup vysvětluje? Nic se mi nedaří najít, maximálně velmi složité a málo popsané návody, podle nichž se nedovedu řídit... :(
Děkuji za odpověď

Nějak si nastavoval sticky toho menu, tak je potřeba to v kodu nastavit o několik úrovní výš, aby se do toho započítalo celý proužek.

Možnosť 1.

a) V prvom rade skús vymazať to čo spôsobuje to sticky menu priehľadne ( nech je to v pôvodnom stave ).
b) Potom sa skús pozrieť či náhodou tá téma ( christmass bell ) , ktorú máš aktivovanú, nemá kdesi nastavenie na sticky menu.

Možnosť 2.

a) V prvom rade skús vymazať to, čo spôsobuje to sticky menu priehľadne ( nech je to v pôvodnom stave ) a potom pridaj kdesi do css:



#header-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 50;
}

body {
padding-top: 135px;
}

a) Pokiaľ nevieš vymazať to, čo spôsobuje to sticky menu priehľadne pridaj navyše k tomu kódu toto:
#site-header-menu {
position: static !important;
}



Padding pre body element je taký veľký, ako je výška hlavičky, pokiaľ bude v mobile výška hlavičky väčšia alebo menšia, budeš musieť pridať ešte media query

@media only screen and (max-width: 768px) {
body {
padding-top: (*výška headeru*)px;
}
}