Support » Themes and Templates » add a 2 column dropdown to menu

  • Hi am running 2012 theme and hope someone knows how to add a 2 column dropdown the menu. None of the posts i have read work for some reason on my menu?
    css:

    .main-navigation li {margin-right:15px} 
    
    .menu-main_menu-container { position:relative; z-index:1000; font-size:12px; font-family: 'Lato', 400, sans-serif; }
    .main-navigation { text-align: center;} /* margin-top is different in media queries */
    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border-bottom: 0; border-top: 0;
        	display: inline-block !important; text-align: center;}
    
    .main-navigation ul.nav-menu,.main-navigation div.nav-menu > ul {
             border: 0 none;
             padding: 0 0 0 0;
            text-align: center;
    		 font-size:11px;
       }
    .main-navigation li a:hover {
    color: #04c928;
    }
    /*nav menu font color and bold font (font-weight)*/
    .main-navigation li a {
        border-bottom: 0 none;
        color: #FFFFFF;
        font-weight: bold;
    	 font-size:12px;
        line-height: 3.69231;
        text-transform: uppercase;
        white-space: nowrap;
    }
    /*current page nav font color & bold font*/
    .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item 
    
    > a, .main-navigation .current_page_ancestor > a {
        color: #04c928;
        font-weight: bold;
    }
    /*background color of sub-menu (dropdown)*/
    .main-navigation li ul li a {
      background:#000;
      /*border-bottom: 1px solid #EDEDED;
      border-left:  1px solid #EDEDED;
      border-right:  1px solid #EDEDED;*/
      display: inline-block;
      line-height: 1.18182;
      padding: 0.571429rem 0.714286rem;
      white-space: normal;
      width: 11rem;
      z-index: 3;
      font-size:12px;
      text-align:left;
      border:none;
    }
    /*background & font color of sub0menu with mouse hover*/
    .main-navigation li ul li a:hover {
            background: #333;
            color: #04c928;
        }
    .main-navigation li li {
      margin-left: -1em;
    }
    .main-navigation li.has-children > a:after {
     color: #fff;
     content: ' ▼';
     font-size: 10px;
     vertical-align: 1px;
    }
    .main-navigation li li.has-children > a:after {
     color: #222;
     content: ' ►';}

    thank you Melanie

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘add a 2 column dropdown to menu’ is closed to new replies.