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.

Andrii,

Thanks again for your help.

I made some changes to the custom css section to fix my background-image layout for full-hd+ windows and will be looking into those php edits for the mobile menu.

Kind Regards,
Jorg

Excellent help, thank you!

Hi Andrii,

Thanks for the above, it helped me get most of what I wanted. Can you help me out with these last items:

– On the Bento Demo site, you have a title, subtitle and CTA button. How can I get the title and subtitle? I have a menu option ‘Home’ which is the title of my landing page. Please tell me it’s possible to set the text in the header somewhere other than in the page title… ??

– The CTA button doesn’t seem to respect the theme settings for button size and font. Is it possible to customize these?

– There is a lot of blank space underneath the header image. How can I get rid of this? The next row is a hero image.

– The featured image now scales with the browser window size, which is great. However: the CTA button overlaps the image when I get to Phone size. Is there any way to manipulate the image alignment?

Thanks in advance,
Jorg