Mobile menu probs

Support
#1

hello

  1. The hamburger menu is to centered vertically in my mobile menu. How can i fix that?

  2. how do i get rid of the arrow in the menu on mobile for drop down items?

  3. How can i make the text bigger on mobile?

  4. Instead of having the phone in the menu how can i put it next to the hamburger menu part?

  5. Lastly, how can i make the mobile cover the whole screen of a phone when opened?

Thank you

#2

Hello There,

Thanks for writing in!

1.) To center the hamburger menu like this:

Please add the following css code in your X > Theme Options > custom css section

@media(max-width: 979px){
  .masthead-inline {
    text-align: center;
  }

  .masthead-inline .x-btn-navbar {
    float: none;
    display: inline-block;
    width: auto;
    margin-left: -108px;
  }
}

2.) If you want to get rid of the arrow in the menu, how can your users find out that there is a submenu?

3.) To make the font size of your mobile menu a little bigger, please use this code:

.x-navbar .mobile .x-nav li>a {
    font-size: 18px;
}

4.) You cannot relocate the phone in your menu because it is part of your menu and as a menu item. You will need custom modifications to the header if you want to insert a phone icon next to the hamburger icon. Regretfully this request is outside the scope of our support. We only cater getting your site set up, bug fixes and minor cosmetic changes.

5.) If you want to cover the whole screen when opening the mobile menu, you need to adjust the minimum height of the menu. You may use this code to do that:

.x-nav-wrap.mobile {
    min-height: 100vh;
}

Hope this helps.

#3

for 1. I dont want the hamburger menu centered horizontal but vertically it seems off center like up and down.

  1. yes i want to get rid of the arrows please

thanks for the help

#4

Hello There,

To adjust your hamburger icon, please go to X > Theme Options > Headers > Mobile Button.

And to remove the arrows, please make use of this code:

.x-navbar .mobile .x-nav li>a .x-sub-toggle {
    display: none;
}

We would loved to know if this has work for you. Thank you.

#5

I made the Themed maps a linked page with a # so it is not clickable. Themed maps has several pages in the menu that are sub items of themed maps.

It works on desktop but on mobile when i click themed maps the sub menu does not show.

#6

Hello There,

The Themed Maps menu item and other menu items with a submenu will only display the submenu if you collapse it. The only way to collapse or display the submenu is to click on the arrow down which you have hidden away. Now that it is hidden, there is no way you can collapse or display the submenus on mobile.

I would recommend that you remove the css code I gave you in my previous response instead.

#7

Okay. Is there a way to have one drop down arrow instead of those three stacked?

#8

Hi,

To change it to one dropdown arrow, you can add the code below in Theme Options > CSS

.x-navbar .mobile .x-nav li>a .x-sub-toggle .x-icon-angle-double-down:before, 
.x-navbar .mobile .x-nav li>a .x-sub-toggle .x-icon-angle-double-down:before {
   content: "\f107" !important;
}

Hope that helps

#9

that helped. but is there any way to get the arrow right next to the word? It is appearing on the far right side.

#10

Hello Justin,

Do you want to display like this?

If that is the case, please add this code as well:

.x-navbar .mobile .x-nav li>a .x-sub-toggle {
    position: relative;
    left: auto;
    bottom: auto;
    top: auto;
    right: auto;
    display: inline-block;
}

.x-navbar .mobile .x-nav li>a .x-sub-toggle>span {
    margin-top: -15px;
}

We would loved to know if this has work for you. Thank you.

#11

yes thats what i was looking for thanks!!

#12

Glad we were able to help :slight_smile:

#13

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