Mobile Superfly menu customizatrions

Support
#1

Hi,

I am creating a new menu for mobile using superfly and have a couple questions.

  1. How can I reduce the font-size of the sub menu items? I’ve tried to use the following code, but it isn’t working:
    .sfm-menu-level-1{
    font-size:12px!important;
    }

  2. I want to add a “Call Icon” to the right of the mobile header (please see picture below). How can I do this?

Thanks so much!

#2

Hey @Brad_B_1,

  1. The CSS should be this
#sfm-sidebar .sfm-menu-level-1 li a {
    font-size: 15px !important
}

  1. This is not possible out of the box and will require custom development so you’ll need to hire a developer.

Thanks.

#3

Thanks for the reply!

Is it possible to add the phone icon to the X menu, and only show that on mobile? Thanks!

#4

Hi There,

So you would like to add a phone icon that when it clicks it call your correct?

You can create a Appereance > Menu > Custom Link

Add for the label : <i class="x-icon x-icon-phone" data-x-icon="" aria-hidden="true"></i>

and as a HREF tel:3333333333

Once you have added, please provide your URL so we can provide you the CSS to hide on other screens but Mobile.

Hope it helps!

#5

Thank You!

It’s added now.

I’d like it to show only on mobile, next to the mobile menu button - like in the image above. Thanks!

#6

Hey There,

The call button is added in the menu and the menu is only visible in desktop. To create a call button for mobile screens, please do the following:
1.) In your child theme’s functions.php file, please insert this custom code:

function add_call_button(){
	echo '<a id="call_button" class="right mam" href="tel:8552022138" style="color: white;"><span><i class="x-icon x-icon-phone" data-x-icon="&#xf095;" aria-hidden="true"></i></span></a>';
}
add_action('x_after_view_global__brand', 'add_call_button');

2.) And in your child theme’s style.css, please add this code:

#call_button {
  display: none;
}

@media(max-width: 979px){
  #call_button {
    display: inline-block !important;
  }
}

3.) You might need to remove the call button you added in your menu link if you do not want to display it in desktop screens.

Hope this helps. Please let us know how it goes.

#7

Amazing! Thank you so much!

How can I make the logo in the mobile header centered at all times?

Thanks again!!

#8

Hello There,

To make the logo centered at all times in smaller screens, please remove this css block first:

/* mobile header height and color*/
@media only screen and (max-width: 736px) {
  .x-navbar-inner {
    min-height: 55px;
    background: #4688d7!important;
  }
}

You will have to replace it with this:

/* mobile header height and color*/
@media only screen and (max-width: 736px) {
  .x-navbar-inner {
    min-height: 55px;
    background: #4688d7!important;
    text-align: center;
  }

  body .x-brand{
      max-width: 200px;
      margin-left: 45px;
  }
}

Hope this helps. Please let us know how it goes.

#9

Thank you.

I implemented the code, however, the logo is still left justified. The code just moved it slightly to the right. I would like it centered in the navbar below 736px. Thanks!

#10

Hi there,

It’s a bit tricky since the logo has float styling, and if we remove that styling, it will then push the phone icon down.

Instead, please change this existing CSS

@media screen and (max-width: 768px){
  .x-btn-navbar{
  display:none!important;
}
  .x-brand{
    width:270px!important;
  }
}

to this

@media screen and (max-width: 768px){
  .x-btn-navbar{
  display:none!important;
}
.x-brand {
    width: 270px!important;
    position: absolute;
    left: calc( 50vw - 165px );
}
}

Thanks!

#11

Amazing! Thank you so much!

#12

You are the most welcome!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.