Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1080502

    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

    #1080548

    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

    #1080556
    #1081234

    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

    #1081374

    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.

    #1081598

    Here’s the screenshot directly from my iphone 7.

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

    J

    #1081600

    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

    #1081916

    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

    #1081961

    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, 9 months ago by gatehealing.
    #1082651

    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

    #1082779

    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

    #1082943

    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

    #1084891

    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

    #1085683

    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, 8 months ago by gatehealing.
    #1085686

    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

    #1085828

    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

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