[Article Transfer] WordPress ‘css issue’ fix that prevents menu drop-down
[Article Transfer]: This article is an old article I wrote, that was transferred over from my old portfolio website. It is here for archival purposes.
A lot of people seem to be having an issue with certain WordPress Themes which are preventing the drop-down menu children from working properly. When a user attempts to access the menu whilst making a selection it will disappear or appear to hide.
To fix this this issue, locate the Custom.css or Style.css file in your ‘wp-content\themes\’ directory on your ftp. I would suggest creating a backup of this file first should this fix not work for you. Next, open and edit your style sheet file. Navigate to the very bottom of the file and insert the following code:
/* Close 3rd-level sub-menu items and make them expand when hovering over their parent: */
.uk-nav-navbar > .uk-parent > .uk-nav-sub { display: none; }
.uk-nav-navbar > .uk-parent:hover > .uk-nav-sub { display: block; }
/* Add an "arrow" icon to show that there ARE sub-menu items: */
.uk-nav-navbar > .uk-parent > a:after {
content: "\f104";
font-family: "FontAwesome";
display: block;
float: right;
margin-left: 10px;
}
/* Change the arrow icon while the sub-menu items are expanded: */
.uk-nav-navbar > .uk-parent:hover > a:after {
content: "\f107";
} Once you’ve added the above snippet to your style sheet, close & save. Refresh, clear cache (Wp Supercache Plugin).
Your menu should now function as intended.