Docs

[giveitlegs]

Hi all!

URL: http://gofitfarm2.wpengine.com

(specifically viewing it on iPad or tablet in landscape mode)

the top navigation menu items break onto another line, so not sure if top menu needs to be allowed to be wider for iPad landscape, or if the menu items width between each one can be shrunk a little to accomodate, if that makes any sense.

screenshot attached… thnx!

[Paul R]

Hi,

Thanks for writing in!

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 1045px) {
.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    width: 170px;
    margin-top: 55px !important;
    height: auto;
}

.x-navbar .desktop .x-nav > li > a {
    font-size: 14px;
}
}

Hope that helps

[giveitlegs]

Thanks so much! It’s almost there,… now it does not break across a new line (which is great!), but it seems to be pushed down a lot from the top for some reason, both on the normal menu, and the sticky (shrunken version of it) when I’m scrolling down and the sticky menu is active…

See screenshots,… any thoughts?

[Nabeel A]

Hi again,

Please add this code in your Customizer:

.x-navbar .desktop .x-nav > li > a {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}
@media (max-width: 1045px) {
.x-navbar .desktop .x-nav > li.logo-menu-item > a {
    margin-top: 24px !important;
}
}
body header .x-navbar-wrap .x-navbar.x-navbar-fixed-top .logo-menu-item a {
    margin-top: 0 !important;
}

Let us know how this goes!

[giveitlegs]

Oh! almost there! It’s doing well, it’s just that it keeps the logo HUGE in the sticky header now… see screenshot.

Anyway to allow it to shrink the way it was doing before?

[Lely]

Hi There,

When I check your site, the logo is bigger by default and then shrink as you scroll. Just to clarify you want the default logo to adjust? If yes, please look for this custom CSS:

@media (min-width: 900px) {
    .x-logobar {
       display: none !important;
       visibility: hidden !important;
    }
    .x-navbar .desktop .x-nav > li.logo-menu-item > a {
        text-indent: -99999px;
        text-align: left;
        width: 200px;
        height: 245px;
        background: url('http://gofitfarm3.wpengine.com/wp-content/uploads/2016/08/Fit-Farm-Fat-Camp-Hero-Logo-Color-375x300.png') no-repeat center center;
        background-size: contain;
    }
}

Please adjust the following lines:

        width: 200px;
        height: 245px;

Hope this helps.

[giveitlegs]

Yes, I do want it (the logo) to shrink just a little bit as I scroll for tablet (which it already does on desktop/laptop viewports – for mobile it does not turn into a sticky header, which is by design). the above edit only shrinks the logo in its default state.

any way to make it just shrink a little for tablet in landscape orientation only? If not, it’s cool, it’s still 95% better than it was! thnx

[Nabeel A]

Hi again,

Find this code:

.x-navbar .desktop .x-nav > li > a {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

And replace it with:

.x-navbar .desktop .x-nav > li > a {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

To shrink it further just decrease the top and bottom padding. Hope this helps!

[Author]

Posts