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

  1. JoshuaMunoz
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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

  6. SherenaNZ
    Posted 1 year ago #

    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: http://premium.wpmudev.org/blog/7-plugins-and-child-themes-to-enhance-twentyfourteen/

  7. Khan Mohammad Rashedun-Naby
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.