Docs

[jondanks31]

Hey everyone!

New guy to X here… So far, so awesome!

I want to build by site with a header similar to the header on this site: SideTrade You may have to wait a few seconds as the video background doesn’t show the header very well.

For all those who don’t like following external links on the internet, basically, the header only takes up half the page, so the left, where the logo is, is transparent with the video playing in the background, and on the right, is the main header with the menu buttons, etc.

However, I would like the menu on the left and the logo on the right.

Is this possible with X? I don’t mind adding custom code but I don’t know where to begin!

Thanks!
Jon

[Nabeel A]

Hi Jon,

Thanks for writing in! You can create similar type of header with X theme. First activate the Revolution Slider Below Masthead, In Optional Background Video field include your video URL. Use a transparent header with a customized header background (see attached) For additional top links you can use a topbar and add your content in topbar content.

Hope this helps.

[jondanks31]

Hi Nabeel,

That helps, thanks! But would you mind explaining a few things?

A) How do I make the header transparent? Is that a built – in solution within X? Or is it a custom CSS job?

B) Following point A, how do I add a customised header background? Also, what do you mean by top links?

I’m very sorry for the questions, X is huge and is taking a while to get used to everything and being able to locate the things I’m after is proving a challenge considering I’m trying to run before I can walk!

Thanks!
Jon

[Rue Nel]

Hello John,

Thanks for updating in! By default you can change the background color of the header in the customizer. If you are using Integrity stack, you can simply enable the navbar transparency in the customizer. Please go to Appearance > Customize > Integrity > Navbar Transparency. With the given example url, you will need a JS script that will resize the logo as you scroll down the page. Perhaps this threads could help you; https://community.theme.co/forums/topic/logo-resize-on-scroll-down/

If you want to change the background color of the header as you scroll, please check out this thread: https://community.theme.co/forums/topic/transparent-to-solid-header-when-scrolling-question/

Hope this helps.

[jondanks31]

Hi Rue,

Thanks for that! Very helpful!

The previous themes I’ve used always called the Navbar the “header” so I was looking for “header transparency”! That’s where I was going wrong.

As a way of increasing my productivity, is there any Themeco recommended tutorials for X? There are loads around I know, but It’s time-consuming sifting through them all finding a decent one.

Anyway, great theme and I can’t wait to get stuck in more and see it’s full potential!

Thanks,
Jon

[Christian]

You can learn from our Knowledge Base and also by joining the Facebook group made by X users (see the note above).

Thanks.

[Author]

Posts