[Resolved] Making logo bigger than the nav bar in sticky nav

Home Forums Support Making logo bigger than the nav bar in sticky nav

This topic contains 12 replies, has 3 voices, and was last updated by  Leo 6 months, 1 week ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #514552

    Jessica

    First of all thank you for this great theme! It’s my first time using it and am loving the flexibility it gives a non-coder designer like me to build a site from scratch.

    I have a sticky nav bar with a logo top left. I would like my logo to stick out from the nav bar and you will see I’ve pretty much got the desired effect on desktop (eyeswi.de – site is password protected – pw: ninajess).

    It looks great when nav bar is stuck at the top, my problem is when you scroll down the page you still notice the bottom of the logo in the top left. I managed to solve this problem on desktop by shrinking the logo using this:

    .main-navigation.is_stuck .sticky-logo,
    .main-navigation.is_stuck .sticky-logo img {
    height:62px !important;
    margin-bottom:-1px;
    }

    But I can’t seem to work out the selector to target the same thing on mobile. Can you help me with finding this?

    Also, although this works, it’s not entirely the desired effect I had in mind… I would prefer to keep the logo at the same size the whole time, and always protruding from the nav bar but I can’t for the life of me work this out. Is there a way to achieve this for both mobile and desktop?

    Thanks a mil 🙂

    GeneratePress 2.0.2
    #514595

    dasigna

    thats a little tough one!
    tried to figure out a similar thing recently, only with sticking out logo at the top. but bottom seems to be a step further though 🙂

    not finished yet, but first you have to tweak two things:
    – mobile navigation
    – sticky navigation

    imho theres no way to get over this if you simply let the logo stick out beneath (because it simply exeeds the nav-container height amount which is hidden on sticky scroll down). seems you have to fiddle a way to adjust the height of the navigation container and tweak it by using a partly transparent png as nav-background.
    thats the solution ive found so far.
    but of course there might be a better solution only by pure css – in which i might be interested too.

    #514849

    Leo Customer Support

    Hi there,

    Are you looking for this effect here? https://docs.generatepress.com/article/navigation-logo/#float-navigation-logo-outside-container

    If not can you link us to your site or provide the password to unlock it?

    Only admins (myself and Tom) can see the link 🙂

    Let me know.

    #514851

    Jessica

    Hi Leo,
    No I already have this effect. What I’m looking for happens on scroll down. Please do check my URL.
    Thanks 🙂

    #514996

    Leo Customer Support

    I did check but it’s password protected 🙂

    #515068

    Jessica

    Doh. I did mention this in my initial query…
    (eyeswi.de – site is password protected – pw: ninajess).
    Thanks

    #515192

    Leo Customer Support

    Sorry I missed that. Now I’m confused though. So you want the logo to always look like this?
    http://www.screencast.com/t/1kvmAaum9L

    Then removing this extra CSS you’ve added should work:

    .main-navigation.is_stuck .sticky-logo,
    .main-navigation.is_stuck .sticky-logo img {
        height:62px !important;
        margin-bottom:-1px;
    }

    Let me know what I’m missing 🙂

    #515368

    Jessica

    Thanks I have tried that and the CSS in
    https://docs.generatepress.com/article/navigation-logo/#float-navigation-logo-outside-container
    but that doesn’t work.
    My problem is with the logo protruding from stickynav. I guess I can live with the way I have made it on desktop as this whole conversation going round in circles…
    Can you please just tell me the selector to target the logo on mobile, when the stickynav is hidden?
    Thanks,
    Jess

    #515722

    Leo Customer Support

    Try this:
    .mobile-header-navigation:not(.navigation-stick) .mobile-header-logo img

    #516229

    Jessica

    Thanks, but I’m afraid that’s just targeted the logo in it’s default position not when I scroll down… Here’s a screengrab what i’m trying to get rid of…
    mobile screengrab

    #516426

    Leo Customer Support

    What if you change this CSS:

    .mobile-header-navigation .mobile-header-logo img {
        height: 84px !important;
        z-index: 100;
        padding: 0 !important;
        margin-bottom: -24px;
    }

    With this selector?
    .mobile-header-navigation:not(.navigation-stick) .mobile-header-logo img

    #516999

    Jessica

    Thank you

    #517052

    Leo Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.