Is there a conflict or have I messed up ?

http://tippingproductions.com/tpc/demosite12/

As you move the right margin of the browser it responds ok but when it gets small enough the navigation switches (just as designed) the problem is when it goes to the mobile navigation its supposed to go the width of the page and it doesn't. In Menu builder it looks and works correctly - I properties of the RLM it has 100% width and the gray button works like I want it to. I put the page together in CC HTML Editor.

I've changed the parameters of both programs to every combination I can think of. I'm sure its something stupid but I just can't find it.

Thanks to all in advance.

Byron

Set the width of menu in mobile break point to 100%

Thanks Mansour but they are at 100%. I haven't had this problem yet and done quite a few sites with RLM and Menu Builder. It is, however, my first navigation that switches from vertical to horizontal. It looks fine in Menu Builder and the RLM file says 100% at all break points.

I'm stumped

Byron

As a work around I was considering putting a background color in the column at the breakpoint that is the green so at least it would go the width of the page. The menu would be in the center - not a bad thing but not what I want and I guess it bugs me to not know and worry about it blowing up in the future!

Thanks again for looking at this

Byron

Then maybe your Margin set to auto.
It will bette to upload project file to investigate the problem. Menu builder has so many tinny setting.

I looked at your css files and if I understand what the problem is,
Check your style.css file. You have:



If I change the max-width to none, it spans the whole page as in the image.

Your max width for the nav is 311px throughout. You need a media query that changes the size after you move it.

Hi again Byron

I looked again and saw you do have a @media screen and (max-width:869px) and it’s set to 100%.

I put @media screen and (max-width:1108px) and @media screen and (max-width:1045px) above the @media screen and (max-width:869px) and it seemed to work. They were originally at the bottom of the page. I’m not sure if the order of these matter. Perhaps someone can chime in on that.

Oh well just thinking out loud. Hope I didn't confuse you

My last post hopefully

According to this site http://css-tricks.com/logic-in-media-queries/ order does matter. If that is true, then your last media query of max-width:1108px which is at the bottom of your css is over ridding your max-width:869px media query which is up in the middle of the css file. Why would CC write the css that way? Unless you manually added the last 2 media queries?

And again this is style.css

Going to have chew on all of this !!!!

I did not change anything from CC MB -

Thanks for the assist!!!