TwentyTwenty sub-menu child to right

  • Hello,

    I’m looking for a solution how to switch child submenu in TwentyTwenty theme from left to right side, but I can’t find any way how to do it. Thing is, I would like to have menu like Main link > (down) submenu > (right) child in submenu.

    I made at least visualisation what I’m talking about. See here: https://i.postimg.cc/7YQjwby1/Twenty-Twenty-question.jpg

    Does anyone know how can I achive to have submenu on right instead on left please?

    Thank you all

Viewing 1 replies (of 1 total)

  • Hi @hawkeye86 ,

    I presume you questions relate to Desktop only.
    This could be achieved by update /[theme]/styles.css

    Step:
    1. Backup current /[theme]/styles.css
    2. Update “Primary Menu” css as sample below

    /* Primary Menu ---------------------------- */
.primary-menu > li.menu-item-has-children > a {
	/*padding-right: 2rem;*/
}

.primary-menu > li > .icon {
	/*right: -0.5rem;*/
	top: calc(50% - 0.4rem);
}

/* SUB MENU */
.primary-menu ul {
	background: #ff00ff !important;
	/*border-radius: 0.4rem;*/
	color: #fff;
	font-size: 1.3rem;
	opacity: 0;
	/*padding: 0 0 1rem 0;*/
	padding:0;
	position: absolute;
	right: 9999rem;
	top: calc(100% + 0.1rem);
    /* transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; */
	transition: opacity 0.15s linear, transform 0.15s linear, left 0s 0.15s;
	transform: translateY(0.6rem);
	min-width: 25rem;
	z-index: 1;
}

.primary-menu ul::after {
	border: 0.8rem solid transparent;
	/*right: 1.8rem;*/
	left:1.8rem;
}

.primary-menu ul li.menu-item-has-children > a {
	/*padding-right: 4.5rem;*/
}

/* DEEP DOWN */
.primary-menu ul li.menu-item-has-children:hover > ul,
.primary-menu ul li.menu-item-has-children:focus > ul,
.primary-menu ul li.menu-item-has-children.focus > ul {
	left: calc(100% + 0.1rem);
}

.primary-menu ul ul::before {
	bottom: 0;
	height: auto;
	/*left: auto;
	right: -2rem;*/
	left:-2rem;
	right: auto;
	top: 0;
	width: 2rem;
}

.primary-menu ul ul::after {
	border-bottom-color: transparent;
	rtl:ignore;
	/*border-left-color: #000;*/
	/*bottom: auto;*/
	/*right: -1.6rem;*/
	
	left: -2.6rem;
	top: 1rem;
	color:green !important;
}

    You may find the sample site with this fixed, here

    Hope this help.
    Worada S.

Viewing 1 replies (of 1 total)
  • The topic ‘TwentyTwenty sub-menu child to right’ is closed to new replies.

Tags