[Resolved] “Float Navigation Logo Outside Container” in main-nav but not in sticky-nav

Home Forums Support [Resolved] “Float Navigation Logo Outside Container” in main-nav but not in sticky-nav

Home Forums Support “Float Navigation Logo Outside Container” in main-nav but not in sticky-nav

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2314827
    Matthias

    Team Generatepress / Generateblocks,

    First big thanks for your great work and terrific support.

    “Float Navigation Logo Outside Container” work in main – navigation, but the logo shrinks way too much in the sticky navigation, changing the “Menu Item Height” doesn’t help with the logo size.
    I did try multiple css codes with no success. Is there a way to have the logo in sticky navigation fixed and not floating?

    My CSS:
    .navigation-branding img {
    position: absolute;
    height: 120px;
    top: 5px;
    z-index: 10;
    }

    #2314833
    Ying
    Staff
    Customer Support

    Hi Matthias,

    Try change your CSS to:

    .inside-navigation img {
        position: absolute;
        height: 120px !important;
        top: 5px;
        z-index: 10;
    }
    #2314844
    Matthias

    Thanks Ying,

    This is great.
    Another option is it possible to not floating the logo outside the container in the sticky navigation just floating the logo in main navigation.

    #2314866
    Ying
    Staff
    Customer Support

    Hum…I’m not sure I understand what you are trying to achieve..

    Can you show me a mockup?

    Let me know!

    #2314919
    Matthias

    Thanks Ying

    Link to a quick mockup in the private information (don’t know how to post it here)

    #2314943
    Leo
    Staff
    Customer Support

    Can you try this CSS?

    .main-navigation:not(.navigation-stick) .navigation-branding img {
        position: absolute;
        height: 120px;
        top: 5px;
        z-index: 10;
    }
    #2314952
    Matthias

    Thanks Leo,
    I will test it later

    #2314963
    Leo
    Staff
    Customer Support

    Sounds good.

    #2315024
    Matthias

    Thanks Leo,
    But the logo shrinks way too small like it did before Yings CSS change.
    See images uploaded.

    #2315048
    Leo
    Staff
    Customer Support

    So what is the ideal solution you are after?

    Perhaps you can try increasing the sticky navigation menu item height?
    https://docs.generatepress.com/article/sticky-navigation/#menu-item-height

    #2315145
    Matthias

    Thanks Leo,

    No, increasing the menu item height doesn’t work, the logo is still too small, compared to the logo when used in sticky menu without “Float Navigation Logo Outside Container”.

    Ying’s recommended CSS changes works fine for now.

    See link in “Private information” for an ideal solution.

    #2315159
    Fernando
    Customer Support

    Hi Matthias,

    You can try something like this instead:

    .main-navigation:not(.navigation-stick) .navigation-branding img {
        position: absolute;
        height: 120px;
        top: 5px;
        z-index: 10;
    }
    
    .main-navigation.navigation-stick .navigation-branding img {
        height: 60px;
        padding: 0;
    }
    #2315166
    Matthias

    Fernando,

    Thank you, perfect looks great on desktop.

    #2315176
    Fernando
    Customer Support

    You’re welcome Matthias!

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