About Mobile Menu Social icons

Hello,

on mobile menu social media icons are not appear eventhough ı have added them in the bebuilder

in addition i have noticed that the changes that ı made in the bebuilder has no influance on the mobile menu 

note : normally there are no mobile menu so ı have created it 

 please ı need your support  

https://www.hizliresim.com/b7rpdvi

Comments

  • Hi,

    Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.


    Thanks

  • 1) Unfortunately, the header built with Header Builder has no option to show social icons in the side menu.

    2) Did you set up styles in the Sidebar tab of the Menu Burger element?

    Best regards

  • Is there any other option for this.

    Since there was no mobile menu when I installed the theme, I rebuilt it through the builder. If necessary, we can delete the menu and upload it if it has the original version for social icons and language option.

  • You can create a menu for mobile display (Appearance -> Menus), and add to it Language switcher, and menu items with social icons. When you add a custom link put an empty character, because Navigation Label cannot be left empty. You can copy it from here: " ‎".

    Best regards

  • Very good.

    Is it possible to sort the icons side by side?

    https://www.hizliresim.com/asicsp5

  • Please, go to Betheme -> Theme options -> Custom CSS & JS -> CSS, and put there the following CSS code:

    .mfn-header-tmpl-menu-sidebar .mfn-header-menu{
       flex-wrap: wrap!important;
       flex-direction: row!important;
    }
    .socialCustom{
       width: auto!important;
    }
    

    After that, go to Appearance -> Menus, and add socialCustom class to menu items that are socials.

    If you do not see CSS Classes filed, open Screen Options, and enable it there.

    Best regards

  • Hello,

    first of all, thank you so much for your prompt reply and support

    please find what exactly needed in attached image below

    thank you in advance

    https://www.hizliresim.com/birhb32 ( what we want ) we modified it using photoshop

    https://www.hizliresim.com/n5hwsau ( what we dont want )

  • Glad I can help.

    Please, also use the following CSS code:

    .mfn-header-menu .menu-item:not(.socialCustom){
      width: 100%!important;
    }
    

    Thanks

  • edited January 2023

    Mobile menu is ok. But the default and sticky menu are one after the other

  • Mobile menu is ok. But the default and sticky menu need to be Side by side

  • I'm looking for help on the issue.

  • edited January 2023

    Sorry, but you wrote beyond my working time and I was not able to answer you.

    Please replace the previous codes with the following ones:

    @media only screen and (max-width: 1180px){
    .mfn-header-tmpl-menu-sidebar .mfn-header-menu{
      flex-wrap: wrap!important;
      flex-direction: row!important;
    }
    .socialCustom{
      width: auto!important;
    }
    .mfn-header-menu .menu-item:not(.socialCustom){
     width: 100%!important;
    }
    }
    

    Best regards

  • You are great. Problem solved. Thank you. :)

Sign In or Register to comment.