Theme not showing 4th level dropdowns

I am using a theme called allegiant, and for some reason it’s not showing any submenu’s below the 3rd level. Have picked through the css, but it seems to be a block of some sorts.

Has anyone come across this belore.

This is my site - http://www.accend4web.co.uk/ridgeway/

If you rollover ‘Laboratory’, and follow the submenu’s the 4th level doesnt show, and then the 5th level doesnt show either.

If a theme is deliberatly stopping submenu’s after 3 thats silly, surely there something somewhere to undo this, and I think its in the jscript somewhere, but cant find it, and wondered if anyone has fixed this before.

Oh god, when you look you may not see the main nav appearing that I talk about, as I have done somehtng and turned it off, although its there in the source code.

It appears for mobile nav view, but not normal view, oh god what have I done!

1 Like

You’ve no idea how relieved I am to read that. I thought I was losing my marbles.

1 Like

LOL, OMG, I cant believe it, somehow I have turned the main nav off so that it doesnt show on any of the pages.

But thought I should say, as otherwise like you say you could be like WTF he on about!

1 Like

I think its back now, dont even think it was me, but never mind.

I was trying to work out how to work with templates, whilst the main nav sub levels from 4 down just want show, and was hoping someone may know a work around etc

Thanks for looking though

I have found the menu sections inside the 2 main style sheets style.css and base.css the css I think is everything that controls the nav.

style.css

.menu-main { padding-top:5px; float:right; }
 /* Menu Elements */
.menu-main li a { padding:10px; font-size:1.1em; color:#99a; }
.menu-main li a .menu-description { }
.menu-main li:hover > a, 
.menu-main li a:hover { }
/* Current item highlight both normally and on hover */
.menu-main .current-menu-ancestor > a, 
.menu-main .current-menu-item > a { }
.menu-main .current_page_ancestor > a:hover, 
.menu-main .current-menu-item > a:hover { }
/* Children Elements */
.menu-main .has-children:before { color:#ccc; content:'\f107'; font-size:10px; }
.menu-main li ul { margin:5px 0 0; padding:10px; background:#fff; background:rgba(255,255,255,0.9); border:1px solid #eee; -moz-transition-delay:0.2s; -webkit-transition-delay:0.2s; transition-delay:0.2s; }
.menu-main > li > ul:before { visibility:hidden; content:' '; opacity:0; margin:0; position:absolute; top:0; left:20px; margin:-11px 0 0; border-bottom:10px solid #ddd; border-left:10px solid transparent; border-right:10px solid transparent; z-index:9999; }
.menu-main > li > ul:after { visibility:hidden; content:' '; opacity:0; margin:0; position:absolute; top:0; left:20px; margin:-10px 0 0; border-bottom:10px solid #fff; border-left:10px solid transparent; border-right:10px solid transparent; z-index:9999; }
.menu-main li ul li a { text-transform:none; font-size:0.9em; }
.menu-main li ul li:hover > a, 
.menu-main li ul li a:hover { background-color:none; }

base.css

.menu-main { float:right; }
.menu-main { margin:0; }
.menu-main > ul { display:block; margin:0; padding:0; } /* Fix for extra wrapper in default menu markup */
/* Menu Elements */
.menu-main ul, 
.menu-main li, 
.menu-main a { -moz-transition:0.4s all; -webkit-transition:0.4s all; transition:0.4s all; }
.menu-main li { float:left; position:relative; display:block; margin:0; list-style:none; }
.menu-main li a { display:block; margin:0; padding:10px; color:#777; border-radius:2px;-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
/* Icon and Description */
.menu-main li:hover > a, 
.menu-main li a:hover { text-decoration:none; }
/* Current item highlight both normally and on hover */
.menu-main .current-menu-ancestor > a, .menu-main .current-menu-item > a { }
.menu-main .current_page_ancestor > a:hover, .menu-main .current-menu-item > a:hover { }
/* Children Elements */
.menu-main .has-children:before { display:block; color:#ccc; position:absolute; top:50%; right:10px; list-style:none; font-family:'fontawesome'; content:'\f0d7'; font-size:10px; margin-top:-5px; line-height:1; }
.menu-main .has-children > a { padding-right:25px; }
.menu-main li ul { visibility:hidden; opacity:0; margin:0; position:absolute; background:#fff; top:100%; left:0; z-index:9998; }
.menu-main li ul li { width:auto; display:block; float:none; }
.menu-main li ul li a { width:auto; color:#555; line-height:1.5; height:auto; padding:10px; width:220px; }
.menu-main li ul li:hover > a,
.menu-main li ul li a:hover { }
/* Further Children Elements */
.menu-main li ul .has-children:before { content:'\f0da'; color:#999; }
.menu-main li ul ul { margin:0; top:0; left:100%; }
/* Children display on hover */
.menu-main li:hover > ul { visibility:visible; opacity:1; }
.menu-main li:hover > ul:before,
.menu-main li:hover > ul:after { visibility:visible; opacity:1; }

 /* SUBMENU NAVIGATION */
.menu-sub { margin:0 0 30px; padding:0; }
.menu-sub li { display:inline-block; list-style:none; margin:0; padding:0; }
.menu-sub li a { display:block; padding:10px; margin:0 10px 10px 0; border:1px solid rgba(0,0,0,0.1); }
.menu-sub li a:hover { text-decoration:none; opacity:0.9; }
.menu-sub li ul { display:none; font-size:1em; }

I cant see it saying to hide anything after level 3, but I’m posting it to see if someone else can see something, or what I can add to get it working. I’ll add it to the child theme style sheet

Neither can I.

Though if I look at the html; up to three levels menu-sub show, but the fourth level doesn’t show.

If it’s not in the html, you have clearly done something.

Ye its all sorted now, but still have the issue of no nav showing after the 3rd level.

havent a clue what happened, but re tracked a little, saved and hey presto it all appeared again lol

1 Like

Let me get that clear; menu-main list items are level 0, right?
You have three menu-sub list levels in the html, there is no the forth level menu-sub list in the html, is it?

Does that mean that there should not be a fourth level menu-sub?

The only thing that I see is that also the third level items have the arrov clue for a next fourth level, one that isn’t there. That is a deceptive clue for a fourth sub level and should be removed.

Either remove the has-children classes on the third level sub-menu list items that has had their forth level sub-menu list removed, e.g.:

example third level:

<li id="menu-item-234" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children has-children">

suggested third level (like the other third level items that has no sub-menu to show):

<li id="menu-item-234" class="menu-item menu-item-type-post_type menu-item-object-page">

Or add a CSS rule to the “Allegiant-child” style.css. E.g.:


/* Children Elements */
.menu-main .has-children:before { color:#23282D; content:'\f107'; font-size:12px; }
.menu-main  li li li .has-children:before { content: normal; } /* remove the clue for a fourth menu-sub */

If I understand you correctly.

No there should be a 4th level, and then in some cases a 5th. The menu’s show correctly in the mobile nav, but for some reason the 4th and 5th levels dont show up in the main menu.

In the laboratory section, when you drill down you see the arrow that indicates there a 4th level, but it doesnt roll out, and like you say those 4th and 5th levels dont even show up in the html page source, its as if they are blocked from showing.

The mobile nav showing is the “shift-nav” starting at line #273 ending line #328 in the html code. That menu has five sub levels.

The main menu showing is the “menu-main” starting at line #78 and ends at line #168. That menu has no fourth or fifth sub levels.

I suggest you go to the dashboard and check the main menu. Probably the forth and fifth levels are not added to that menu.

(There is also a “menu-moblie” from line #331 to line #421.)

I just emailed them and they said that none of their themes support main menu nav beneath level 3, how stupid is that.

So then followed it up by asking if its set in stone, or is there a way around it using css or jquery, or anything really.

Surprise! Maybe ask if their pro theme version support more levels.

Seems you need five sub levels or you have to restructure the site to have in page menus (like a menu with the different services in separate menus in separate service pages).

The site can’t be finished as it it seems. Anyway, good you found out the theme limit.

Personally, I think you are expecting a lot from your visitors to drill down 4 or 5 levels.

1 Like

There nothing I can do, I’m just the guy putting this together, the sitemap came down from the powers that be and I did look at it, and think this is a bit much, but they insist its the way they want it. There an awful lot of info in those individual pages.

What I’m going to do if nothing can be done, is take the arrow away in main menu to suggest more dropdowns, and instead add an internal nav inside the pages, to allow them to see the other pages.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.