[Resolved] Header question

[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

[Tom]

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;
}

[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

[Tom]

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;
}

[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.

[Tom]

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.

[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.

[Bogdan]

Just stumbled upon 🙂 : https://theeventscalendar.com/knowledgebase/

[Tom]

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 8 years, 4 months ago by Tom.

[Bogdan]

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

[Tom]

Just edited the CSS above a little – try now 🙂

[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)

[Tom]

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.

[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.

[Tom]

No problem 🙂

[Author]

Posts