Menu dropdowns horizontal and persistant

  • cleevewebby

    #49212

    Hi
    I have a horizontal main menu with some dropdowns items under each main item.
    How can I make all the dropdown menu items in a line horizontal underneath the menu?
    I tried
    .dropdown-menu li { float: left; display: inline; }
    It puts all items in the menu dropdown to the left
    but doesnt display them all in one line across.
    Thanks

    Admin

    Syahir Hakim

    #49216

    If you have many menu items with dropdown, you’ll need to adjust the dropdown width manually for each of them. Example:

    @media (min-width: 768px) {
    	.dropdown-menu > .menu-item {
    		float: left;
    	}
    	#menu-item-812 > .dropdown-menu {
    		width: 400px;
    	} 
    }
    

    Graphene2User

    #49983

    I added this to custom css
    https://pastebin.com/dUhMyxzM
    Unfortunately it does the right thing for a menu in a widget and a menu in the footer
    I wish it didnt!
    but it doesnt do anything with the primary and secondary menus
    What do I need to change to make it affect the relevant menus?

    #access {
            padding: 10px 0 0 0;
            margin-bottom: 40px;
            border-bottom: 1px solid #999 !important;
    }
     
    .menu {
      float: left;
      width: 960px;
      margin: 0;
      padding: 0;
      list-style: none;
      background: #dc0000;
    }
     
    .menu li {
      display: inline;
    }
     
    .menu li a {
      float: left;
      color: #fff;
      text-decoration: none;
      margin: 0;
      padding: 0 30px;
      background: #dc0000;
    }
     
    /* APPLIES THE ACTIVE STATE */
    .menu .current a, .menu li:hover > a  {
      color: #fff;
      text-decoration: none;
      background: #bb0000;
    }
     
    /* THE SUBMENU LIST HIDDEN BY DEFAULT */
    .menu  ul {
      display: none;
    }
     
    /* WHEN THE FIRST LEVEL MENU ITEM IS HOVERED, THE CHILD MENU APPEARS */
    .menu li:hover > ul {
      position: absolute;
      display: block;
      width: 960px;
      height: 25px;
      margin: 23px 0 0 0;
      background: #315299;
    }
     
    .menu li:hover > ul li a {
      float: left;
      color: #fff;
      text-decoration: none;
      margin: 0;
      padding: 0 30px 0 0;
      background: #315299;
    }
     
    .menu li:hover > ul li a:hover {
      color: #120000;
      text-decoration: none;
    }

    Graphene2User

    #49998

    Trying to create this effect

    <img src="http://https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e614b0b7-580b-448e-9e5d-d5229ffa8a07/sensory.gif" alt="2 line sub menu" />

    https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e614b0b7-580b-448e-9e5d-d5229ffa8a07/sensory.gif

    Graphene2User

    #49999

    WP mega menu plugin has the same issue.
    It works with the footer menu but not with header or secondary menu

    This item suggests to add ‘sub-menu’ to the class of the sub menu item but didn’t change anything
    https://smallbusiness.chron.com/make-second-tier-horizontal-navigation-wordpress-48098.html

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.