dropdown menu in top navigation display in two columns

  • Resolved jbraguez

    (@jbraguez)


    11 years, 1 month ago

    How can i make the dropdown menu in top navigation display in two columns?
    I’ve already made a child theme, and triyed this code :

    /* Expand the width of the submenu to allow space for 2 columns */
#access ul ul {
 width: 400px;
 /* Here's a fix for the disappearing submenu too */
 top: 30px;
}

#access li li a {
 display: block;
 /*You need to add a height, otherwise some times with larger
  * heights will push down others. It will basically look messy with
  * large gaps.
 */
 height: 20px;
}
Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter jbraguez

    (@jbraguez)

    i change

    #access ul ul {
 width: 400px;
 /* Here's a fix for the disappearing submenu too */
 top: 30px;
}

    to

    #access ul li ul {
 width: 400px;
 /* Here's a fix for the disappearing submenu too */
 top: 30px;
}

    and it changed the size of the dropdown menu, but doesn’t brea into tro columns….
    ??

    Thread Starter jbraguez

    (@jbraguez)

    i forgot to post the of my site
    https://www.clinicadaribeira.pt/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try:

    #access ul li ul li {
 float: left;
}

#access ul li ul li:nth-child(odd) {
 clear: left;
}

    Thread Starter jbraguez

    (@jbraguez)

    Thanks, it worked, but i wanted the sencond column to start straight.
    This way looks messy.
    Looks like a cloud of words, not a menu.
    Andrew can you help me to put them straight?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Sounds like you just need to give your <li>s a width

    Thread Starter jbraguez

    (@jbraguez)

    Thanks it worked!!

    This is the final code:

    #access ul li ul {
 width: 600px;
 /* Here's a fix for the disappearing submenu too */
 top: 60px;
}

/* size of dropdown menu*/
#access ul li ul li {
 width: 300px;
 height: 30px;
 float: left;
}

#access ul li ul li:nth-child(odd) {
 clear: left;
}

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘dropdown menu in top navigation display in two columns’ is closed to new replies.