Stock X Mobile Header - Rebuild in Pro

Hello, i want to create an exact copy of X’s stock header (the mobile functionality), but building it with Pro’s Header builder. Is there a template available that I can import? If not, which navigation element will help me achieve this? (modal/inline/layered/dropdown/collapsed)

Logo on the left, hamburger navigation button on the right. When the button is touched, the dropdown links slide from the top down, and the webpage slides down as well.

Hi Kosta,

Thanks for reaching out.
If you are trying to achieve the same as in the screenshot given below, the Content Area Modal may be the best element to get a similar output.

Thanks

@tristup, this is what i’m trying to achieve for mobile:

and this for desktop (which i have successfully completed):

This is the closest i’m able to get so far. This is using “navigation dropdown”. There doesn’t seem to be settings to make the dropdown fullwidth like how the stock X mobile header looks and behaves (which also slides the page down below the dropdown when the menu button is pressed).

Hey @kostax,

The closest mobile navigation element you can get in Pro is the Navigation Dropdown element which you’re already using, regretfully there is no element that goes fullwidth and slides the page down currently.

You probably can customize the element with Custom CSS. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

@nabeel, it is a shame that the “Pro” header builder can’t replicate what is available in the basic version of X. Please pass this feedback to the developers so they can implement it.

Another option would be to implement “hide during breakpoint” in the basic header builder to allow different desktop and mobile header image logos. View this thread for reference: Display different desktop & mobile logo

Hi Kosta,

I check your website and you already change your mobile menu that slide from right. If you have any other concerns, feel free to reach us.

Thank you.

@marc_a — I have no other choice! :man_facepalming:

Sorry to rant, but Themeco forum support has gone downhill since the Themeco rebranding.

Funny that this thread is now “Unlisted” and my comment was censored. Keep up the great work

Hi Kosta,

We have noted your feedback.

Please also understand that default stack styling and generic designs were made to distinguish them from other stacks. You also need to note that navigation inline and navigation dropdown elements are best to use for desktop screens. The navigation layered, navigation collapse, and navigation modal element is best to use for smaller screens.

Cheers.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.