Mobile menu issues

  • Resolved jorgspek

    (@jorgspek)


    7 years, 6 months ago

    Hi,

    I noticed that when I set the header to Fixed, it works just fine in desktop layout, but it’s not fixed in the mobile view.

    I did some css tinkering and added position:fixed to the header, and that works. But I would also like the header to change color when scrolling down, just like on the desktop view. Is there any way to achieve that?

    Also: I’d like to put the mobile (hamburger) menu on the right side of the screen. I found a post that said it could be done with custom CSS, but so far I’ve had no luck finding the right combination of settings. Could you point me in the right direction?

    Thanks in advance,
    Jorg

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author satoristudio

    (@satoristudio)

    Hey Jorg,

    the header not getting fixed on mobile screens is intended behavior for Bento (you can see the same patter on the demo site) – while testing this feature we discovered that it plays poorly with the slide-out sidebar menu. If you really need to, you can enable the fixed header on smaller screens by editing the /includes/js/theme-scripts.js file (preferably via a child theme), line 415 – the part where is says $str(window).width() > bentoEmValue(80) by changing the last value to 1.

    In order to achieve a right-side mobile menu trigger, you’ll have to get rid of the logo (display:none on the .logo element) and force the .mobile-menu-trigger element to stick to the right (float:right).

    Cheers,
    Andrii / Satori Studio

    Thread Starter jorgspek

    (@jorgspek)

    Hi Andrii,

    Thanks again for your help.

    I played around with the fixed header and made some changes so it works correctly on mobile devices as well. What I did was:

    – Step 1: Create a copy of the PHP function that generates the menu trigger and the menu. (and rename it of course) This is in /includes/template-tags.php
    – Step 2: Leave the menu trigger in the original function and remove the mobile menu code.
    – Step 3: Leave the mobile menu in the copied function and take out the menu trigger code.
    – Step 4: Edit Header.php and call the copied function right above the header section. Leave the original mobile_menu function in the header section.
    – Step 5: Edit the css to make sure that the .mobile-menu class look as follows:
    .mobile-menu{
    z-index: 99997;
    position: absolute;
    top: 0;
    left: 0;
    }

    That should be it.

    Explanation: z-index doesn’t work correctly on some mobile devices if position is not set to relative or absolute. In this case, it was set to fixed.
    But if you set it to relative or absolute whilst inside the header, the height of the menu would be restricted to the header itself. That’s why we need to take it out of there and apply the absolute positioning.

    I tested this on my iphone and in Chrome and Edge browsers on pc and so far it works flawlessly.

    Hope this helps you to make the excellent Bento theme even better, and let me know if you would like a copy of my files or some further explanation!

    Best Regards,
    Jorg

    • This reply was modified 7 years, 6 months ago by jorgspek.

    Hi,

    I would like to do the same thing on my website as Jorg has shown in his post above…but I am just starting with the WordPress and I am not sure how to do this? I mean, I’ve read the instruction but I don’t get fully how to do this. Could you, Jorg, or someone else who understands that, describe this way in more details?

    Thanks!

    Joanna

    • This reply was modified 7 years, 1 month ago by velianka.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile menu issues’ is closed to new replies.