[Resolved] Issue with navigation logo

Home Forums Support Issue with navigation logo

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #939675
    Nimie

    I am trying to recreate the nav logo that is on the link. The settings are different now after update and I am not having any luck. I have set it to use navigation as header but the logo is not floating off the menu.I have also included the link to the new site.

    #939855
    Leo
    Staff
    Customer Support

    Hi there,

    Give this CSS a shot:

    .site-logo {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
    }
    .navigation-branding img {
        height: 100px;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #939893
    Nimie

    Perfect thanks!

    #939895
    Leo
    Staff
    Customer Support
    #939933
    Nimie

    Is there a way to keep it from shrinking down so small? In the example site the logo remains larger and floats off the nav bar.

    #939938
    Leo
    Staff
    Customer Support

    Do you have a sticky navigation logo uploaded?

    If it’s the same as the static logo, can you remove that first?

    Let me know šŸ™‚

    #939939
    Nimie

    I removed the sticky nav logo

    #939943
    Leo
    Staff
    Customer Support

    Add this CSS as well:

    @media (max-width: 1024px) and (min-width: 769px), (min-width: 1025px) {
        .main-navigation.sticky-navigation-transition .site-logo img,
        .main-navigation.sticky-navigation-transition .navigation-branding img {
            height: 200px;
        }
    }
    #939948
    Nimie

    That didn’t do it. Now the logo is small until you scroll and then it grows.

    #939954
    Nimie

    Wait It is working just not with the editor open. Then it has the opposite features. Bizarre, but thanks for the quick turn around. How do we adjust for tablet and mobile view?

    #939964
    Nimie

    I was able to resize for tablet and mobile but am not able to add left padding.

    #939973
    Leo
    Staff
    Customer Support

    Tablet breakpoint is @media (max-width: 1024px) and (min-width: 769px) so you can do this:

    @media (max-width: 1024px) and (min-width: 769px) {
        .main-navigation.sticky-navigation-transition .site-logo img, .main-navigation.sticky-navigation-transition .navigation-branding img {
            padding-left: 10px;
        }
    }
    #939992
    Nimie

    Now nothing is working correctly. Here is what I have
    .site-logo {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    }
    .navigation-branding img {
    height: 200px;
    }

    @media
    (max-width: 1024px) and (min-width: 769px), (min-width: 1025px) {
    .main-navigation.sticky-navigation-transition .site-logo img,
    .main-navigation.sticky-navigation-transition .navigation-branding img {
    height: 200px;
    }
    }
    @media (max-width: 1024px) and (min-width: 769px) {
    .main-navigation.sticky-navigation-transition .site-logo img, .main-navigation.sticky-navigation-transition .navigation-branding img {
    padding-left: 10px;
    }
    }
    }

    #939994
    Nimie

    If I use this it works great for mobile but the desktop logo no longer works.


    @media
    (max-width: 1024px) and (min-width: 769px), (min-width: 1025px) {
    .site-logo {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    }
    .navigation-branding img {
    height: 200px;
    }
    .main-navigation.sticky-navigation-transition .site-logo img,
    .main-navigation.sticky-navigation-transition .navigation-branding img {
    height: 100px;
    }
    }

    @media
    (max-width: 769px){.site-logo
    {position: absolute;
    padding-left: 10;
    top: 0;
    z-index: 999;
    }
    .navigation-branding img {
    height: 100px;
    padding-left: 10px;
    }

    @media
    (max-width: 769px) {
    .main-navigation.sticky-navigation-transition .site-logo img,
    .main-navigation.sticky-navigation-transition .navigation-branding img {
    height: 70px; padding-left: 10px;
    }
    }
    }
    }

    #939996
    Leo
    Staff
    Customer Support

    Iā€™m a bit confused what the desired outcome is.

    Do you want the logo to resize in sticky navigation?

    Is the padding only required on tablet? Is it for moving the logo to the right?

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.