Site logo

Archived topic

Fixed Header Custom Elements

12 replies · Started by Yulia on January 7, 2019

Viewing posts 1–13 of 13

Hi, is it possible to make a fixed header in this style: https://www.musclenet.io
When you scroll, initial header disappears and instead appears a totally custom fixed header with a small version of the logo and the button.
Thanks, GP rocks.

Hi there,

a simple way would be to swap the Primary Nav for the Secondary Nav on the static menu. Then set up your Primary Navigation with nav logo and custom button which we can be used for the Sticky Nav. Then its just a case of hiding the Primary Nav on static desktop with some CSS.

The step with the secondary menu I got. But the primary - you mean the button and the logo will be the part of the primary menu? But I need a small variant of logo in the fixed menu and the full as normal and how should I locate the primary menu then? Will that look like now?
Or you mean to add a small logo too? If I can add that into menu (I think I saw the logo option somewhere, but as for the button - just a class "button"?), then yes, I got it, will try
Oh, I have read it again, so now it's clear. It's like hidden primary menu. All the same elements, just one more hidden. It only can influence on SEO - with only 2 links - no, but if it's like another menu, then yes, right?

Trying to make it, but if there's no way to add the button and the logo into the secondary menu - then it won't work, couse when I set it float:right like the primary menu - it floats on top of the header, so basically it's not a part of the header as the primary menu

Question: what will you have in the Sticky nav is it just the logo and the same button you have in the static nav?

Yes, this time yes, but as I wish this solution on other sites, would be really nice the universal solution. I've found the button in the menu (I think float:right will work) and the logo as the hook (please correct me if I'm wrong), so this website I think I will manage (though may need some help). But for the future, imagine like hiding links on that fixing menu - what if those are duplicated links? Like the logo - just couse of the size changing you must create a whole new huge elements. Wouldn't it be a bit more logical to have ability to substitute the thing and locate needed elements just instead?

Theres quite a few options but do require some CSS or using a hook.
For your current Site, you can set a Navigation Logo and set it to Sticky only and we can apply some CSS to hide the menu ( apart from the button ). If you want to set that up we can give you the CSS

Yes, of course, please.

When I turn on the logo on the primary menu and set the sticky menu, then menu goes top and logo doesn't appear. Only in the Customization window - on the real site no

So its correct on the front end?

If you help me to make it correct - then yes. Now the logo doesn't shrink, the line of the fixed header should be black and now it's all transparent, the button is huge and I can't make it smaller and the menu also doesn't disappear in the fixed menu.
Thanks.

So basically I feel like adding the css to the fixed header part, right? Or I'm supposed to make it myself? Let me know please, I will be trying then, though feel slightly terrifying of those animations

Hi there,

Does something like this get you closer?:

#sticky-navigation {
    background: #000;
}

#sticky-navigation li a {
    line-height: 70px;
}

#sticky-navigation .site-logo {
    height: 70px;
}

#sticky-navigation .site-logo img {
    height: 140px !important;
    width: auto;
    background: #000;
}

#sticky-navigation .menu-item.button {
    padding-top: 0;
    padding-bottom: 0;
}

Let me know :)

This archived topic is closed to new replies.