How to make my static top header unshrinkable?

[ggavz]

Hi guys,

In this website, I am using an Ethos stack with a navbar header positioned as “Static Top” as I want the nabvar to stay on the top of the page as soon as the scrolling reaches that point, but keeping the logo “unshrinkable”.

My goal is to have this behaviour.:
A. Initially, a hero banner on top with the navbar at the bottom of the page (see below)

B. After scrolling up until the navbar reaches the top of the page, I’d like keeping the nabvar static on top allowing it to shrink but making sure the Logo remains as shown below (maintaining its size and top/left margin) while the rest of the page scrolls up “underneath” the nabvar (see below)

1. Is this feasible with the X-Theme Pro version?
2. Will it be responsive enough so the menu is properly displayed in smaller viewports?
3. Can the Hero banner only be applicable on the Homepage?

Thank you in advance for your inputs/ideas.

German
P.S.: I’ll share with you the current mockup in a separate private message

[christian]

Hey German,

What you’re trying to achieve are all possible but to your question:

@ggavz

Will it be responsive enough so the menu is properly displayed in smaller viewports?

This does not happen automatically because users have different preferences and the Pro theme takes that into account. So for the menu, you need to use or add to the container a Navigation Inline element that is setup to show on desktop only and hidden on mobile. Then, in the same container, you need to add a Navigation Collapsed element which is a mobile menu (but some users use this on desktop).

For your overall setup, you will need to learn how to use Pro first. Instructions are available in our Knowledge Base. I recommend you start in this sequence:

1. Header and Footer Builder Introduction
2. First 9 topics of the Content Builder
3. First 3 topics of Elements then you can explore all of the elements to know the features.

If you don’t understand something in the links provided, we’re here to help.

For the logo to display when the bar shrinks, please add this code to your Header CSS.

.x-bar .ps-container {
    overflow: visible !important;
}
.x-bar-fixed .hm11.x-image {
    margin-top: 55px
}

For a more solid solution, change .hm11 in the code with your own class because hm11 is a dynamic identifier and might change when you do some changes in your bar. You can do that by assigning a class to your image so instead of .hm11.x-image, it would be .my-class.x-image. Do the same with .x-bar. It should be .my-bar-class.x-bar.

Thanks.

[ggavz]

Thank you for your inputs.

I applied the suggested configurations for the header menu responsiveness:

1. Created a Navigation Collapsed element, visible only on mobile devices
2. Updated the existing Navigation Inline so that it can be visible only on the desktop viewports

A few questions:
a) I created two headers; one for the homepage (Sticky) and the other for the internal pages (Internal Pages Sticky). The goal was to have the Hero section only available on the homepage. Do you agree with this approach?

b) The logo behaviour is working as expected on the homepage, this is great! But not so in the internal pages (thoughts???)

c) I also tried creating a particular class for the image container and for the corresponding bar container. The one for the image container did work Ok, but the one for the bar container didn’t work as I expected. I created a class name “bvtc-nav-bar” for that bar. How should I reference it properly? Does it rename it automatically for the other similar equivalents?(e.g., x-bar-fixed is renamed as bvtc-nav-bar-fixed )

d) Last but not least, do you have any documentation about how to create a Megamenu in the footer?

Thank you very much again for your excellent support.

Please advise.

Best regards,
German

[christopher]

Hi there,

1. Yep, that is a correct approach.
2. I don’t see the problem, you need to be more detailed on what is the problem so that we can suggest you the correct solution. I just see that in the header of your inner page you have a toggle which is available on the desktop and that is preventing the Inline Navigation to work correctly:
   
3. No, the custom classes are not renamed for the fixed version. You need the Google Chrome Developer Toolbar to check and see which element gets the class so that you can decide how you want to set your CSS selector for additional styling:
   https://www.youtube.com/watch?v=wcFnnxfA70g
   https://youtu.be/kp4rDDX_q5s
4. We do not have such a functionality for the Footer out of the box. But you can consider using the UberMenu for that purpose.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.