Anyone having issues with the menu?

  • Resolved Rockwell_77

    (@rockwell_77)


    9 years, 11 months ago

    I am having problems with my menu. I have a menu with three items, and each of those items have sub-items.

    When I hover on the main menu item, the menu opens to reveal the three sub-items. These sub-items are categories – In my specific example, “Part I”, “Part II” and “Part III”.

    When I hover on one of the sub-items (Part I, for example), a sub-menu opens to the left side, revealing its sub-items. These are links to my posts for that category.

    When I hover on those, I lose proper functionality. Hovering on the first item in that list causes the item to highlight, but, if I move further down the list, the entire menu closes and the sub-menu for Part II opens.

    This seems to happen because the Part II sub-menu opens up in the same physical location on the screen where the second item in the sub-menu for Part I is. There seems to be a conflict on the screen between these sub-menus.

    Anyone have this issue and/or a solution?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Rockwell_77

    (@rockwell_77)

    I’m thinking I need to look at the following code in the style.css file:

    /* nav-toggle */

	.nav-toggle {
		display: block;
		padding: 12px 12px 10px;
		border-radius: 3px;
		position: absolute;
		top: 50%;
		margin-top: -16px;
		right: 0;
	}

	.nav-toggle .bars {
		height: 10px;
		width: 15px;
		float: right;
		position: relative;
		margin-top: -1px;
	}

	.nav-toggle .bar {
		width: 15px;
		height: 2px;
		background: #767676;
		border-radius: 2px;
		position: absolute;
		left: 0;
		top: 0;
	}

	.nav-toggle .bar:nth-child(2) { top: 4px; }
	.nav-toggle .bar:nth-child(3) { top: 8px; }

	.nav-toggle p {
		font-size: 14px;
		line-height: 10px;
		font-weight: 700;
		text-transform: uppercase;
		text-align: right;
		color: #767676;
		float: left;
		margin-right: 8px;
		position: relative;
		top: -1px;
	}

	.nav-toggle .close { display: none; }

	.nav-toggle:hover { cursor: pointer; }

	.nav-toggle.active { background: #019EBD; }
	.nav-toggle.active p { color: #fff; } 

	.nav-toggle.active .bar { background: #fff; }

	.nav-toggle.active .bar:nth-child(1),
	.nav-toggle.active .bar:nth-child(3) { top: 4px; }

	.nav-toggle.active .bar:nth-child(2) { opacity: 0; }

	.nav-toggle.active .bar:nth-child(1) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.nav-toggle.active .bar:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

    Just not sure how to fix this issue.

    Thread Starter Rockwell_77

    (@rockwell_77)

    I might try to make the menus not open on a hover. It seems like a good possible solution. I’d prefer to get the hover menu working properly, but that seems like it might be more difficult.

    Here’s a good article about hover menus: https://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

    Thread Starter Rockwell_77

    (@rockwell_77)

    Here’s a video illustrating the issue:

    I’ve the same issue.
    Anyone managed to solve it?
    Many thanks

    Thread Starter Rockwell_77

    (@rockwell_77)

    I fixed the big a while back but sort of forgot exactly what I did. Try this:

    Below the following code in styles.css : .main-menu ul li:hover ul {

    …add the following:
    display: block;

    modified

    .main-menu ul li:hover ul {
	opacity: 1;
	margin-top: -47px;
	display: block;
}

    but doesn’t change the situation

    Thread Starter Rockwell_77

    (@rockwell_77)

    Keep that change you just made and then try:

    Under: .main-menu ul ul {

    …change: display: block;
    to: display: none;

    works now until 3rd list menu. but the “4th list” menus dislpay one over the other (3 all together) so you cannot see all the voices of the 3 menus ??

    ok. It is a CSS problem, solved adding these also:

    .main-menu ul li:hover > ul {
    display: block;
    }
    .main-menu ul ul ul{
    display: none;
    }

    now all menus works

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Anyone having issues with the menu?’ is closed to new replies.