Customising Topbar

[freedomdesign]

Hi there,

In the topbar of our site at https://www.evergreen-skischool.com/jp/ I have added links to other languages.

I just want to increase the padding at the top a little on desktop, and remove padding on tablet/mobile view.

Thanks in advance for helping me get this right!

[freedomdesign]

Has anyone seen this? Do I need to explain more clearly?

Thanks for your help!

[rad]

Hi @freedomdesign,

Thanks for reaching out, please add this CSS to your global custom CSS.

@media ( min-width: 980px ) {
      .x-topbar-inner > .topbar-text {
          padding: 10px 0px;
        }
    }

 .x-topbar-inner > p:empty {
     display: none;
    }

That should do it

[freedomdesign]

Thanks @Rad, that is almost perfect!

One thing - when it breaks to tablet/mobile there is no margin/padding at the top. How can I add this on this view?

Thanks in advance!

[jade]

Hi there,

To do that, you may remove this block of code outside the 980px media query:

.x-topbar-inner > .topbar-text {
    padding: 10px 0px;
}

Hope this helps.

[freedomdesign]

Hi @Jade,

Sorry, I don’t understand. It looks great, it’s just when it goes to tablet/mobile there is no margin/padding at the top of the topbar.

Are you saying this code:

@media ( min-width: 980px ) {
      .x-topbar-inner > .topbar-text {
          padding: 10px 0px;
        }
    }

Should be changed to

@media ( min-width: 980px ) {
    }

??

[rad]

Hi there,

That’s correct, but based on your initial question

I just want to increase the padding at the top a little on desktop, and remove padding on tablet/mobile view.

You wished to remove padding on tablet/mobile view. If you wish to retain the padding this time, please change this

@media ( min-width: 980px ) {
      .x-topbar-inner > .topbar-text {
          padding: 10px 0px;
        }
    }

 .x-topbar-inner > p:empty {
     display: none;
    }

to this

.x-topbar-inner > .topbar-text {
          padding: 10px 0px;
        }
 .x-topbar-inner > p:empty {
     display: none;
    }

Just like @Jade said, just remove the @media block.

Thanks!

[freedomdesign]

@Rad @Jade

Got it - sorry my question wasn’t clear, and thanks for following up.

This is perfect now - you guys are the best!

Thanks again!!

[thai]

If you need anything else please let us know.