Customising Menu Drop Down Toggle

  • Resolved credodm

    (@credodm)


    7 years ago

    Hey there Ben,

    I just started using your theme and am loving it.

    Need some help customising the menu. I tried searching the sticky and the rest of the topics but can’t seem to find what I am looking for.

    Currently, the menu has arrow buttons to toggle the drop down sub-menus. Unfortunately, this makes the menu somewhat messy and I am hoping to clean it up a little. A few years back, you provided a CSS code to disable the toggle and display all menus and sub-menus. This becomes a tad unwieldy when there a whole lotta sub-menus and sub-sub-menus.

    Can you advise a way to have the menu and sub-menu items displayed while allowing the lower level menus/pages to be toggled.

    Example:

    About
    Blog
    Stories
    – Fantasy
    — Fantasy 1
    — Fantasy 2
    – Sci-Fi
    — Sci-Fi 1
    — Sci-Fi 2
    – Mystery
    — Mystery 1
    — Mystery 2
    Contact Information

    In the above example, Fantasy, Sci-Fi, Mystery are sub-menus. Fantasy 1 & 2, Sci-Fi 1 & 2, Mystery 1 & 2, are subs of those sub-menus. As you will notice, displaying everything is just clunky.

    I would like to have it display as the following:

    About
    Blog
    Stories
    – Fantasy ^
    – Sci-Fi ^
    – Mystery ^
    Contact Information

    ^ Being the arrows to toggle the drop down menus for the sub-menus.

    Appreciate your expert advice in this matter.

    Thank you.
    Credo

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Sibley

    (@bensibley)

    7 years ago

    Hi Credo,

    Thanks for choosing Author for your site!

    The menu can be customized in this way with the following CSS:

    @media all and (min-width: 950px) {
	
	.menu-primary-items > li > button {
		display: none;
	}
	.menu-primary-items > li.menu-item-has-children > ul {
		display: block;
	}
}

    Please copy & paste the code above into the “Additional CSS” section in the Customizer (Appearance > Customize), and it will take effect right away.

    Thread Starter credodm

    (@credodm)

    7 years ago

    Thanks Ben, that was exactly what I was looking for and your response time is certainly out of this world.

    How about if I only wanted the sub-sub-sub menus to have the toggle for the drop-down?

    Just so I don’t have to ask again when I add more stuff to my website.

    Cheers!

    Theme Author Ben Sibley

    (@bensibley)

    7 years ago

    You’re welcome!

    Sure, here’s the code with one more level added:

    @media all and (min-width: 950px) {
	
	.menu-primary-items > li > button {
		display: none;
	}
	.menu-primary-items > li.menu-item-has-children > ul {
		display: block;
	}
.menu-primary-items > li > ul > li > button {
		display: none;
	}
	.menu-primary-items > li.menu-item-has-children > ul > li.menu-item-has-children > ul {
		display: block;
	}
}
    Thread Starter credodm

    (@credodm)

    7 years ago

    Thanks again, Ben.

    That worked like a charm!

    Cheers!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Customising Menu Drop Down Toggle’ is closed to new replies.

  • 4 replies
  • 2 participants
  • Last reply from: credodm
  • Last activity: 7 years ago
  • Status: resolved