About Mobile Menu Social icons

savasan

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

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

savasan

link

https://savasan.com.tr/

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

savasan

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.

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

savasan

Very good.

Is it possible to sort the icons side by side?

https://www.hizliresim.com/asicsp5

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

savasan

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 )

Phil

Glad I can help.

Please, also use the following CSS code:

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

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

savasan

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

savasan

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

savasan

I'm looking for help on the issue.

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

savasan

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