indepth

Registered
I have a logo that is longer than it is tall, so I need to do 2 things to make it work on mobile:

First, I need to remove the search and the "what's new" (lightning bolt) icons from the main nav bar; and then I need to widen the space for the logo (so that it uses the full vertical height).

Is it easiest to do this directly in a template? Or is there a setting change I can make in XF to take the extra features off the mobile nav bar?

Thanks!
 
I have a logo that is longer than it is tall, so I need to do 2 things to make it work on mobile:

First, I need to remove the search and the "what's new" (lightning bolt) icons from the main nav bar; and then I need to widen the space for the logo (so that it uses the full vertical height).

Is it easiest to do this directly in a template? Or is there a setting change I can make in XF to take the extra features off the mobile nav bar?

Thanks!

This will be a media query in extra.less:

Code:
@media (max-width:500px)
{
    .p-navgroup.p-discovery { display: none; }
    .XenBase .p-nav-smallLogo { max-width: none; }
    .XenBase .p-nav-smallLogo img { max-height: 45px; }
}

You may need to increase/decrease the 45px max-height of the logo depending on your setup.
 
That worked (thanks!), but is there no way to separate out the nav group for this media size?

I'd like to still have the gravitar, the message, and the alerts icon display. But remove the search and what's new from that menu (to make room for my logo).
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.

Back