WordPress.org

Ready to get started?Download WordPress

Forums

Attitude
[resolved] dropdown menu in top navigation display in two columns (7 posts)

  1. jbraguez
    Member
    Posted 6 months 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;
    }
  2. jbraguez
    Member
    Posted 6 months ago #

    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....
    :(

  3. jbraguez
    Member
    Posted 6 months ago #

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

  4. Andrew
    Forum Moderator
    Posted 6 months ago #

    Try:

    #access ul li ul li {
     float: left;
    }
    
    #access ul li ul li:nth-child(odd) {
     clear: left;
    }
  5. jbraguez
    Member
    Posted 6 months ago #

    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?

  6. Andrew
    Forum Moderator
    Posted 6 months ago #

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

  7. jbraguez
    Member
    Posted 6 months ago #

    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;
    }

Reply

You must log in to post.

About this Theme

About this Topic

Tags