R Menu Builder/Browser Interactions

User 488156 Photo


Registered User
7 posts

I have built a 6-element menu with subs to replace the existing menu (built with CSS3 Menu) that is currently on my production version of index.php. I have the following results with the top 5 browsers:

Opera 12.16, Build 1860: Works perfectly!
Safari 6.0.5 (8536.30.1): At some widths, goes to 2 lines. At near full screen, goes to 2 lines, all white.
IE9, Firefox 20.0.1, Google Chrome 29.0.1547.66 m: All display 2 lines, with Release Notes on line 2, and at near full screen, goes all white.

Also, in all browsers, everything displayed below the menu seems to be overlayed with a gray filter. I should explain that the index page (as well as all 9 pages in the site) has its own Head section. Then, in the first action after the Body statement, a call is made to DWBanner.php, which loads the welcome statement, the photo, and the menu. Everything under the menu is then loaded via the index.php body HTML code.

The above is true for all pages in the site, in that each page makes a call to DWBanner.php to load the welcome statement, photo, and menu, then loads the rest of the page itself.

I have modified some of the "a href" CSS statements that Menu Builder generated to add a "target=_blank" option, so that external links open in a new page. Internal links were left as created, and open in the active page.

I am concerned about why the rest of the page after the menu has a gray overtone to it, and can't find a reason for it. Also concerned about the differing actions for the various browsers. I realize this is a "Beta" program, but hoping you can help. Thanks in advance for your assistance!

DearbornWeather.com/index2
User 103173 Photo


VP of Software Development
0 posts

Without seeing the saved menu, what I "think" you did here was this. When you opened the program, you maximized the application and created a breakpoint. By doing so, I bet you have a breakpoint somewhere above 1200px. After that, you went to the lower breakpoints and started styling things. This is why you see two different menus based on your browser dimensions. One for the 1200px+ which has no style applied to it and the other on the current breakpoints that do have styles applied to them. Try deleting the higher breakpoint and that should help fix things up.

I have also checked in the different browsers here and I am not seeing any "gray" filter though. Where exactly are those appearing?
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 488156 Photo


Registered User
7 posts

Open two windows, one at DearbornWeather.com/index (my production file), and the other at DearbornWeather.com/index2 (which has the Menu Builder in it). As you switch back and forth between the two, you will see that everything below the menu bar in index2 is not as bold and stark appearing as it is in index. Almost as if you were viewing it through a light gray-tinted film.

As for breakpoints, I moved the sizer all the way to the right. In Properties, Max Width has 1496 px (in gray), and Off has a check mark in it. I have saved and re-loaded, but it still acts the same as the window is widened to 3/4 screen or larger (I'm doing this in Safari).
User 103173 Photo


VP of Software Development
0 posts

Steve wrote:
Open two windows, one at DearbornWeather.com/index (my production file), and the other at DearbornWeather.com/index2 (which has the Menu Builder in it). As you switch back and forth between the two, you will see that everything below the menu bar in index2 is not as bold and stark appearing as it is in index. Almost as if you were viewing it through a light gray-tinted film.

As for breakpoints, I moved the sizer all the way to the right. In Properties, Max Width has 1496 px (in gray), and Off has a check mark in it. I have saved and re-loaded, but it still acts the same as the window is widened to 3/4 screen or larger (I'm doing this in Safari).

I still don't see the gray Steve. Both menus are look identical to me.

As to the breakpoint, you still have the same underlying problem. What you did was create a breakpoint at 1496 but left the default styling, so at that breakpoint there and higher, you have the white menu. Your other breakpoints you created, you started adding styling to it.

You may find it easier to start over and create the menu again and make sure to use the correct breakpoint locations and style each accordingly.

If you still cannot get it to work, I would need to see the saved menu project file so I can look over the settings and see how you have configured it.
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 488156 Photo


Registered User
7 posts

I'll delete what I've created, and re-build it from scratch. In order NOT to have any breakpoints (don't intend to be responsive until software for the whole site is available), I should leave Max Width blank, and just place a check mark in Off? Thanks for your efforts so far. I'll re-post tomorrow when I've re-built things.
User 103173 Photo


VP of Software Development
0 posts

Steve wrote:
I'll delete what I've created, and re-build it from scratch. In order NOT to have any breakpoints (don't intend to be responsive until software for the whole site is available), I should leave Max Width blank, and just place a check mark in Off? Thanks for your efforts so far. I'll re-post tomorrow when I've re-built things.

I would leave the box unchecked as it is for the default settings.

Do let us know how it goes! :)
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 38401 Photo


Senior Advisor
10,951 posts

Looks like you have a CSS conflict there to me and that the Menu builder's CSS is overtaking the site's CSS. Check to make sure you don't have duplicate tags between the 2 as that's most likely the issue here.

@Scott, this is what a few of the users have been asking to have changed in the programs (not just this one) where the CSS and JS file names as well as the element tags in them are unique to the functions they are working for. So if it's a CSS tag for the menu it should be prefixed with something like:

cc-menu-taghere

This way it will never conflict with any other elements on the page. :)
User 103173 Photo


VP of Software Development
0 posts

Jo Ann wrote:
@Scott, this is what a few of the users have been asking to have changed in the programs (not just this one) where the CSS and JS file names as well as the element tags in them are unique to the functions they are working for. So if it's a CSS tag for the menu it should be prefixed with something like:

cc-menu-taghere

This way it will never conflict with any other elements on the page. :)

We will be implementing that shortly. ;)
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.
User 187934 Photo


Senior Advisor
19,260 posts

Is shortly sooner then soon?:lol:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 103173 Photo


VP of Software Development
0 posts

Eric Rohloff wrote:
Is shortly sooner then soon?:lol:

Shortly is later then soon, but not sooner than later. It will arrive just in time to be soon enough. ;)
Learn the essentials with these quick tips for Responsive Site Designer, Responsive Email Designer, Foundation Framer, and the new Bootstrap Builder. You'll be making awesome, code-free responsive websites and newsletters like a boss.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.