Absolute position additional custom button inside responsive menu

Home Forums Pro Support Absolute position additional custom button inside responsive menu

This topic contains 9 replies, has 2 voices, and was last updated by Kriti Sharma Kriti Sharma 2 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #69600
    Reginald Farrell
    Reginald Farrell
    Participant

    I’m trying to add an additional button to close the responsive menu. I am adding the class on this button as an additional trigger. The button html is being added via Javascript on page load. See the attached screenshot. The problem is that if I absolute position this button, which I have to do, clicking does nothing. If it is relative position, it will work, but I can’t put it where I would like. Any suggestions?

    Attachments:
    You must be logged in to view attached files.
    #69603
    Kriti Sharma
    Kriti Sharma
    Keymaster

    Hi Reginald,

    When you absolute position the button, then what parent element you give relative positioning? Can you please provide me the CSS you are using for absolute positioning of the button so that I can check why the issue is occurring.

    Regards,
    Kriti

    • This reply was modified 2 weeks, 2 days ago by Kriti Sharma Kriti Sharma.
    #69607
    Reginald Farrell
    Reginald Farrell
    Participant

    I’ve tried both #responsive-menu-pro-wrapper and #responsive-menu-pro-title

    #69608
    Kriti Sharma
    Kriti Sharma
    Keymaster

    Hi Reginald,

    Can you also please share with me the URL of your website so that I can have a detailed look.

    Kriti

    #69611
    Reginald Farrell
    Reginald Farrell
    Participant

    The site is ericleija.com. I’ve not pushed the changes to the live site yet though. I don’t want to push something to the site that doesn’t work.

    #69612
    Kriti Sharma
    Kriti Sharma
    Keymaster

    Hi Reginald,

    In that case, how I am able to review the website? Please provide me the working CSS on the live website so that I can help you with the issue.

    Regards,
    Kriti

    #69616
    Reginald Farrell
    Reginald Farrell
    Participant
    This reply has been marked as private.
    #69619
    Kriti Sharma
    Kriti Sharma
    Keymaster

    Hi Reginald,

    We changed the css position to relative and it does not work.

    We have a working example that is simple and does not require custom javascript.

    Please use the following.

    In responsive menu pro settings, Find Button -> Advanced -> Trigger

    Change #responsive-menu-pro-button to .responsive-menu-pro-button

    Add the following html code into the setting – Container -> Additional Content -> Content,
    <div class="responsive-menu-pro-button" style="color:#fff;position:absolute;top:100px;right:0px;">Close this menu!</div>

    On front-end you will see a text that says “Close this menu!”. Clicking on it, will close the menu. You can modify this html into a button.
    This works because the default button of responsive pro menu has a class name of .responsive-menu-pro-button

    If we use it as a trigger, you can use the same class name for many other html element and it will also work as trigger to close the menu. Here is a screencast of the above mention solution in work.

    https://drive.google.com/open?id=1519JSMt0799HsP7g8ogwTFB1OiysXOFI

    Thank you
    Kriti

    #69625
    Reginald Farrell
    Reginald Farrell
    Participant

    Thanks. That works. Maybe the issue was related to me adding the HTML via JS after page load and the way you are attaching the click handlers the the button triggers?

    #69626
    Kriti Sharma
    Kriti Sharma
    Keymaster

    Hi Reginald,

    We are glad that you found it helpful and thanks for reaching out to us.

    Kind Regards,
    Kriti

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Absolute position additional custom button inside responsive menu’ is closed to new replies.