create menu dropdown in 2 columns

  • melanie bund

    (@melanie-bund)


    9 years, 3 months ago

    Hi am running 2012 theme and hope someone knows how to add a 2 column dropdown to the menu – my menu code below

    .main-navigation li {margin-right:15px} 

.menu-main_menu-container { position:relative; z-index:1000; font-size:11px; 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:11px;
    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;
  font-size: 0.785714rem;
  line-height: 2.18182;
  padding: 0.571429rem 0.714286rem;
  white-space: normal;
  width: 10rem;
  z-index: 3;
  font-size:11px;
  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: ' ►';}

    site
    http://photohunters.org/photohunters
    thankyou
    melanie

Viewing 2 replies - 1 through 2 (of 2 total)
  • WPyogi

    (@wpyogi)

    9 years, 2 months ago

    First, your child theme isn’t set up correctly – the style.css file should not have a copy of the parent style.css file in it – that makes it VERY hard to keep track of what you have added or changed.

    AND these days, it’s no longer considered best practice to use the @import line –

    http://codex.wordpress.org/Child_Themes

    Thread Starter melanie bund

    (@melanie-bund)

    9 years, 2 months ago

    Hi WPyogi
    Am so glad someone answered this call for help Thank you for your advice. Have taken out the @import line and added the relevant script to functions.php, as without the function added the site looked a complete mess including the menu – any idea how i can progress now?
    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘create menu dropdown in 2 columns’ is closed to new replies.