I am using RW8 with Foundation.
The nav bar uses BWD MagicGellan2 with the MagicZone2 and BluePrint ONE.
@tav, any help from your end would be highly appreciated.
I am using a lovely nav bar on my site designed entirely by @TechBill.
The menu bar is not showing when on a mobile. Check out my site here
The issue resolves when the Impact stack is removed, but obviously that’s not nice.
What is interesting is:
even without the impact stack below it, the menu is not showing on mobile. Have a look at this RW project where there is nothing in the page except the Site Style and the stacks used to create the navigation bar. Have a look at the screenshot:
There is something odd happening with the CSS file for you page that is causing the problem. If I live edit the CSS and do nothing but press the space bar then everything starts working as normal again. This can often happen with hidden characters pasted in but it doesn’t look as though you have any custom code added.
First thing to try is to just copy the menu area and the impact to a new test page. Add an empty 1 col after the Impact and add a lot of top padding to it to ensure that the page is long enough to show the dropdown.
Is the problem still present on the new test page? If not then there is something else further down the page that is causing the problem.
If there is still a problem with the new test page then zip it up and send it to the BWD support address and I will take a look.
I created a new test page and I have added the empty 1 column stack between the navigation bar and the impact stack with a top padding of 300px. And… the menu is now showing up !.
the problem has been showing indefinitely. I went up until removing the Impact stack just below the navigation bar, and even without nothing BUT the navigation bar itself on the page is not working. Well, to be exact the letter HOME of the first link of the menu is 3% visible from the top (see the picture above) , as you can see from the first picture of this Topic.
The only way I can make the menu visible is by putting an empty column with 300px of padding on the top between the navigation bar and the impact stack.
This would be expected behaviour. The page (document) is only as tall as its content. The rest of the white background is just the browser window, your page content (i.e. the HTML) is not that tall.
When you drop down a menu, it needs space to drop into - i.e. if the drop down is taller than the document then you cannot see it - this is why I said to put a 1 col with some padding on it for testing purposes.
When you made a new test page, you reported that it worked OK - what is the difference between that test and the current cut down page?
The offer is still there if you want to email a cut down version of your project for me to look at but please remove as many stacks as possible while still showing the problem - i.e. simplify it as much as possible.
There is no difference. On the first test-page I have put a 300px top-padded 1 column stack between the navigation bar and the Impact header. That is the cause of the drop-down menu becoming visible. If I had done the same on the second test page, the menu would have been shown as well.
This is so interesting. I am not sure I fully understood what you mean, but I like when someone give me insights on web design. It is not my field, but I am always keen to learn.
Okay. Thanks a lot for that. I will send the cut down version with just the nav bar and the impact stack.
But as per my last post, your page must have enough content to give it some height so that the full height of the dropdown menu can be seen. Your “normal” page with your content on it will be sufficient for this. You only need the padded one column for testing purposes where the page is not tall enough with only the menu and the impact image on it.
Below this red line the page does not exist. The background looks white but there is no space for content, it is not part of your web page.
Now, because a dropdown menu floats over the page, it will not expand the height of the page to accommodate itself. If the dropdown menu is tall enough to extend beyond the red line then it will get cut off and not be visible. It has extended beyond the bounds of your page.
This is why I asked you to add a column with some padding to make this test page - purely to extend the height of the page so that it is tall enough to accommodate the drop down.
That is great. I tried it on my end also and it is working in the test page thanks to the CSS.
So, I then went to my site-project and noticed that the CSS was there, but nothing shows up (menu wise). Inspired by your problem-solving skills that I have learnt from you, I deleted all the CSS that I had in there and just type in your CSS for the menu… and guess what? IT IS WORKING!.
Now, I am gonna have a pretty busy day ahead and don’t have the chance to touch anything today. But tomorrow I will go through the same trick you told me to do with stacks.
I will delete each CSS code one by one UNTIL I will find out which one is bothering the CSS for the menu to work.
You have been so helpful. Cannot thank you enough. Thanks for your precious time.
A little update. The menu is now showing on all pages and in all devices.
I used the code Tav gave me and I deleted a few of the CSS inside RW that were bothering the code to work. I actually don’t know where all those CSS were coming from
You have been real legends… both of you! Thank you
…
