WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] How to change nav menu css in twenty twelve ?

[Resolved] How to change nav menu css in twenty twelve ?

Viewing 8 replies - 1 through 8 (of 8 total)
  • leejosepho

    @leejosepho

    I had to have someone else work on my own navbar and I do not know a lot here, but you might copy the /* Navigation Menu */ section from Twenty Twelve’s style.css over into your Child Theme to make at least some of those changes. However, some people suggest only copying the actual part you are going to change.

    Cris

    @kissthat

    Ye but when i copied it, i got some new button on top of my menu called Menu .. hmm

    leejosepho

    @leejosepho

    That might be because some things are inside media queries and others are not, and you need to do them the same way, either way, in your Child Theme…and that is about all I know there.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Add this to your Child Theme style.css file (at the bottom):

    @media screen and (min-width: 600px) {
    
     .main-navigation ul.nav-menu {
      background: black;
      border-bottom: 0;
      border-top: 2px solid #656565;
     }
    
     .main-navigation ul > li a,
     .main-navigation ul > .current-menu-item > a,
     .main-navigation ul > .current-menu-ancestor > a,
     .main-navigation ul > .current_page_item > a,
     .main-navigation ul > .current_page_ancestor > a,
     .main-navigation ul > li a:hover { color: white; }
    
     .main-navigation ul > li a,
     .main-navigation ul > .current-menu-item > a,
     .main-navigation ul > .current-menu-ancestor > a,
     .main-navigation ul > .current_page_item > a,
     .main-navigation ul > .current_page_ancestor > a {
      font-size: 1.5em;
      font-weight: bold;
      line-height: 2em;
      border-top: 2px solid #656565;
      margin-top: -2px;
      padding: 0 1em;
     }
    
     .main-navigation ul > .current-menu-item > a,
     .main-navigation ul > .current-menu-ancestor > a,
     .main-navigation ul > .current_page_item > a,
     .main-navigation ul > .current_page_ancestor > a {
      background: #437695; /* Old browsers */
      background: -moz-linear-gradient(top,  #437695 0%, #5296c5 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#437695), color-stop(100%,#5296c5)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #437695 0%,#5296c5 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #437695 0%,#5296c5 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #437695 0%,#5296c5 100%); /* IE10+ */
      background: linear-gradient(to bottom,  #437695 0%,#5296c5 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#437695', endColorstr='#5296c5',GradientType=0 ); /* IE6-9 */
      border-color: #87acc6;
     }
    
     .main-navigation li { margin: 0; }
    
    }

    It will only look like the image if you make the text shorter so that the links fit on one line.

    Cris

    @kissthat

    I just can’t find the words to thank you enough man.

    Hi Andrew,

    Thank you very much for this. Could you tell how I need to change the sub-menus to keep smaller fonts and also how the font colour of the main menu could be changed to blue, please?

    Martin

    Hi Andrew,

    Could you tell me where to change the sub-menus to the style you have done above? I have amended it a bit to fit my website http://www.vasectomy.me.uk

    Kind Regards

    Martin

    Sorry, the development site is on http://www.vasectomy.me.uk/cms

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] How to change nav menu css in twenty twelve ?’ is closed to new replies.