Nav Menu On Top

awright715 · August 2015

Hello,

I'm wondering how to setup my homepage so that I have a full width, static image as the background behind the main navigation. I'm using the split menu, with the logo in the middle. I noticed it is the same look in your "Massage" demo, and it seems it is done with the Revolution Slider? I'm not sure, but if you could help me figure out how I go about setting that up I'd appreciate it.

Thanks!!

Albert · August 2015

Hi,

yes, exactly. For that site we used Revolution Slider. So please set up "Split" header style and Revolution Slider for background.

awright715 · August 2015

Thanks for the reply. I already tried that, but I need to know more specifically how to get the navigation to be on top of that image and have some opacity to it, like the Massage example.

I cannot find any options to be able to achieve this same look. So if you could provide more detailed instructions I'd appreciate it.

Albert · August 2015

Just set "Split" header style as we described above and then create Revolution Slider and set it under "Page options" section while editing/creating pages. There is a drop-down field to set Revolution Slider. If you will do this, please send us url to site so we can have a look on it and give you custom css to set the header transparent.

awright715 · August 2015

I have set it up as you described. What I need is the transparent header, as well as the revolution slider image to be shown through the header. I believe right now they are not stacked.

Here is the url: http://anthelionhelicopters.com/new/

Thanks for the help.

Albert · September 2015

Ok. So you can do this with below css:

div#mfn-rev-slider.mfn-main-slider {
    margin-top: -90px !important;
}

awright715 · September 2015

Thanks, that worked as far as bringing the revolution slider up and under the menu, but now it just covered up the background-color of the top bar.

I want the background color of the top bar to be shown, but with an opacity. Can you help me with that also? I tried using z-index, but it didn't work....

Thanks again

Albert · September 2015

You can try to use below css because this is the only solution we have in this case:

.header-split #Top_bar:not(.is-sticky) {
    background-color: rgba(254, 254, 254, 0.56);
    position: relative;
    top: 0 !important;
    z-index: 9999;
}

Nav Menu On Top

Comments