[Resolved] Floating logo and floating sticky logo

Home Forums Support [Resolved] Floating logo and floating sticky logo

Home Forums Support Floating logo and floating sticky logo

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1586387
    Harris

    Hello,

    HOw can i achieve floating logo (outside header) and also the sticky header logo floating.
    I tried some examples I found in the documentation with no sucess.

    .main-navigation .site-logo.navigation-logo {
        position: absolute;
        left: 0;
        top: 0;
    }
    .main-navigation .site-logo.navigation-logo img {
        height: auto; /* Set the image height of logo in px */
    }

    I also tried the way I had handeled it in another site, but its not working either for some reason

    /* Set navigation logo to be absolute so itโ€™s not confined to the container */
    .main-navigation .sticky-logo {
        position: absolute;
        left: 0;
        top: 0;
        height: 60px;
    }
    
        
    /* Set the height of the image to auto (or whatever else)  */
    .main-navigation .sticky-logo img {
        height: auto;
        padding: 0;
        margin: 0;
        z-index: 100;
    }
    #1586648
    Leo
    Staff
    Customer Support

    Hi there,

    Can you try activating this option first?
    https://docs.generatepress.com/article/navigation-as-a-header/

    Then that CSS should work.

    Let me know ๐Ÿ™‚

    #1586735
    Harris

    Edit: Found it. It’s in the bottom. Blind! ๐Ÿ™‚

    Hello,

    For some reason this option does not exist
    https://i.gyazo.com/115deab39027b7f0f45cf1742d60777b.png

    #1586748
    Harris

    Still doesn’t seem to be working though….

    #1586760
    Harris

    And another thing. Why the navigation height does not shrink when turning to sticky?

    Primary navigation menu item height is set to 90 and sticky nav menu item height is set to 65

    #1586976
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site where i can see the issue?

    #1587248
    Harris

    Sure. I had shared one in the initial post (private info).
    I am adding it here too

    #1587457
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The shrinking issue is a bug in 1.12 – it’s fixed in 1.13 which will be released in January.

    For now, this CSS should help for both things:

    .navigation-stick .site-logo {
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .main-navigation.sticky-navigation-transition .site-logo img {
        height: auto;
    }
    
    .main-navigation.sticky-navigation-transition .menu-bar-item > a {
        line-height: 65px;
    }
    #1587533
    Harris

    Thanks Tom!
    Should I remove this CSS in the next release?

    #1587614
    Leo
    Staff
    Customer Support

    You can remove this block of CSS only in the next release:

    .main-navigation.sticky-navigation-transition .menu-bar-item > a {
        line-height: 65px;
    }
    #1587795
    Harris

    Great, thanks!

    One last thing.
    The logo height I define in the css (instead of the “Auto” provided) makes the logo too big in the mobile sticky view.
    Is there some way to resize it just in the mobile and sticky view?

    Thanks

    #1588405
    Tom
    Lead Developer
    Lead Developer

    Absolutely, you can do this:

    @media (max-width: 768px) {
        .main-navigation.sticky-navigation-transition .site-logo img {
            height: 50px;
        }
    }
    #1588726
    Harris

    Thanks!

    #1589728
    Tom
    Lead Developer
    Lead Developer
    #1590323
    Harris

    Hello,

    The css provided resizes the logo in the Mobile sticky header but not in the normal mobile header.
    I used this in order to achieve that.

    Is that right or is there any better way to do it?

    @media (max-width: 768px) {
    	
    	#mobile-header .inside-navigation .mobile-header-logo a img{
    		height:70px !important;
    	}
    	.main-navigation.sticky-navigation-transition .site-logo img {
        height: 70px;
    }
    	
    }

    Thanks

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