Comments lklevenhagen started the conversationJune 23, 2022 at 4:24pmI would like to add "arrows" on my dropdown menu, like on the attachment imagem example. Also i´d like to add a separation line between main menu itens - same attachmentBest regards 2,997PenciDesign repliedJune 23, 2022 at 5:07pmHi,Please go to Appearance → Customize → Custom CSS then add the following custom CSS code: .navigation .menu .sub-menu { border-top: 3px solid var(--pcaccent-cl);}.navigation .menu .sub-menu:before { content: ''; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 10px 0 0 10px; border-color: transparent transparent transparent var(--pcaccent-cl); position: absolute; top: -10px; left: 15px;}.pc-builder-element.pc-main-menu .navigation.menu-item-padding ul.menu > li:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.5);}Regards,PenciDesign.lklevenhagen repliedJune 23, 2022 at 5:53pmThank you. Part of it was solved. But about the "arrow" part actualy i ment this arrow (attachment image) 2,997PenciDesign repliedJune 24, 2022 at 2:08amHi,Please go to Appearance → Customize → Custom CSS then add the following custom CSS code: .navigation ul.menu ul.sub-menu li.menu-item-has-children:after { position: absolute; top: 50%; transform: translateY(-50%); right: 5px; content: '\f105'; font-family: 'FontAwesome';}Regards,PenciDesign. Sign in to reply ...
I would like to add "arrows" on my dropdown menu, like on the attachment imagem example.
Also i´d like to add a separation line between main menu itens - same attachment
Best regards
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.navigation .menu .sub-menu {border-top: 3px solid var(--pcaccent-cl);
}
.navigation .menu .sub-menu:before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent var(--pcaccent-cl);
position: absolute;
top: -10px;
left: 15px;
}
.pc-builder-element.pc-main-menu .navigation.menu-item-padding ul.menu > li:not(:last-child) {
border-right: 1px solid rgba(255, 255, 255, 0.5);
}
Regards,
PenciDesign.
Thank you. Part of it was solved. But about the "arrow" part actualy i ment this arrow (attachment image)
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.navigation ul.menu ul.sub-menu li.menu-item-has-children:after {position: absolute;
top: 50%;
transform: translateY(-50%);
right: 5px;
content: '\f105';
font-family: 'FontAwesome';
}
Regards,
PenciDesign.