[Resolved] Customize slide menu on mobile devices.

Home Forums Support [Resolved] Customize slide menu on mobile devices.

Home Forums Support Customize slide menu on mobile devices.

  • This topic has 9 replies, 2 voices, and was last updated 1 month ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2230605
    Tayfur

    Hello.

    In the screenshot below, the customization I want to do is attached.

    https://prnt.sc/qjFr-EzJrqtR

    I shared access with the support team.

    Thank you.

    #2230700
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    #generate-slideout-menu .inside-navigation img {
        order: -1;
        padding: 20px 0;
        width: 150px;
    }
    #generate-slideout-menu .inside-navigation button {
        width: auto;
        position: relative;
        right: -20px;
    }

    The last rule – the position relative and right property are optional they simply position the button to the right.

    #2230725
    Tayfur

    Yes, everything is fine now. Thank you for the support, David.

    “The last rule – the position relative and right property are optional they simply position the button to the right.” I just don’t fully understand this area.

    This is how I solved the problem. To position the close icon on the right.

    #generate-slideout-menu .custom-logo-link {
        order: -1;
    }
    #2230765
    David
    Staff
    Customer Support

    “The last rule – the position relative and right property are optional they simply position the button to the right.” I just don’t fully understand this area.

    Change:

    #generate-slideout-menu .inside-navigation button {
        width: auto;
        position: relative;
        right: -20px;
    }

    to

    #generate-slideout-menu .inside-navigation button {
        width: auto;
    }

    And you will see what those two properties are doing

    #2230781
    Tayfur

    David, you are amazing.

    I don’t want to tire you. One last question.

    Here a full-width line has been added under the logo and close icon.
    https://prnt.sc/KnT1A96HoriN

    I can’t add it on the GeneratePress side alone. The reason is it’s not inside a single div.
    https://prnt.sc/1NzYUpvOeEzV

    How can I solve this field?

    Thank you so much.

    #2230821
    David
    Staff
    Customer Support

    Can you reshare the link to your site ? ( resolving a topic removes them 🙂 )

    #2230827
    Tayfur

    Certainly. I added site access information.

    #2230839
    David
    Staff
    Customer Support

    You can do this:

    #generate-slideout-menu .inside-navigation .main-nav:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        border-bottom: 1px solid rgba(0,0,0,.1);
    }

    and then just remove the border-top you have on the: #generate-slideout-menu .slideout-menu li

    As a note the x exit, i would suggest adding back some left and right padding, to increase the tap target width or google may have a moan

    #2230846
    Tayfur

    Everything is fine right now.

    Thank you very much for your support.

    #2230892
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.