Dropdown in Mobile Menu being cut off.

[ErikThiart]

Hello, when you create a menu with a dropdown that dropdown expansion gets cut off by the menu.

Below I created a menu using this vanila code http://beauter.outboxcraft.com/docs/navigation/ Note the Tutorial Dropdown - Works on Desktop, but gets cut off on mobile.

Example:

Full width - Desktop Responsive - Mobile

[ramdeoshubham]

Hi @ErikThiart

Thank you very much for sharing your issue. This issue and many others have been corrected and are scheduled for Beauter 0.3 Update. We are planning to launch the update after a good amount of testing at the end of this month along with new features like 5 column grid, templates and much more. Would it be okay if you can wait because sending here the correction CSS might create some overriding issues with the current version of Beauter.

Thank you for your kind cooperation :)

[ErikThiart]

Ahh, awesome. This is a redo of my personal website, so do not have a set deadline, but would it be possible for you to send me the files to the beta version of Beauter, Then I can start exploring that so long, I won't pull it into production, but I would be able to then "get ready".

Basically, I am bored and don't want to sit 10 days not making any contributions let me be a tester. :P

[ramdeoshubham]

It will be very nice of you to help improving and testing Beauter. Ohkay... So I will create a new branch for 0.3-dev and will upload the code there. Thanks for taking interest :)

[ErikThiart]

Awesome! Thank you very much.

[ramdeoshubham]

Welcome @ErikThiart :) New source will be uploaded as soon as we test the utilities. I am sorry for the delays.

[ErikThiart]

No problem, looking forward.

[ErikThiart]

Still looking forward.

[ramdeoshubham]

Hello @ErikThiart I am sorry for taking time. But we are having issues mostly regarding Javascript as Beauter is not dependent on jquery or any other javascript framework but some simple js functions that alter classes. We are still in testing phase because you can see current version has many mixing issues. So either it will take 2 - 4 more days or otherwise, we will launch the beta version keeping the current stable version also available.

As for correcting the dropdowns in navigation, you can temporarily add the following lines of CSS to your HTML file after including the Beauter stylesheet.

@media screen and (max-width:750px)
{
    ul.topnav.responsive li.dropdown .dropdown-content
    {
         position: relative; 
    }

    ul.topnav.responsive li.dropdown:hover .dropdown-content
    {
         display: inline-block !important;
    }
}

It produces a separate dropdown section which can be hidden on clicking the plain area on the side giving better usability on the touch devices as clicking and hovering produce the same effect.

Thank you for being involved with Beauter :) ramdeoshubham

[ErikThiart]

No problem! I understand how these things go, I appreciate the workaround I will add it for the time being and continue building out the website.

Leave the beta, test it until you have it all nailed and then release the new version. The issues with beta releases are that it might put someone off who otherwise might have been a big contributor. It's all about perception, you have a brilliant framework here already and I am going to be using this going forward, I will leave the credits in place, this framework has potential and you guys have a good attention to detail which is amazing.

[ramdeoshubham]

Beauter 0.3 is just released with all the suggested changes and still being tested with multiple combinations of components. We added a lot of features this time to work on 0.3.x patches. We are also working on better documentation and will try our best that before 0.4 releases, there remains no misaligned design in beauter. Thank you very much @ErikThiart for your kind patience and suggestions to improve Beauter :smile: We welcome you to any further contributions for Beauter.