Copy link to clipboard
Copied
I have everything in place for my drop down sub-menu which works in testing on shrunken screen but will not work on my HTC One when I check it now we have gone live! I am guessing that the issue to hand is that once you have pressed the hamburger to expand the menu down it goes about half way down the screen with clickables and the last choice you get is the celebration drop down menu, click on this and the menu does drop down to the final choice being the 'Make Your Choice' as the very bottom item (which is the very bottom of my screen, now when you click on that (tap) instead of opening the further choices up it closes the choices down to top drop down menu i.e. celebration stationery option. I am guessing this is because the second drop down has no where to go as there is no screen left under the 'Make Your Choice'.
This is obviously not acceptable as it makes a large percentage of the site not available to mobile viewing. Does anybody have any suggestions for fixing this issue? There is still another page to go under Font Choices in the sub menu drop down.
In-case you want to check this out for yourself on your mobiles then please go to AD Design & Print. I would appreciate help with this as the site is now live with all pages passing WC3 validation.apart from Contact-us that has an 'error' in the embedding code supplied by Google for the map.
Try including the below script after the link to your Bootstrap js file at the foot of your page. That should stop the default toggle collapsing all open states.
<script>
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Copy link to clipboard
Copied
In the original coding prior to putting in new navbar there is I have tried removing this padding but it only reduces gap not removes so I have left alone until you advise.
Copy link to clipboard
Copied
In the original coding prior to putting in new navbar there is
<body style= "padding-top: 52px; max-height: 0px; color: #9D7E48;">
I have tried removing this padding but it only reduces gap not removes so I have left alone until you advise
Copy link to clipboard
Copied
Its safe to remove padding-top: 52px; from the body tag. That was to push tne main content of the page down as a result of using the Bootstrap fixed nav bar. I have no idea why max-height: 0px; is set on the body tag. I would delete that as well. When l get back in l will have a further look and see if l can identify why the gap at the top of the page is being generated.
Copy link to clipboard
Copied
Removed from all pages and uploaded altered pages
Copy link to clipboard
Copied
Having removed both has done the trick.
max-height was part of auto put there by bootstrap in Dreamweaver!
Now to just design ecommerce template page and work on cart to go with. Getting there slowly!
Copy link to clipboard
Copied
Measha06 wrote
Now to just design ecommerce template page and work on cart to go with. Getting there slowly!
Use Paypal cart.........its fairly easy to set up. Even easier if you use just the Paypal 'buy' buttons.
Get ready! An upgraded Adobe Community experience is coming in January.
Learn more