WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to change nav menu css in twenty twelve ? (9 posts)

  1. Hristiqn Nikolov
    Member
    Posted 10 months ago #

    Hello , i am using twenty twelve as theme, i have a child theme, but i can't really understand how to edit the nav menu css.. My website is http://www.motivationgrid.com and i want to make the menu look a bit like http://i.imgur.com/C2GSihF.png

  2. leejosepho
    Member
    Posted 10 months ago #

    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.

  3. Hristiqn Nikolov
    Member
    Posted 10 months ago #

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

  4. leejosepho
    Member
    Posted 10 months ago #

    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.

  5. Andrew
    Forum Moderator
    Posted 10 months ago #

    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.

  6. Hristiqn Nikolov
    Member
    Posted 10 months ago #

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

  7. kittel
    Member
    Posted 8 months ago #

    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

  8. kittel
    Member
    Posted 8 months ago #

    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

  9. kittel
    Member
    Posted 8 months ago #

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

Reply

You must log in to post.

About this Topic