Customizing menu for Mobile browsing

  • Resolved joergenwestman

    (@joergenwestman)


    3 years, 10 months ago

    Hi,

    I managed to post this question to “responsive-community” now I post this question again to “responsive”

    I recently asked for help with menu navigation using mobile phones on our website.

    It did turn out that the mobile menu was working OK (as designed), but if you don’t hit the exact right spot on the dropdown arrow it will not expand.

    I got adviced to instead of letting the WEB site do the menu automatically, create the menu manually to get better control so that I myself can change the area you press on the down arrow.

    I have now got a our web site copied to a development site “dev.bolinderbyn.se” where I have created the menu system manually.

    As it is now it behaves exactly as “bolinderbyn.se” when navigating with a mobile phone.

    So what should I now do to actually change what I need to improve for the navigation?

    Is there some CSS code needed?

    WP is 5.7.2, Responsive is 4.6.2.

    Best Regards

    J?rgen Westman

    The site I need help with: https://dev.boliderbyn.se

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi ?there,
    ?
    Thanks for reaching out.

    I have the details with the specialist team, please expect slight delays in response due to the prevailing Covid situation.
    Rest assured, the team will look into the query and respond back within 24-48 hours.

    Have an amazing day ahead.

    Thanks,
    ?Team CyberChimps

    Hello @joergenwestman ,

    Yes, now you can make few CSS changes for the dropdown arrow.

    Can you please let me know what changes you need for the dropdown arrow so that I can provide possible custom CSS for it?

    Thread Starter joergenwestman

    (@joergenwestman)

    Hi adwait21,

    Thanks for replying so quickly.

    What I would like to change for the down arrow is the area you have to touch show the dropdown.
    Right now you have to touch the top right corner, I would like the area to either be lager towards the text to the left or to be in the middle of the down arrow.

    I guess it is not possible to disable the text from being a touch area.

    Best Regards

    J?rgen Westman

    Hello @joergenwestman ,

    It is not possible to disable the text from being a touch area since it is also one link to the page or post.

    You can increase the size of the area on the left for the dropdown arrow with these steps –

    1) Go to WordPress admin dashboard -> Appearance -> Customize.
    2) Select the Additional CSS tab.
    3) Add the following custom CSS in the input field –
    `@media screen and (max-width: 767px) {
    .res-iconify {
    padding-left: 30px;
    }
    }`

    You can change the value (30px) as per the requirement.

    Hello @joergenwestman ,

    It is not possible to disable the text from being a touch area since it is also one link to the page or post.

    You can increase the size of the area on the left for the dropdown arrow with these steps –

    1) Go to WordPress admin dashboard -> Appearance -> Customize.
    2) Select the Additional CSS tab.
    3) Add the following custom CSS in the input field –

    @media screen and (max-width: 767px) {
.res-iconify {
padding-left: 30px;
}
}

    You can change the value (30px) as per the requirement.

    Thread Starter joergenwestman

    (@joergenwestman)

    Hi adwait21,

    Thanks for the help, your suggestions did work right away.

    I close the case.

    Best Regards

    J?rgen Westman

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Customizing menu for Mobile browsing’ is closed to new replies.