[Support request] Fixed Header like truelook.com

Home Forums Support Fixed Header like truelook.com

  • This topic has 25 replies, 3 voices, and was last updated 1 month ago by David.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1415685
    wo

    I think I read everything here and still don’t get it: how to achieve a navi / top bar like truelook.com ?

    I managed to style the basics, Logo left, Navi right and the Top Bar appearing / disappearing.

    Customizer > Layout > Sticky Navigation is OFF.

    Added to my Simple CSS

    .site-header {
         position: fixed;
         width: 100%;
    }
    

    Now the header is displayed max left and ignores the top-bar. Íf the top-bar is present, the header should be below, else the header should be top: 0;

    What’s missing?

    Thanks in advance!

    #1415721
    wo

    Now, the header is centered again.

    .site-header {
        position: fixed;
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
    }
    #1415813
    David
    Staff
    Customer Support

    Hi there,

    did that resolve the issue ? Let me know

    #1415838
    wo

    Hi David,

    not yet there. The header is still totally fixed below the top bar area. No matter if we have a topbar or not, when the page has scrolled.

    When the page is scrolled, the top bar disappears, as supposed, but the page content is now visible above the fixed header.

    Like said, I try to achieve exactly the behaviour like truelook.com, where the header is fixed, relative to the topbar.

    #1415851
    David
    Staff
    Customer Support

    The best solution would be to enable the Navigation as Header option in Customizer > Layout > Header.
    Then enable the Customizer > Layout > Sticky Navigation.

    If needed we can assist with some CSS to increase the logo size.

    #1415864
    wo

    Ok. Done. Been there, several times 🙂

    Result: the header is moving again, according to the topbar. Beside, it’s just one line high, minimizing the logo to the menu item height.

    #1415865
    wo

    “Sticky Navigation” does not work, in this context.

    Truelook.com uses

    @media(max-width:991px) {
    	.site-header {
    		position: fixed;
    		width: 100%;
    		height: 54px;
    		border-bottom: 1px solid #eee;
    	}
    

    I think, that’s the direction (?)

    #1415866
    David
    Staff
    Customer Support

    Now go to Customizer > Layout > Primary Navigation and set the Inner Navigation Width to Contained.
    Increasing the menu item height in the same settings will also increase the size of the logo.
    But if you want to set the logo height independently then add this CSS:

    .navigation-branding img, 
    .site-logo.mobile-header-logo img,
    .main-navigation.sticky-navigation-transition .navigation-branding img {
        height: 100px !important;
    }
    #1415868
    wo

    Thanks. Now the main problem is still the same, unfortunately: Nothing is sticky.

    Both, top and navi bar disappear, when page is scrolled.

    #1415877
    David
    Staff
    Customer Support

    I have updated the CSS here – to include the Sticky logo:

    https://generatepress.com/forums/topic/fixed-header-like-truelook-com/#post-1415866

    The sticky is working for me. But you have the Hide on Scroll down checked:

    https://docs.generatepress.com/article/sticky-navigation/

    #1415895
    wo

    Ok thanks. Indeed. Hide on Scroll Down was checked. My fault. Sorry.

    Now, the header is shrinking again, on scroll.

    I don’t want it to shrink. When the topbar disappears, on scroll, the logo / navi bar should move to the top. No shrink, no transition.

    I mean, exactly like truelook.com 🙂

    #1415904
    David
    Staff
    Customer Support

    I updated the CSS here:

    https://generatepress.com/forums/topic/fixed-header-like-truelook-com/#post-1415866

    Make that change and you can also remove the CSS you added for the fixed site-header

    #1415920
    wo

    David, thank you so much. Yes, the updated CSS works like a charm!

    Had to rethink, what you mean by “update”, before I got it, finally 🙂

    #1415923
    David
    Staff
    Customer Support

    Glad to hear that 🙂

    #1416027
    wo

    I forgot the mobile version.

    Do you have a quick tip as well, how I get close to truelook.com, showing just the logo on the left and a hamburger on the right?

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