Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #862884

    Hi guys,

    Wordpress v4.8.2; Enfold version 4.1.2.

    I have an issue where the social media icons are being displayed twice on one of my enfold themed websites, both to the right in the top bar and in the header to the right of the hamburger menu icon. This only happens on mobile ( width < 990px) and started when I changed the header layout from logo left, menu right to logo left, menu below. Social icons are set to “Display in top bar at the right”.

    To reproduce the issue:
    You can see the issue now on a screen size less than 990px at the link in the private content. Admin login is also included there. You will see that if you change the header layout to logo left, menu right, the extra set of icons in the header will disappear. I know I could hide these with CSS, but I feel that this is a bug in the theme that should be fixed? I have created a child theme and added some customisations, but not to the header or social icons. The override of the includes/helper-main-menu.php template in the child theme was only created earlier this week, so is up to date with the latest theme version. Just to make sure that my customisations aren’t causing the issue, I created a clean WordPress install with Enfold and imported a demo and still get both sets of icons (top bar and header). I included URL and admin login for the sandbox site too.

    If you want to make any customisations, please do so on the clean sandbox installation (second set of information). Please do not make any changes to the website related to the first set of information.

    Thanks,
    Gareth

    #863302

    Hey Gareth,

    Which ones do you want to keep? The ones next to the burger or the ones above the burger menu?

    Best regards,
    Victoria

    #863336

    Thanks for getting back to me Victoria.

    I would like only the ones relevant to the settings I have selected (“Display in top bar at the right”) to be displayed. So, that would be “the ones above the burger menu”.

    #863414

    Hi Gareth,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (max-width: 989px) and (min-width: 768px) {
      .responsive.html_mobile_menu_tablet #top .av-logo-container .social_bookmarks {
        display: none !important;
      }
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #863415

    Thanks for the CSS Victoria. Please could you comment on this statement in my original post: ” I know I could hide these with CSS, but I feel that this is a bug in the theme that should be fixed?”

    Surely duplicated icons is a bug? Will you add it into your development pipeline as a bug for fixing please?

    #863462

    Hi Gareth,

    You have a copy of the helper-main-menu in your child theme, it could be the old version and be the reason for the duplication. Have you updated it?

    Best regards,
    Victoria

    #863484

    Thanks Victoria. I went to so much effort in my original post to make sure I was submitting a valid support request. Please do me a favour and go and reread it. I created a clean install of WordPress and Enfold and the issue is still there.

    By the way, your CSS still leaves a border and a big gap to the right of the hamburger icon. The final CSS I am using to hide the duplicated icons for anyone else who may have this problem is:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
        .responsive.html_mobile_menu_tablet #top .av-logo-container 
    .social_bookmarks {
            display: none !important;
        }
    
        .avia-menu.av_menu_icon_beside {
            padding: 0;
            margin: 0;
            border: 0;
            -webkit-transition: none;
            transition: none;
        }
    }
    #864005

    Hi garethlawson,

    Glad you got it working for you and thank you for sharing! :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #864009

    In a previous reply I asked, “Will you add it into your development pipeline as a bug for fixing please?” You have not responded to that question. Is this not the correct place to report this as a bug Victoria? Or is this not something that the Enfold development team would consider to be worth fixing?

    #864685

    Hi,

    I can’t reproduce the issue on my installation. The “social bookmarks” container is not duplicated in the main header container next to the burger overlay unlike in your installation. Did you add any modifications to the site?

    Best regards,
    Ismael

    #864698

    Hi Ismael,

    If you read my original post at the top of the thread, you will see that I went to the effort of creating a new, clean installation of WordPress and Enfold with NO MODIFICATIONS, apart from importing one of the Enfold demos. I am also hosting this myself and made the site accessible to the Enfold team as a proof of concept (see the Private Data in the original post).

    It’s quite frustrating that I have to keep repeating this information. Please feel free to login there and take a look for yourself. Please also read the original post because the issue is only present when a specific combination of settings is used. I explained this in my original post.

    I understand that you must get an overwhelming number of support requests for a theme as popular as Enfold, which is exactly why I went to the effort to validate this issue and to make it as easy as I could for you guys to review it yourselves. If I have not been clear in my communication, please help me to understand how I could better approach something like this for future reference.

    Regards,
    Gareth

    #864872

    Hi Gareth,

    Thank you for all the effort!

    Ok, I tested too, WordPress 4.8.2. and Enfold 4.1.2, did not get the same effect either. Which version of php are you running?

    Best regards,
    Victoria

    #864898

    Hi Victoria,

    I encountered this on both PHP 7.0.x and PHP 5.6.x.
    Please make sure that you replicate all the theme settings on the site listed in the private area below. More specifically:

    • Main Menu -> Menu Items for mobile: Activate for Smartphones and Tablets (browser width below 990px)
    • header -> Menu and Logo Position: Logo left, Menu below

    Regards,
    Gareth

    • This reply was modified 1 month, 3 weeks ago by  garethlawson.
    #865003

    In addition, as mentioned in the original post, the issue is only visible on screen sizes between 768px and 990px in width, so make sure you are checking on a screen or with your developer tools set to emulate a screen in that size range.

    #865166

    Hi,

    I’m very sorry for the confusion. I didn’t know that the “Menu and Logo Position” has to be set to “menu below”. The missing css is indeed a bug but the duplication of the social bookmark in the main header container is not. The social bookmark container has to be present inside the main header once the burger menu is visible and the alternate or “menu below” container is hidden. This switch happens when the screen width is equal or less than 989px. You can also use the following css code to fix the issue. We’ll report it to Kriesi.

    #top .av_icon_active_right + #header_main .social_bookmarks, #op .av_icon_active_left + #header_main .social_bookmarks {
        display: none;
    }
    
    #top .av_icon_active_right + #header_main .avia-menu.av_menu_icon_beside, #top .av_icon_active_left + #header_main .avia-menu.av_menu_icon_beside {
        padding-right: 0;
        margin-right: 0;
        border: 0;
    }

    Best regards,
    Ismael

    #865409

    I have already created a CSS solution that works for me for now but thanks for validating. Look forward to seeing the permanent fix in one of the upcoming releases.

    Thanks again.

    #866089

    Hi,

    Alright. We’ll close the thread for now.

    Best regards,
    Ismael

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Duplicated Social Icons on Mobile’ is closed to new replies.