How to make sub menus appear horizontally below the main horizontal menu

[weavering]

scrambler suggested using item 3 here
http://forum-archive.weavertheme.com/discussion/11685/weaver-xtreme-tips-and-tutorial-part-6
the sub menus appear horizontally,

But how to give them their own space and
make them stay there until a different menu is clicked

Something like this site
bbc.co.uk/news

[scrambler]

You need to elaborate on what you mean by their own space.

As far as keeping them open, I can try to see if there is a way once you implement the solution, and give us a link to the site so I can test on it

[scrambler]

If you meant have a second bar below the menu bar for the sub menu, use the modified rules below

.is-desktop .wvrx-menu ul li {display:inline-block;}
.is-menu-default .wvrx-menu > li {position:static;}
.is-desktop .wvrx-menu ul {left:0px;position:absolute;top:35px;width:100%;background-color:black;}
.is-desktop ul.wvrx-menu {position:relative;}

[weavering]

Thanks Scrambler.
When hovering over a main menu item that makes the sub menus appear  in the breadcrumbs space
The submenus disappear when mouse no longer hovers over main menu item
Is there a way to make the sub menus stay permanently visible and not disappear?

[scrambler]

If the main menu item that has a sub menu is a real page and not a placeholder, the modified rules below should do it.
Note: The previous last rule was missing the is-desktop (corrected)

.is-desktop .wvrx-menu ul li {display:inline-block;}
.is-menu-default .wvrx-menu > li {position:static;}
.is-desktop .wvrx-menu  ul {left:0px;position:absolute;top:35px;width:100%;background-color:black;}
.is-desktop .wvrx-menu .current_page_item ul {display:block;}
.is-desktop .wvrx-menu .current_page_item.has-submenu {margin-bottom:40px;}
.is-desktop ul.wvrx-menu {position:relative;}

[scrambler]

I just added a rule to make a space for the sub menu bar

[weavering]

So you did  :smile:
Youre right about it only appearing for pages not a placeholder
let me check an issue with the home page – not now – will reply later

[scrambler]

Modified rule to keep sub menu opened when a sub menu page is active

.is-desktop .wvrx-menu ul li {display:inline-block;}
.is-menu-default .wvrx-menu > li {position:static;}
.is-desktop .wvrx-menu  ul, .is-desktop .wvrx-menu .current_page_parent ul {left:0px;position:absolute;top:35px;width:100%;background-color:black;}
.is-desktop .wvrx-menu .current_page_item ul, .is-desktop .wvrx-menu .current_page_parent ul  {display:block;}
.is-desktop .wvrx-menu .current_page_item.has-submenu, .is-desktop .wvrx-menu .current_page_parent.has-submenu {margin-bottom:40px;}
.is-desktop .wvrx-menu.menu-hover li:hover > ul {z-index:10000;}
.is-desktop ul.wvrx-menu {position:relative;}

[weavering]

The idea is right there Scrambler
however there a lot of redrawing happens
For instance if I’m displaying a welcome home page, then click a displayed sub menu item
the sub menu item disappears the whole content moves up
then the sub page appears
then the content moves down a gap to leave space for the sub menu to be redrawn

Is there a way to make the sub menu appear permanently without dependency on sub page?
Thanks

[scrambler]

Without being able to inspect the page were you implemented it, I cant do any tweaking…

If you want the space of the sub menu to always be opened, change the rules to the ones below (changed one highlighted). use the value that works for you.
I am also assuming you have no other menus, if you do, we need to specialize thee rules to only affect the one you need.

.is-desktop .wvrx-menu ul li {display:inline-block;}
.is-menu-default .wvrx-menu > li {position:static;}
.is-desktop .wvrx-menu  ul, .is-desktop .wvrx-menu .current_page_parent ul {left:0px;position:absolute;top:35px;width:100%;background-color:black;}
.is-desktop .wvrx-menu .current_page_item ul, .is-desktop .wvrx-menu .current_page_parent ul  {display:block;}
.is-desktop .wvrx-menu  {padding-bottom:70px;}
.is-desktop .wvrx-menu.menu-hover li:hover > ul {z-index:10000;}
.is-desktop ul.wvrx-menu {position:relative;}

[scrambler]

You could also use the rule below instead of the one highlighted in yellow (assuming it is the primary menu bar

.is-desktop #nav-primary  {min-height:70px;}

[scrambler]

If what you are experiencing is a delay, it may be because you have a lot of javascript that can slow down the is-desktop class.

Instead of using is-desktop, we should use a single @media rule like below, it will be faster and more efficient.
Try the one below with the original rules first and see if that fixes your problem.

@media (min-width:768px) {
.wvrx-menu ul li {display:inline-block;}
.is-menu-default .wvrx-menu > li {position:static;}
.wvrx-menu  ul, .is-desktop .wvrx-menu .current_page_parent ul {left:0px;position:absolute;top:35px;width:100%;background-color:black;}
.wvrx-menu .current_page_item ul, .is-desktop .wvrx-menu .current_page_parent ul  {display:block;}
.wvrx-menu .current_page_item.has-submenu, .is-desktop .wvrx-menu .current_page_parent.has-submenu {margin-bottom:40px;}
.wvrx-menu.menu-hover li:hover > ul {z-index:10000;}
ul.wvrx-menu {position:relative;}
}

Or you can use the revised rules for a permanently opened sub menu area

@media (min-width:768px) {
.wvrx-menu ul li {display:inline-block;}
.is-menu-default .wvrx-menu > li {position:static;}
.wvrx-menu  ul, .is-desktop .wvrx-menu .current_page_parent ul {left:0px;position:absolute;top:35px;width:100%;background-color:black;}
.wvrx-menu .current_page_item ul, .is-desktop .wvrx-menu .current_page_parent ul  {display:block;}
.wvrx-menu  {padding-bottom:70px;}
.wvrx-menu.menu-hover li:hover > ul {z-index:10000;}
ul.wvrx-menu {position:relative;}
}

[weavering]

Nearly there scrambler!
Inbetween the sub menu buttons there is a small black divider
The same black extends all the way from the rightmost button to edge of page
to the left of the buttons it’s grey
Why isnt the black that grey?
Is it that background-color:black ?
I suppose I could try that
Let me check later

[scrambler]

Yes the color of the sub menu are is the background-color:black (now highlighted in grey in my last post, put any color you want there.

If you use a different color for that background than for the sub menu item, there will be a small space between them.
I cant find out where it comes from, but I can make it go away by changing

.wvrx-menu ul li {display:inline-block;}

to

.wvrx-menu ul li {display:inline-block;margin-right:-6px;}

[weavering]

That last post removed the gaps between buttons but still solid black on right side

Your previous post was out of sequence with mine
unhappily the @media version doesnt seem to work with IE8 but ok with firefox
Do we forget the @medai route?

However youre right about excess javascript
Whenever I click customiser it pauses then throws a not responding error which is resolved by pressing continue

I also found this piece on wordpress.org
https://en.forums.wordpress.com/topic/child-pages-as-second-line-menu?replies=1
which needs more work!

thanks for persevering scrambler!

[scrambler]

1- I understood you said you wanted a permanently opened spaced defined for the sub menu, which is why I put a background. If you don’t want one, remove the background rule.

That will eventually create a weird situation when a sub menu page is active with its sub menu is opened, and you hover over another menu item with a sub menu, you may see the bottom sub menu extend beyond the top sub menu.

2- A lot of things do not work on ie8 including on some other theme functions.
What you could do is add the rules below After the @media one to work on IE8, with the drawback that on IE8 you may have the delay.

.ie8.is-desktop .wvrx-menu ul li {display:inline-block;}
.ie8.is-desktop .is-menu-default .wvrx-menu > li {position:static;}
.ie8.is-desktop .wvrx-menu  ul, .is-desktop .wvrx-menu .current_page_parent ul {left:0px;position:absolute;top:35px;width:100%;background-color:black;}
.ie8.is-desktop .wvrx-menu .current_page_item ul, .is-desktop .wvrx-menu .current_page_parent ul  {display:block;}
.ie8.is-desktop .wvrx-menu  {padding-bottom:70px;}
.ie8.is-desktop .wvrx-menu.menu-hover li:hover > ul {z-index:10000;}
.ie8.is-desktop ul.wvrx-menu {position:relative;}

You may want to look for a plugin for this menu for a full support…

[Author]

Posts