WordPress.org

Support

Support » Themes and Templates » [Resolved] dropdown menu in top navigation display in two columns

[Resolved] dropdown menu in top navigation display in two columns

  • 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)
  • 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….
    🙁

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Try:

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

    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?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    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 ‘[Resolved] dropdown menu in top navigation display in two columns’ is closed to new replies.