[Scott MSpectator]

Hey guys, please pass on to Christian or Paul.

I was just scrolling your forum for some info about Mobile Menu customization’s. There isn’t really anything all in one place for people to find the common simple mobile menu requests.

Can you please take the time to stack together some of the most common mobile menu css? I’ll list them as numbers below to make it easier for you. Take your time on this one. I feel it will help make things easier for you as well, so you can always refer people to this post. I would also like to have the options for my clients so they don’t get confused.

Thanks for the extra effort on this one! Assuming integrity is the stack btw.

1. Changing the Mobile Menu icon to words (MENU), instead of the three lined box. Options for words inside a box/button and with NO box/button would be nice! Options for font style, font size, and color would be nice!
2. Re-positioning the Mobile Menu icon to the right, left, top, bottom, center, or two in one (bottom center).
3. Changing the size of the Mobile Menu icon (Full-width long and skinny across whole screen, Half-width thick and short, padding etc)
4. Changing the size of logo or site name in mobile view. (so Mobile Menu icon and logo can fit properly on mobile)
5. Changing the height (space) where the Mobile Menu icon and logo sit (Condensing the Header so you can see more body/content on mobile phones when first visiting someones website).

If you have seen some other common requests for colors/borders/features, please add!!!

I think this would be great to nail down in one attempt so people can just copy all the code and paste it into their customizer. As I learn more mobile sites, I will revisit this post and add some more numbers for more advanced css that people may want. It will save everyone lots of time on BOTH ends to have in one place.

This would be a big help. Thanks!

[ChristianModerator]

Hey Scott,

1. Please add the code below in your Appearance > Customize > Custom > Global CSS

/* Change Hamburger Icon to Text */
.x-btn-navbar i:before {
    content: "Menu";
    font-family: sans-serif;
}

/* No Border or Shadow Menu */
.x-btn-navbar, .x-btn-navbar.collapsed {
    box-shadow: none;
}

2. This would be quite involved so I’d recommended you work with a third party developer.

3. Can you give us a visual of what you’re trying to achieve?

4. In the Integrity 1 demo, the logo and the menu fits properly (see attachment). If the menu drops below the logo, you need to shorten the Logo Width in Appearance > Customize > Header. If your logo is too long, you need to use the Stacked header layout.

If you have a specific need, you need to use custom media queries targeting the x-brand class like this example

@media (max-width: 768px) {
  .x-brand {
    width: 50%;
  }
}

Please note that since it involves custom code, issues arising from the use of it or further enhancement falls outside the scope of our support.

5. Here’s a sample code

@media (max-width: 768px) {
  .x-navbar {
    height: 70px;
  }
  .x-brand {
    margin-top: 8px;
  }
  .x-btn-navbar {
    margin-top: 9px;
  }
}

Again, since this involves custom media queries, issues arising from the use of it or further questions is outside the scope of our support.

And, I happened to open this thread first so I’m the one replying here. This was not passed on to me and that is not allowed.

Thanks.

[Scott MSpectator]

@media (max-width: 768px) {
  .x-navbar {
    height: 50px;
  }

Hello Thanks! I’ll reply later with some fixes and lump this all together for everyone!

The code above will make the drop down MOBILE menu background color transparent. The color is supposed to be white. I applied the css code to change it back to white but it doesn’t quite bring it back to the default way. I also deleted all other css to make sure the code above is the culprit.

How else can we shrink the navbar on mobile to avoid this problem?

Thanks Christian!!!

Thanks!

[RadModerator]

Hi there,

That’s the downside of limiting the height. Menus are limited to your allowed height.

The best way is using min-height, but that will not minimize your navbar’s height. Instead of limiting the height, control the spaces around it until you get the 50px height you desired. That way, it will stay 50px but still expanding when the menu is expanded.

Would you mind providing the site’s URL in question?

Thanks!

[Scott MSpectator]

Hmmmmmm not sure what you mean or suggest.

It doesn’t seem to make sense that the color would change because of a height setting. It’s an important setting too, because u don’t want ur navbar taking up a lot of room on a small mobile phone. Every square inch on mobile is super valuable space for business owners. There’s gotta be a way!

No urls yet. Detailed post before this post

Thanks!

[ChristianModerator]

All the code given in #5 is important. .x-navbar, .x-brand, .x-btn-navbar needs to be configured because they all play together. Simply setting the navbar’s height won’t make the logo and mobile button move. .x-navbar-inner also has a min-height in so will want to include that in the media query also. There’s nothing in the code that makes the navbar transparent. You might have a syntax error in your CSS.

Thanks.

[Scott MSpectator]

Hey Christian, thanks but I tried the code below on a different testing site with X to be sure it was the code causing the issue. I deleted all CSS and only added the code below.

@media (max-width: 768px) {
  .x-navbar {
    height: 50px;
  }
  .x-brand {
    margin-top: 8px;
  }
  .x-btn-navbar {
    margin-top: 9px;
  }
}

I played around with your .x-navbar-inner as well. The background still changes to transparent. The integrity stack is set to “light” and the settings are pretty basic with white backgrounds everywhere.

Please help, I spent hours testing on this one!
Thanks!

[JoaoModerator]

Hi There,

I know you don´t like to share your URL so please provide your customizer settings.

You can export by going to the addons sections of your website.

Thanks

[Scott MSpectator]

Sure, I set up a site for future reference and to help us all better respond to issues and communicate on the highest level.

SelbisScars.com

I added the .json file too.

The code above is already added.

Thanks! 🙂

[Scott MSpectator]

Your uploader never accepts my files. ^ Do you have an email? You can see issue on mobile site above.

thanks

[Rue NelModerator]

Hello There,

Thanks for updating in! You must zip the .json file so that it will be accepted in the attachments. Regretfully we do not provide any emails since there are several staff working 24/7. Having the file in the reply attachments will make it accessible and available to the staff investigating the issue.

Thank you for your understanding.

[Scott MSpectator]

k

[Scott MSpectator]

Did it go through? Havnt heard

[ChristianModerator]

Please change

  .x-navbar {
    height: 50px;
  }

to

  .x-navbar-inner {
    min-height: 60px;
  }

Further customizations from here would be getting into custom development. For issues and in depth changes, You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/.

Thanks for understanding.

[Scott MSpectator]

Thanks Christian, that seems to work!

About question #3, I was looking for the code to make the MOBILE navbar button a block (or full-width). I’m sure there’s some useful code that goes with the “navbar block” as well. Any of the best css for that request would be helpful!

Thanks!

[Author]

Posts