Docs

[nickharambee]

Hi xTeam,

My standard navbar logo image is 500px wide – with the Integrity stack I have my primary nav menu on the right and for any screen width over 1300px both fit alongside each other nicely. However, at less than 1300px the menu jumps below the logo, which is rather ugly.

I am currently using this javascript to hide the logo when the screen width is less than 1300px…

$(window).resize(function() {
  if ($(this).width() < 1300) {
    $('.x-brand').hide();
  } else {
    $('.x-brand').show();
    }
});

…but I would rather the logo was reduced in size, to fit the available space, or the main logo was replaced with a smaller logo, when the screen width drops below 1300px. I would be glad to hear of possible solutions to this issue.

Thanks,

Nick

[Rupok]

Hi Nick,

Thanks for writing in! You can use media query to reduce the size :

@media only screen and (max-width: 1300px) {
  .x-brand{
    width: 250px;
}
}

If you have any other concern regarding this, you need to provide your URL so that we can have a look.

Cheers!

[Author]

Posts