This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Tip: How to have 2 rows of Menu items

  • Creator
    Topic
  • #2827
    mharpen
    Participant

    A couple of useful tips I found…
    This first example, is useful in case your menu wraps around due to the user’s limited browser screen width. It will show any wrapped menu items within the menu bar, so they are still visible, rather than below the menu bar.

    /*shows wrapped menu items within menu bar, not below*/
    #main-menu ul.menu>li {height:1.4em}

    This next example can be used if you want to always display 2 rows of menu items in the menu bar, thus allowing twice as many menu items.

    /*enables 2 rows of menu items*/
    #main-menu ul.menu>li>a {padding-top:6px !important; padding-bottom:4px !important;
    	margin-top:4px}
Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #2828
    mharpen
    Participant

    Jason, FYI, every time i try to edit a post that i just posted in the forum, and click Submit, it gives an error “Forum ID not found”.

    #2829
    mharpen
    Participant

    Jason, I just tried editing this last FYI post to you, and it did not give the error. I suspect it has something to do with the post having pre tags or when code is included.

    #2830
    mharpen
    Participant

    Forgot to mention in my 2 CSS examples above, the 2nd example requires including the 1st CSS example to set the height.

    #2846
    mharpen
    Participant

    Here’s an improved version of the CSS if anyone’s interested.

    /*shows main-menu overflow items within menu bar not below bar, so they are visible*/
    #main-menu ul.menu>li {height:1.4em}
    #main-menu ul.menu>li>ul {margin-top:47px !important}
    
    /*allows 2 rows of main-menu items. if use then remove overflow css above since not needed*/
    /*
    #main-menu ul.menu>li, #main-menu ul.menu>li>a {height:1.5em}
    #main-menu ul.menu>li>a {padding-top:8px !important; padding-bottom:0px !important;
    	margin-top:2px}
    #main-menu ul.menu>li>ul {margin-top:26px !important}
    */
Viewing 4 replies - 1 through 4 (of 4 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.