Support » Themes and Templates » [Theme: Twenty Fourteen] Change top menu color from sidebar color


    I’m currently using the Fourteen Colors plugin to change the background, accent colors, etc.

    I am looking for a way to make the top menu a different color than the left side bar.

    Is this possible? I can edit CSS, as I’ve already made a Child Theme.

Viewing 6 replies - 1 through 6 (of 6 total)
  • SideKick Dan


    Hey Joshua,

    If you need to use css, try this code to play with the color.

    .site-header {
    background-color: #ffffff !important;

    Hope it helps 🙂


    dan, i did your code, it does change the menu background color but not the green color when the menu item is mouse over. joshua above seems to have changed his mouse over color. any more tips to change the drop down menu color? thanks you!

    i just found a plug in “Fourteen Colors” which is pretty good but i really appreciate learning how to insert code like you posted above. i learn a lot more than just clicking buttons in a plug in!

    there is some code for .menu-toggle that might work for you, but here’s how I had to change the text and backgrounds on my menu bar (

    Twenty Fourteen Menu

    what to change in Style.css

    To change normal background and Text:

    Text Size:
    11.0 Media Queries section

    .primary-navigation {
    float: right;
    font-size: 11px; <—————- Text Size
    margin: 0 1px 0 -12px;
    padding: 0;
    text-transform: uppercase;

    Text Color:

    5,0 Navigation section

    .site-navigation a {
    color: #ff0000; <————————- Text color
    display: block;
    text-transform: uppercase;


    4.0 header section

    .site-header {
    background-color: #000; <—————– Background color
    max-width: 1260px;
    position: relative;
    width: 100%;
    z-index: 4;

    To change background and text when hovering

    11.0 Media Queries section

    .primary-navigation li:hover > a,
    .primary-navigation li.focus > a {
    background-color: #d00000; <—— Box color
    color: #fff; <——————– Text Color



    In case anyone is still looking at how to change the theme twenty fourteen, I have used the plugin fourteen colours and also installed STyles and then STyles: Twenty Fourteen. you will then have a host of options from changing the heading colour and font!! to being able to change the menu styles/colours etc. No playing with the css so bonus for me.

    Word of Warning: if you have Mail Chimp lite installed you will have to unistall it otherwise Styles: Twenty Fourteen won’t work.

    P.S. I found these plugin suggestions here:

    Can you please tell me how to make footer fixed in twenty fourteen ?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Theme: Twenty Fourteen] Change top menu color from sidebar color’ is closed to new replies.