for small Naviagations this is an elegant Method of Menu – but why not for mobile view?
on a test environment i make it – and even with transparent headers this is a nice Option.
I get rid of transparency for mobile case. Have a look here: http://webers-testseite.de/elegant/fullscreen-slider/
The code for quick css
.main_menu .avia-menu,#header_main_alternate,.fallback_menu {
display:block;
float:right;
}
.responsive #top #wrap_all .container {
max-width:95%;
width:95%;
}
.responsive #top #wrap_all #header {
background-color:#fff;
opacity:1;
position:fixed;
width:100%;
}
.responsive #top .logo {
float:left;
position:absolute;
top:50%!important;
transform:translateY(-50%);
width:65%;
}
#menu-item-burger > a {
padding-right:8px!important;
}
#advanced_menu_toggle {
display:none!important;
}
The Rule for .responsive #top .logo depends on the given logo. So you have to play a bit with it.
On some cases it might be good to set some media querries.
Hey Guenter,
Thanks for sharing this. Looks wonderful :)
Best regards,
Vinay