Docs

[444media]

For my site located at crowley.444.media I have created a fairly wide main navigation menu. It looks great on my 27″ large display monitor, but when I size it down to what I think it would look like on a smaller, say 15″, laptop screen, instead of the menu just appearing the same, but smaller, it instead, moves the last item on the bar (“Make A Donation”) to the next line, thus making the blue navigation bar much higher/thicker and makes formatting of the menu items look off.

What would be the best way to handle this issue? I really like the way the navigation looks on the wide screen, so I’d rather not make it more narrow and smaller….but if that’s all I can do to make it look good on a smaller screen, then I guess I might have too(?)

Thanks

[donology]

You can use @media queries in your custom CSS.

CSS:

.x-navbar .x-nav-wrap .x-nav > li > a
{
    letter-spacing: 0.06em;
}

@media ( min-width: 1200px )
{
    .x-navbar .x-nav-wrap .x-nav > li > a
    {
        letter-spacing: 0.25em;
    }
}

@media ( min-width: 1380px )
{
    .x-navbar .x-nav-wrap .x-nav > li > a
    {
        letter-spacing: 0.4em;
    }
}

**WARNING** This was tested on the latest version of the Chrome Browser using a Windows PC. You may have to alter it a bit for cross browser compatibility.

[Joao]

Hello

Please add the following code to Appereance > Customizer > Custom > CSS

@media(max-width: 1380px) {
.x-navbar .x-nav-wrap .x-nav > li > a {
    letter-spacing: 2px;
      font-size: 10px !important;
}}

Hope that helps

Joao

[444media]

Thanks Joao! You guys are amazing! So fast…and works perfectly.

Thanks so much for the fast reply and perfect fix….X is the only theme I use now and have recommended it often! Really appreciate you guys for making my job so much easier

[Jade]

You’re most welcome.

We’re always glad to help. 🙂

[Author]

Posts