Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

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

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

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

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
    Staff
    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
    Staff
    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
    Staff
    Customer Support

    Sorry I missed that. Now I’m confused though. So you want the logo to always look like this?
    2018-03-08_1804.png

    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
    Staff
    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
    Staff
    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
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.