Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 19, 2019 at 8:10 pm #1080502
    gatehealing

    On Mobile devices, when my main menu is viewed via burger menu, the title (Jonathan F. Anderson, Gate Healing, PLLC) is on a transparent background, so scrolling down causes menu items to go behind the title area.

    How do I make the burger menu title area background opaque white? I looked in Advanced Styling and burger menu areas and cannot find the setting for this.

    Thanks,
    Jon

    March 19, 2019 at 9:31 pm #1080548
    Victoria

    Hey gatehealing,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    March 19, 2019 at 9:58 pm #1080556
    gatehealing

    D’oh!
    https://gatehealing.com/

    Thx!

    March 21, 2019 at 8:45 am #1081234
    Victoria

    Hi gatehealing,

    https://imgur.com/a/YqmSSuh I am seeing it like this on my mobile too and the menu does not stick, so it scrolls out of the viewpoint.

    Can you please attach a screenshot of the issue on your end?

    Best regards,
    Victoria

    March 21, 2019 at 1:24 pm #1081374
    gatehealing

    Oh, that’s not quite what I’m talking about, apologies. Click on the burger menu lines, then the menu items (home, counseling services, individual counseling, marriage counseling, etc.) are what go behind my name/company. My battery is going to die any second, so I’ll attach screenshot when I get to recharge. . .. I will say that in viewport, before opening burger menu, my name/company is huge and formatted wrong, whereas on my iphone7 itself, it looks fine.

    March 21, 2019 at 11:02 pm #1081598
    gatehealing

    Here’s the screenshot directly from my iphone 7.

    https://drive.google.com/open?id=1ZaPRpeMDNysGNW61WnKVcQRYwU9ncyEG

    J

    March 21, 2019 at 11:08 pm #1081600
    gatehealing

    And here are screenshots of what I see in the Customize tool where I can pick Desktop, Tablet or Mobile using icons at bottom of left panel . . . I am using Chrome browser; these do seem to show up fine on my devices though–just thought you may want to know if this is a possible integration issue with WordPress

    desktop:
    https://drive.google.com/open?id=1Xb6MN6OaU0GvHSo62mYyHx_xkgErfZqu

    tablet:
    https://drive.google.com/open?id=1TE0oG-4xOoR4ImzZAyVn6DE0wipBMDWs

    mobile:
    https://drive.google.com/open?id=12pDKOcOdVQ4BDIrsGdUghOT1qPpG4SVU

    March 22, 2019 at 4:28 pm #1081916
    Victoria

    Hi gatehealing,

    Thank you for clarifying it further. Please add this css and flush the cache:

    
@media and only screen and (max-width: 767px) {
    .logo .subtext {
        z-index: 1;
    }
}

    Best regards,
    Victoria

    March 22, 2019 at 6:11 pm #1081961
    gatehealing

    Hi Victoria,
    I’m afraid I may have confused things with my 2nd post showing the large size of my name in the Customize screen on desktop . . .

    This image is the one I am attempting to fix. . . the above code did not change the fact that my menu (when you open the burger icon) scrolls behind my name and company name. Here the problem I am having on mobile devices:

    https://drive.google.com/open?id=1ZaPRpeMDNysGNW61WnKVcQRYwU9ncyEG

    Jon

    • This reply was modified 5 years, 8 months ago by gatehealing.
    March 25, 2019 at 1:34 pm #1082651
    Victoria

    Hi gatehealing,

    The code I gave you was supposed to hide the image and not show it when the menu overlay is active. Is it not working for you like this?

    Best regards,
    Victoria

    March 25, 2019 at 5:49 pm #1082779
    gatehealing

    So if you’re talking about the compass logo image, that’s already not present on mobile devices.

    What is happening is the same thing as the initial screenshot link I posted: my name/company text appears when you tap the burger with menu items below. When you scroll down, the menu items are visible behind my name/company name (text).

    Here’s the link again—it’s exactly this still:
    https://drive.google.com/open?id=1ZaPRpeMDNysGNW61WnKVcQRYwU9ncyEG

    Thx for helping.
    Jon

    March 26, 2019 at 3:31 am #1082943
    gatehealing

    Oh, if you mean my name/company (text) isn’t supposed to show up with that code, no, it didn’t work. Just wanted to clarify.

    J

    March 30, 2019 at 4:28 pm #1084891
    Mike

    Hi,
    Sorry for the late reply, I have taken a look at your site on mobile and see that your company name is floating in front of the burger menu when it opens. This is because your autoptimize cache has the element “ .logo .subtext” with a z-index of “999”, which is way too high. The solution, as Victoria pointed out, is to set the z-index to “1”
    So while I couldn’t override the css in autoptimize with this:

    @media and only screen and (max-width: 767px) {
    .logo .subtext {
        z-index: 1 !important; 
    }
}

    I was able to with javascript, Try adding this code to the end of your functions.php file in Appearance > Editor:

    function set_logo_zindex(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  $('.menu-item-avia-special').click(function(){
  $('.logo .subtext').css({'z-index':'1'});
  });
  });
  })(jQuery);
</script>
<?php
}
add_action('wp_footer', 'set_logo_zindex');

    Please see the video in Private Content area.
    Please post your admin access if you need a hand adding this to your functions.php
    Then Please clear your browser cache and check.

    Best regards,
    Mike

    April 1, 2019 at 8:03 pm #1085683
    gatehealing

    Thanks. I’ll start working on it now.

    I’ll check back in a few with results.

    tHanks!
    Jon

    PS would it be easier or a better practice for me to exclude any particular script to accomplish this (from Autoptimize settings)?

    • This reply was modified 5 years, 7 months ago by gatehealing.
    April 1, 2019 at 8:09 pm #1085686
    gatehealing

    I see what was happening. Further up in my quick css we had adjusted my subtext stuff and z was set to 999. By changing that to 1 it fixed the issue. . . I was simply adding new quick css per Victoria’s suggestion, but I had not realized that I needed to remove the other z value (or, as I just did, replace the 999 instead of adding new lines of css).

    Sorry for the confusion. This works perfect for now as it just removes my name etc. from the top of the activated burger menu. I may explore putting something up there down the road, but for now, this works great.

    Thanks!
    Jon

    April 2, 2019 at 5:14 am #1085828
    Mike

    Hi,
    Glad to hear you got it sorted out, unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.