Duplicating the Coffee menu

snitilycarr

I've imported the dummy content, read the documentation and the forum, but still can't get my header to look like the Coffee demo. To be specific, I can get the menu to be transparent and appear over the slider if I choose the "Transparent" header option, and I can get the split menu by choosing the "Split Menu" option, but the split menu appears above the slider, not over it. Basically, I can't get the split menu to be transparent, like on the Coffee demo. Any suggestions? What header setting is used on the Coffee demo?

Albert

Hi,

except all these settings, we also used below css which is necessary:

/* Top bar */
@media only screen and (min-width: 768px) {
    .header-split #Top_bar:not(.is-sticky) { position: absolute; background-color: transparent; }
}
#Top_bar:not(.is-sticky) #logo { height: 187px; line-height: 187px; }
#Top_bar:not(.is-sticky) .menu > li > a span:not(.description) { padding: 65px 45px; letter-spacing: 1px; }
#Top_bar .menu > li > a { font-style: italic; }
#Top_bar .menu > li > a span:not(.description) { border: 0; }

@media only screen and (max-width: 1239px) {
    #Top_bar #menu { top: 70px; }
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

snitilycarr

Thanks!

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

jaibeellen

How can I get my layer slider to overlay my header? 

jaibeellen

What are the steps to create the home page slider in the Coffee BeTheme? I would like to replicate the theme's slider.

jaibeellen

I figured it out. Thank you.

Albert

@jaibeellen Great We're glad that you sorted it yourself!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next