I've built a working version of the navigation/header element in html, css and js, and I need advice on how best to replicate it in X Pro. Could you take a look at the link and give me your thoughts? Some extra info that may help, and my initial thoughts:
The red banner that is just below the traditional navbar - this should be visible on all pages but will be hidden on smaller devices. This is a 6 column div that collapses to 4 and then 3 on smaller devices.
The background image should be a slider on the home page (4-5 images), but a single image on all other pages.
It seems that my options are to have a huge header section, similar to the hero template, but I'm struggling to replicate the red banner. It would need to sit just under the nav bar, but over the 'bar' that contains the image. Then I have issue of maybe using custom css or js to initiate my own slider...
Second option is to create a smaller nav bar, then have the revolution slider as a separate section underneath. It would need to display under the navbar though - would I need to grab it and set a negative margin equal to the height of the navbar?
My main headache is how best to replicate the intricate collapsible columns of the red banner, and have it display just under the nav bar, but over the main top section image. I'm sure there are numerous ways to go about it but I don't want to waste too much time when there could be a sensible solution within the theme.
Any help or advice appreciated!