Create Vertical drop down menu

Hi,

find custom-functions.php file in inc folder of your theme directory >> ……/wp-content/themes/skt_full_width/inc
open custom-functions.php and add this code after line no. 29
jQuery(‘.show_hide_header’).css(‘display’,’none’);

I added:
jQuery (‘show_hide_header.’) Css (‘display’, ‘none’)

on custom-functions.php

But nothing has changed

That’s not correct, SKTThemes said add this after line 29:

jQuery('.show_hide_header').css('display','none');

What should make this code? Nothing’s happening

Give me 5 minutes checking why its not working for you and letting you know

Line number 29 on custom-functions.php within inc folder. So the path to custom-functions.php is wp-content/themes/skt-full-width/inc/custom-functions.php

Check line number 29 where it says: jQuery(document).ready(function() {

Add this
jQuery(‘#site-nav’).css(‘display’,’none’);

This should work i have tested it 2-3 times now.

I hurt myself understand I want the sub menus do not open horizontally but vertically

Like this https://www.alsacreations.com/xmedia/doc/full/menu3.png

This is related to html css and not related to theme functions basically. Here is one such class within main.css #site-nav ul li:hover ul (remove left from within it) and it should appear below the menu.

Now adjust padding and spacing. In case you know html css you can check within main.css and open the related class for site nav and remove left from within them and adjust them to show underneath the parent nav.

Again if you aren’t sure take a backup of main.css.

Now your question where is main.css wp-content/themes/skt-full-width/css/main.css

/* ----------- Drop Down Menu ------- */
.noBottomBorder{border-bottom:none !important; }
.haschild{background:url(../images/menu_sub_icon.png) no-repeat center right; }
#site-nav ul li ul{ display:none; }
#site-nav ul li:hover ul{display:block; border-left:1px #000 solid; position:absolute; left:228px; width:180px; top:5px; background:url(../images/menu_sub.png) repeat left top; z-index:10}
#site-nav ul li:hover ul li{ border-top:1px #2c2d2e solid; border-bottom:1px #040506 solid; }
#site-nav ul li:hover ul li a{background-position:7px center; padding-left:27px; }
#site-nav ul li:hover ul li ul{display:none; }
#site-nav ul li:hover ul li:hover ul{display:block; left:160px; top:5px; }
#site-nav ul li:hover ul li:hover ul li ul{display:none; }
#site-nav ul li:hover ul li:hover ul li:hover ul{display:block; }
#site-nav ul li:hover ul li:hover ul li:hover ul li ul{display:none; }
#site-nav ul li:hover ul li:hover ul li:hover ul li:hover ul{display:block; }
#site-nav ul li:hover ul li:hover ul li:hover ul li:hover ul li ul{display:none; }
#site-nav ul li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul{display:block; }
.header .header-bottom{ width:100%; margin:0; padding:0; background:url(../images/header-bottom-shape.png) no-repeat bottom; height:53px; }
#header-bottom-shape{ background:url(../images/header-bottom-shape2.png) no-repeat top; width:75px; height:50px; cursor:pointer; margin-left:86px; }
#header-bottom-shape.showDown{background-image:url(../images/header-bottom-shape1.png); }

What should I added or removed?

Hi,

I have the same problem. I’m using the theme specular and this is my website so far: https://wordpress.p174990.webspaceconfig.de/

The dropdown menu under ‘Expertise’ and ‘About us’ are horizontal. But I would like it to look like here: https://codeless.co/specular/business3/

I thought there would be an option within the theme without having to change the custom-functions.php file.

And is there anyway I can try changing the custom-functions.php safely without messing the former settings up?

Thank you for your help!