Docs

[Cherylwoodman]

Hi Themeco,

When my site is used on a smaller screen/I change the size of the browser window, my navbar logo and links misalign with each other…

How could I stop this from happening?

This is the link to my site… http://honestyforyourskin.co.uk/

Thanks,

Cheryl

[Thai]

Hi Cheryl,

Could you please provide us with some screenshots?

Thanks.

[Cherylwoodman]

Hi Thai – can you see the issue in this shot?

[Joao]

Hi Cheryl,

This is hapenning because you have a really wide logo.

First of all, I would like to reccomend you something that is not directly related to the issue, but will help your website to look better.

On Appereance > Customizer > Header you have top link spacing to adjust, that is the space between your navbar links and the top, as you can see even on full screen they are not aligned with your logo, go there and add a few pixels in order to align it.

Now coming to your issue, I have a suggestions, My suggestion would be that you use a different logo for smaller screens, that is because your logo inline as it is looks great on desktop and laptop, but on mobile the subtitle is almost impossible to read. So I would reccomend you creating a stacked version of your logo with the sentence under for screens smaller than 1200px wide, where is your navbar is breaking into lines.

So to fix your issue please add the following code to Appereance > Customizer > Custom CSS and add the URL to

@media (max-width : 1200px) {
.x-brand {
      background: url(/wp-content/uploads/Linear-logo.png) no-repeat top left;
      background-size: 100% auto;
      width: 80%;
      min-width: 200px;
      height: 72px;
}
.x-brand img {
display: none;
}
}

Another alternative would be to make your logo smaller on smaller screens under 1200px but the subtitle would be almost unreadable:

You would use this instead:

@media (max-width : 1200px) {
.x-brand img {
width: 300px;
}
}

Hope it helps,

Joao

[Cherylwoodman]

Hi Joao,

Thanks so much for the helpful advice… I’ve just added the stacked logo code, but the alternate logo displays large… is there a way to add the retina ready width of the logo? I’ve attached a screen print of the effect…

Thanks,

Cheryl

[Joao]

Hi Cheryl, use the code below instead,

use max-width do adjust the size, and in case you need use the padding-bottom:100px (or another value) You can also remove if you feel it is unnecessary, I added that because on my installation I need to do this adjustment in order to show the full logo.

@media (max-width : 1200px) {
.x-brand {
      background: url(http://173.193.60.90/~xthemetest/wp-content/uploads/2016/08/grub-logo.png) no-repeat top left;
      background-size: 100% auto;
      width: 80%;
      min-width: 200px;
      height: 72px;
      max-width: 200px;
      padding-bottom: 100px;
}

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

Hope that helps

Joao

[Cherylwoodman]

Thanks Joao… I actually completely removed the padding-bottom code, but the nav bar still looks padded vs. when full screen… I’ve attached a picture…

[Joao]

Hi Cheryl,

In this case use padding-top or margin-top instead.

Not that it is much easier for us to provide you a tailored solution if you leave those changes there 🙂

Hope it helps

Joao

[Cherylwoodman]

Hi Joao…

Sorry I’m not sure I understand… the navbar has the right padding when widescreen, but once it changes the logo to go small screen, it becomes much wider…

Do I use the attributes you mention to set this to 0 or to lower? Is there a setting I have that’s causing the navbar to get deeper when the screen is smaller?

Thanks,

Cheryl

[Rad]

Hi there,

I don’t see the recommended CSS being there, and it’s confusing which padding since your screenshot is different from what I’m getting.

Would you mind providing a mockup screenshot of how it should be? It’s correctly aligned on my end.

Thanks!

[Cherylwoodman]

Hi Rad,

I’d taken the code out as I didn’t want to leave it looking a little muddled…

I’ve added it back in now… can you see the effect? I want the navbar to stay the same depth as when it’s on a wide screen…

Cheryl

[Paul R]

Hi Cheryl,

You can add this under Custom > Edit Global CSS in the Customizer.

.x-btn-navbar.collapsed {
    color: #000;
}

.x-navbar .desktop .x-nav > li > a {
    margin-top: 20px;
}

This is how your site looks on my end.

http://screencast.com/t/omoHCmPwA0Vu

I didn’t see any change in padding. Please provide more clarification on what you are trying to achieve.

Thanks

[Cherylwoodman]

Hi Paul – can you see what I mean in this video? http://screencast.com/t/YZuZpdF4B

It’s when I decrease the width and scroll, the navbar which is fixed, somehow picks up more padding on the small version… I’ve tried to show you this also with my pointer on the video…

Cheryl

[Rupok]

Hi there,

Kindly update the below code (suggested by Joao – #post-1143551) :

@media (max-width : 1200px) {
.x-brand {
      background: url(http://173.193.60.90/~xthemetest/wp-content/uploads/2016/08/grub-logo.png) no-repeat top left;
      background-size: 100% auto;
      width: 80%;
      min-width: 200px;
      height: 55px;
      max-width: 200px;
      padding-bottom: 100px;
}

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

I just changed height: 72px; to height: 55px;

Hope this helps.

[Cherylwoodman]

ahhh… thanks Rupok, that’s awesome! The simple things are the best ‘eh!

[Author]

Posts