Menu in Slider

Schreckgespenst

For a client I want use BeTheme with a Onepage. 

I will use Revolution Slider also. 

Is it possible to set the menu over the slider in the middle of the screen and have the menu bigger like you see at the picture? 

And if what do I have to do? Is there some custom css for that? 

Thanks for help! 

Albert

Hi,

if you would send us url to page where you want to do this, we'll see if it's possible.

Thanks!

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

Schreckgespenst

Here it is: 

http://blumen-nellessen.de

Albert

Ok. So to move this header up and increase it's height, please use below css:

.header-split #Top_bar:not(.is-sticky) { top: -450px !important; }
#Top_bar .menu > li > a span:not(.description) { line-height: 100px !important; }

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

Schreckgespenst

This looks great. But the sticky header works not correct now.  

Albert

Sorry. If sticky has been affected, please use below css instead:

.header-split #Top_bar:not(.is-sticky) { top: -450px !important; }
#Top_bar:not(.is-sticky) .menu > li > a span:not(.description) { line-height: 100px !important; }

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

Schreckgespenst

Thanks. 

I raise the line height to 200px. Looks great. But the logo is not really in one centered line with the navigation. Is there a chance  to regulate this with custom css? 

And as I see my sticky header background is grey. Where can I change the color to #ffffff and the font color to

#2e4201

Albert

To move the logo to bottom and to change sticky header background and menu items colors, please use below css:

#Top_bar #logo { padding-top: 80px !important; }
.sticky-dark #Top_bar.is-sticky { background: #FFF !important; }
#Top_bar.is-sticky .menu_wrapper .menu > li > a { color: #2e4201 !important; }

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

Schreckgespenst

Haha, this looks great. 

But now the problem is with the logo on sticky header. ;-) The logo overlap with the text. ;-) 

Albert

If you have a problem with sticky, please use below css instead:

#Top_bar:not(.is-sticky) #logo { padding-top: 80px !important; }
.sticky-dark #Top_bar.is-sticky { background: #FFF !important; }
#Top_bar.is-sticky .menu_wrapper .menu > li > a { color: #2e4201 !important; }

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

Schreckgespenst

WOW! 

This is PERFECT! 

Thanks a lot! 

Albert

You're welcome!

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