[Anonymous]

Anonymous

#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

[Syahir Hakim]

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]

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]

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]

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

[Graphene2User]

Graphene2User

#51250

This gives horizontal sub menus in GeneratePress – how to carry it across to Graphene?

body .sf-menu > li {
	position: static;
}

body .main-navigation ul.menu > li > ul {
	width: 100%;
	left: 0
         !important;
}

body .main-navigation ul.menu > li > ul > li {
	width: auto;
}

body .main-navigation ul.menu > li > ul > li ul {
	left: 0;
	top: 100%;
}