[Resolved] Header question

Home Forums Support [Resolved] Header question

Home Forums Support Header question

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #189945
    Dave

    Hi Tom,
    is there a way to completely get rid of the header and make the sticky menu behave as the one on this site does: https://www.mainstreet.com/article/bottled-water-quality-murky-study-finds ?

    Thanks,
    Dave

    #189953
    Tom
    Lead Developer
    Lead Developer

    Why not just set your navigation position to float right (Customize > Layout) and then set the sticky menu?

    That should achieve something very similar to that site.

    Otherwise you can set the sticky menu with a menu logo to display in the regular and sticky menu, and hide the header like this:

    .site-header {
        display: none;
    }
    #189961
    Dave

    Thanks Tom – the latter is great.

    Another question on this: on a couple of my sites the menu resizes to accommodate the size of my logo, but when I tried it on this site, the logo makes itself smaller to fit into the nav bar (which I don’t want to happen)

    What should I be looking at to fix that?

    Thanks
    Dave

    #190116
    Tom
    Lead Developer
    Lead Developer

    Hi Dave,

    The logo should always resize to fit your navigation.

    You can:

    a) Increase the height of your navigation in “Customize > Element Spacing”.
    b) Increase the height of your logo with some CSS:

    .main-navigation .sticky-logo, 
    .main-navigation .sticky-logo img {
        height: 40px;
    }
    #190477
    Bogdan

    I did setup a test site at http://www.susala.ro/gp-test, with your above suggestions, and seems to mimic OP’s website behaviour. I did tweaked colours, loaded a logo in Site Identity, then a logo in Menu Plus > Sticky, and Sticky Menu Effect to None, Menu Logo Position to Sticky Only.

    However, do you think it’s possible to achieve a smooth transition of (elements) of the menu, like in http://www.simonatache.ro? Also, possibility to tweak main logo dimension and Header height independently (like in the example).

    Thanks in advance.

    #190500
    Tom
    Lead Developer
    Lead Developer

    You’ll want to set it up so the site header is hidden (.site-header {display:none;}).

    Then add a menu logo to the regular menu (Customize > Menu Plus > Sticky Menu).

    Set the sticky menu effect to none.

    Then set a taller than usual menu item in “Customize > Element Spacing”.

    Once that’s done let me know and I’ll see if I can come up with the transition into the smaller sticky menu.

    #190542
    Bogdan

    First, thanks for helping us out with this, it’s a nice effect which may help others, too.

    So:

    You’ll want to set it up so the site header is hidden

    Done. However, with Layout > Navigation Position: Float Left (as mentioned by you at the beginning of this thread), the Menu dissapears. So I changed that to Above Header, aligned Right, and thus the menu is visible.

    Then add a menu logo to the regular menu (Customize > Menu Plus > Sticky Menu)

    Did: the logo item to be active in regular, but not Sticky, by setting Menu Logo Position: Sticky. Is that correct? Because for normal position there is no logo visible (obviously).

    Set the sticky menu effect to none.

    Done

    Then set a taller than usual menu item in “Customize > Element Spacing”.

    I set Element Spacing > Primary Menu Elements > Height: 150

    So, that’s the status online at http://www.susala.ro/gp-test. Waiting for your input, and thanks again.

    #190563
    Bogdan
    #190621
    Tom
    Lead Developer
    Lead Developer

    Set the menu logo position to “Sticky + Regular”.

    Then try this:

    .main-navigation.is_stuck .main-nav ul li a, 
    .main-navigation.is_stuck .menu-toggle, 
    .main-navigation.is_stuck .mobile-bar-items a {
    	line-height: 60px;
    }
    
    .main-navigation.is_stuck .sticky-logo, 
    .main-navigation.is_stuck .sticky-logo img {
        height: 40px;
    }
    • This reply was modified 5 years, 4 months ago by Tom.
    #190628
    Bogdan

    Done. See online result. Is it because I couldn’t find anywhere .is_stuck class?

    #190630
    Tom
    Lead Developer
    Lead Developer

    Just edited the CSS above a little – try now 🙂

    #190631
    Bogdan

    Ok, now works. And I found is_stuck class, too 🙂

    On another hand, isn’t this the same result I’ve done initially? I mean, without hiding header etc.

    How can we allow the logo to hang down it’s container?

    Also, how can we hide / animate elements from Regular > Sticky? Sorry to bother you with this effect, but I think it can be a nice effect added to Menu Plus Add-on 🙂 (especially after seeing the transitions in theeventscalendar page, where maybe we can animate elements from Header)

    #190677
    Tom
    Lead Developer
    Lead Developer

    It’s the same, but with the shrinking effect which is what I thought you were going for?

    You can target elements in the sticky menu with the .is_stuck class to hide or show them.

    #190847
    Bogdan

    I think shrinking was before, too, but, anyways, thanks alot. I’ll test further and I will try to mimic the hiding/transitions in the examples, and get back here.

    #190899
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.