www.wysiwygwebbuilder.com

Hi,

I'm trying to center a horizontal menu in a Layout Grid. I tried using a Menu Bar, but it keeps coming out on the left side, when I have one column. I tried using 3 columns and putting the Menu Bar in the middle column, but it wasn't quite centered, and when browser window was smaller, it was even less centered.

I also tried using a CSS Menu, which I know (now) is not responsive. Oddly, it worked fine in every respect, except the sub-menus went behind the Layout Grid below it (the sub-menus appeared to have a lower z-index). I tried many things but couldn't get the sub-menus in front of the Layout Grid that was below the Layout Grid with the CSS Menu in it on the screen.

I also tried using the CSS Menu in a Page Header, but the sub-menus still went behind what was lower down.

If you could help me to solve either one of these problems, or suggest another solution, that would be great.

Thank you,
Jim McGinn

To be able to help you, I need a demo project so I can see all your settings.
I do not need your complete project, just a demo with one page.

Also, what makes you think the CSS menu is not responsive?

I also tried using the CSS Menu in a Page Header, but the sub-menus still went behind what was lower down.

Make sure the stack level of the page header is set to 'in front of content'

Hi Pablo,

I have uploaded a wbs file and the image that I used in it. You can get them here:
https://www.dropbox.com/sh/310fa5is6fw0 ... qkrVa?dl=0

1. On the index.php page, the menu is a CSS Menu, and the sub-menu under Resources goes behind the blue bar and the text.

2. On the index2.php page, the menu is a Menu Bar. The sub-menu works, but I can't get it to center the Menu Bar horizontally on the page.

3. Bonus Problem: My index.php doesn't work when used as a Master Object on page1, and also my Header_Page doesn't work when I use it as a Master Object on page2. And page2 has "Invalid use of header." If you could have a quick look at these, too, that would be great.

I have been trying many, many experiments, and I've read many pages on your site, and quite a few on the forums. I know how break points work (and they work very nicely in WB), and we know we want it as a reflow site. I'm just trying to get the final mock-up working fully. Any help would be greatly appreciated!

Thank you,
Jim McGinn

First please note that version 11 is no longer supported.

But here are some tips:
1. Add z-index: 9999 to the custom style of the menu to bring the menu to the foreground.
2. The menubar is not inside a layout grid so it will have an absolute position.
3. Master objects cannot have a page header, a page header cannot be inside a container. In newer versions you can use a master page instead.

First please note that version 11 is no longer supported.

Thank you. We bought version 10 - 11 a few years ago to convert a site to responsive, but due to a number of factors we weren't able to use it for that. I'm now building a new site from scratch, so I thought I would give WB a quick try. Thanks to your tip below, it looks like it will work for this. Once I've done a bit more testing to confirm this, I will buy version 15, so the new website will have latest standards applied to it. I've downloaded version 15.2.0 and I will continue to test building this site.

1. Add z-index: 9999 to the custom style of the menu to bring the menu to the foreground.

Thank you! That worked.

2. The menubar is not inside a layout grid so it will have an absolute position.

That makes sense, but sorry, I thought it was in a Layout Grid. It looks like the MenuBar2 is in LayoutGrid6 in the Object manager. Also, here is the first part of the code from LayoutGrid6 (it appears to show it is):
<div id="wb_LayoutGrid6">
<div id="LayoutGrid6">
<div class="row">
<div class="col-1">
<div id="wb_MenuBar2" style="display:inline-block;width:100%;z-index:1012;">
<div id="MenuBar2">
<ul style="display:none;">
<li><span></span><span>HOME</span></li>

It would be nice to know for the animated menus, for the future, how to get this working.

3. Master objects cannot have a page header, a page header cannot be inside a container. In newer versions you can use a master page instead.

Thank you, I'll test that in version 15.

Thank you,
Jim McGinn

I could not find the menubar you are referring to in your project. Maybe you did not share the correct projetc?
Also, note that layout grid should not be inside a page header. A page header is a fixed/absolute container.
If you want a flexible header then use a layout grid or flexbox container instead.

I could not find the menubar you are referring to in your project. Maybe you did not share the correct projetc?

I just downloaded the file from dropbox, and MenuBar2 is there on index2.php. (There is also a CSS Menu down below - just ignore that. It was an experiment I forgot to delete.)

Anyway if you can tell me why I can't center it, I would appreciate it. If it's something that is fixed by version 15, then it won't matter.

Also, note that layout grid should not be inside a page header. A page header is a fixed/absolute container.
If you want a flexible header then use a layout grid or flexbox container instead.

I understood that from your previous message, thank you (but I appreciate your reminders).

I got a bunch more of the main site design done tonight, and it's looking good and working well. Hopefully I'll get version 15 this coming week.

Thank you,
Jim McGinn

In WB14 the menubar is always full width, so the alignment of the layout grid will not have any effect on the menu bar.
In WB15 you can set the 'full width' property of the menu to false to center it.