Thx a lot, now it worked. I copied the wrong code. I copied the code from the email instead of this page. The only problem which occurs now is that the navigation does not close with the left and the right side of the browser like the main navigation.
Do you have any idea how I can extend that?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you add this CSS:
.nav-menu .sub-menu { width: 100%; }
It still won’t reach the entire browser width, which I don’t think you can accomplish with CSS. You can do it with some more JavaScript, do you want to go down that route?
Btw replace the CSS I recommended earlier:
.nav-menu li {
position: initial;
}
With this:
.nav-menu li { position: static; }
Yes, javascript if the menu is working afterwards. 🙂
I ment , yes javascript would be okay for me.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
This should get you pretty close:
var windowWidth = jQuery(window).width(),
submenu;
jQuery(document).ready(function($){
var navContainerWidth = $('#site-navigation').width();
submenu = $('.sub-menu');
$(submenu).hide().parent().find('a').click(function(e){
e.preventDefault();
$(this).siblings(submenu).toggleClass('menu-open');
styleSubmenu(submenu);
});
});
jQuery(window).resize(function($){
windowWidth = $(window).width();
styleSubmenu(submenu);
});
function styleSubmenu(submenu) {
jQuery(submenu).css({
'width': windowWidth + 'px',
//Move the submenu to the far left
'left' : '-' + ( windowWidth - navContainerWidth ) / 2 + 'px'
});
return true;
}
Wow thanks that´s great, I just tried another possibility, just with css.
It seems to work quite well.
Okay I just destroyed it. No idea, why it is not working. I just copied the text again into js and css and know it can not find the pages.
Hello Andrew,
I can not get the submenu working on clicks.
Please could you be so kind and have a look at it?
Thank you,
Chris
