Ready to get started?Download WordPress


[Theme: Twenty Fourteen] Change top menu color from sidebar color (5 posts)

  1. JoshuaMunoz
    Posted 8 months ago #


    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.

  2. SideKick Dan
    Posted 8 months ago #

    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 :)


  3. freshwater
    Posted 7 months ago #

    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!


  4. freshwater
    Posted 7 months ago #

    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!

  5. hdemina
    Posted 2 months ago #

    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 (http://relayravens.org):

    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


You must log in to post.

About this Topic


No tags yet.