[Resolved] Customize slide menu on mobile devices.

[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.

[David]

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.

[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;
}

[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.

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

[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.

[David]

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

[Tayfur]

Certainly. I added site access information.

[David]

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

[Tayfur]

Everything is fine right now.

Thank you very much for your support.

[David]

You’re welcome

[Author]

Posts