It’s not caused by max width of the body, since the rest of the page resizes just right. Although the three bars that make up the so-called hamburger menu have been around for a long. It did work before, so I assume I clicked some stuff that caused this problem. In the demo below the menu items automatically adjust their width to fill the menu bar. This stays while I make the screen bigger and smaller, with one exception: if I make the screen small enough that tablet mode is viewed, and then make it bigger again, the width becomes even smaller, stuck at 1145px. If I inspect the element, I see that the width is not set as 100%, but in the amount of pixels the browser window is wide upon loading, for example 1253.8 pixels. However, if I start making the browser window smaller and bigger, the menu bar stays the same width as it was. Once I publish it and view the live website, the menu bar is set to the full width of the screen. 17+ Best CSS Fullscreen Menus Examples from hundreds of the CSS Fullscreen Menus reviews in the market (Codepen.io). I prefer media queries over javascript solution. To prevent this scrolling / cropping you can use javascript or css3 media query. Besides, the module allows to show menu item as Horizontal Mega Menu and Vertical Mega Menu. But still it might create a scroll or if you set overflow to hidden it will crop some text out. So Mega Menu supports 7 content types that you can add to you menu: Custom HTML, Product, Category, Manufacture, Image, Subcategory and Product List even the ads banner.
The width is set to 100% and there is no min or max width. Setting a min-width to parent element will solve this issue. I have a website with a fixed menu bar on top.
0 kommentar(er)
