Docs

[kprzita]

Hi,

http://www.thefoothub.com.au

the logo is inline with the menu on the desktop version, as soon as I goto tablet on landscape the logo sits on top of the menu.

How can I make the logo reactive and always aligns correctly?

[kprzita]

or when it goes to landscape on tablet can we change the logo to display another logo such as the circle without the text so it fits?

[Joao]

Hi There,

There is a few things we can do to adjust this.

First of all, is to go to Appereance Customizer Header and adjust your link spacing to a smaller number, font-size, font-space. You can make it smaller until the point

Also we can add the following code to Appereance Customizer Custom CSS to adjust the link spacing below 1250px.

@media screen and (max-width: 1250px) {
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-right: 5px;
    padding-left: 5px;
}
}

Hope that helps,

Joao

[kprzita]

is it possible to do a logo swap on the smaller screen? none of the changes have fixed it 🙁

[Christian]

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[kprzita]

I managed to do it 🙂 it was on one of your other threads..

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{

a.x-brand.img img {
display:none;
}

a.x-brand.img {
display:block;
background:url(‘http://thefoothub.com.au/wp-content/uploads/2016/06/TheFootHub-Favicon50x50.png’) top left no-repeat;
width:50px;
height:50px;
}

this shows a logo singular on landscape ipad and portrait.

[Christian]

Glad you’ve found a solution.

[Author]

Posts