How To Align Mobile Menu Items To The Right

[freedomdesign]

We have our companies site built using Integrity.

The menu is the default. We are happy with it apart from one thing…how can we make the menu items align to the right when broken to mobile view? We have a big menu so it breaks to hamburger mobile menu quite soon, and it’s awkward for our visitors to navigate…please see the screenshot.

https://www.evergreen-alpineacademy.com

Thanks in advance!

[Prasant]

Hello @freedomdesign,

Thanks for writing in!

It’s not recommended to change the viewport size and the default responsive nature of header and navigation. Quite often it leads to conflicts which in that case we won’t be able to support.

However, you can add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 900px) {
  .x-nav-wrap.mobile {
    width: 50%;
    float: right;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.