Docs

[sosmond]

I have styled a smaller menu to fit on smaller screen resolutions like landscape Ipad.
http://jeffdillon.involve.media/portfolio/

using font size and letter spacing but I also would like to reduce the navbar top link spacing. Can you help me with that please.

@media (min-width:979px) and (max-width:1120px) {
.x-navbar-static-active .x-navbar .x-nav > li > a, .x-navbar-fixed-top-active .x-navbar .x-nav > li > a {
font-size: 1.3vw!important;
  letter-spacing: 1px;
}
}

[Rupok]

Hi there,

There is no topbar on your given site. Would you clarify a bit that what you are trying to achieve?

Cheers!

[sosmond]

Hi, I was not referring to the topbar rather the navbar. I would like to adjust the “navbar top link spacing” in layout (screenshot) but only for mobile as I did with letter-spacing in my code sample.

[Joao]

Hi There,

You can use margin-top: 0px; inside the same code.

Hope that helps

Joao

[sosmond]

I tried margin-top: 0px; and it did nothing. I want to reduce the space between menu items like in customizer navbar top link spacing.

[Jade]

Hi there,

Please try this:

@media (min-width: 767px) and (max-width: 1080) {
    .x-navbar .desktop .x-nav > li > a {
        padding-left: 15px;
        padding-right: 15px;
    }
}

Hope this helps.

[sosmond]

Thank you, I changed the widths a little but the padding is what I needed.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts