I need to set the Material Design Lite drawer menu so that the hamburger menu is displayed permenantly. The menu must be shown only on click.
There is no documentation available about this. Thank you!
link
I'm going to be honest with you and say I'm not sure what your asking, however.
If you are referring to the hamburger not displaying at all assure that your mdl-layout has the mdl-js-layout
Did you add the menu at runtime? If so, assure that the dom is updated after the fact
//yourCodeThatModifiedTheElement
componentHandler.upgradeDom();
Or is the navigation not showing up at all? Certain breakpoints will hide the navigation in which case you can have the header fixed which will display on all screen sizes by adding mdl-layout--fixed-drawer to your mdl-layout
Related
I just wanna ask how can I adjust the hamburger toggle for my WordPress navigation bar when it reaches a certain length it will act. I do aware hamburger toggle will happen by the default length itself but right now it happens to be my navigation bar have a lot of navigation and it looks off when it turns it to Ipad responsive design. The image below will be the interface that I got in at my navigation bar.
I had found the solution to the issue. It just me over complicated for the options and thought to have modified from CSS. The solution here can be done through Appearance -> Customising -> Header -> Mobile Menu (Mobile Menu Breakpoint). From there you can set the pixels you wanted to take effect of the "hamburger icon". Cheers.
I am using the Generate Press premium theme My issue is simple but not able to troubleshoot yet. Top navigation on the header of the website is not visible when it collapses to the mobile view.
https://www.wowkitchenplace.in/
images
http://prtsc.ca/i/5wveSi ,
http://prtsc.ca/i/5wv0H2
I have no idea how to solve it. Please help me!
Thank You
Isn't there a hamburger icon (3 horizontal stripes) in your mobile view? I can see it when I minimize the page.
I would like to set up a horizontal navbar to scroll inside the page in the style of uber eats (https://www.ubereats.com/en-EN/new-york/food-delivery/zafis-luncheonette-les/-VDewOpIRMe4mh2tNVzVCw/ ,check the second navbar in which you can navigate throught the different categories of the menu). I managed to create the navbar and set the spyscroll but I don't know how to reproduce the responsive behaviour : how to hide the category from the navbar when it overflow and add it to the "More..." dropdown ?
I hope my question was clear enought !
Thanks for your help
What You are looking for is called a "Priority Navigation". Just Google it, there are plenty of examples and plugins out there.
e.g. https://css-tricks.com/the-priority-navigation-pattern/ or http://gijsroge.github.io/priority-nav.js/
The website I am working on does not use the Bootstrap navbar for desktop version, utilising the responsive navbar (and hiding the custom navigation) on the mobile version. The navbar, without the actual links, is present even in the desktop version, displaying the branding and the search form.
However, the problem is that the website ends up with three navigation types:
1) The custom navigation unit, used on the desktop version.
2) The collapsed navbar with a toggle button
3) The default "navigation links in navbar" on most of the tablets. I want to get rid of this one: there are too many links (can not do much changes to the website structure) and it looks noisy.
Is it possible Bootstrap's navbar always collapsed?
This is not a direct answer to your question, but I think it might help you resolve your situation.
Consider using the Bootstrap Responsive Utility classes to hide certain navigation elements. For instance, maybe apply the hidden-desktop class to the menu items inside the navbar.
Scroll to the bottom of this page to see the classes:
http://twitter.github.io/bootstrap/scaffolding.html#responsive
I am just developing a child theme of WordPress twenty eleven theme. The live demo can be seen here. As WordPress has already responsive support I am also doing my theme in responsive for that I am customizing my theme CSS. For some of the part I am done. In my menu part I am facing some problems. I have two types of menus. One which doesn't have dropdowns and the others which have dropdowns. Now I am facing the problem in the menus which have dropdowns in responsive. So can someone kindly help me here?
This seems like more of a design issue than a technical one. I would recommend either 1) turning the drop down menus into accordion menus (e.g., tiny accordion), or 2) extending the drop down menu region and increasing its z-index so that you can only hover over the drop down and not activate anything that appears underneath it. For your design, this might mean increasing the z-index and using something like margin-top: -2px; on the drop down menu's children.
The idea of responsive design, however, is that you make it available for small devices, like smart phones. Since smart phones that use touch don't have hover states, you're probably better offer using suggestion 1 above, where a user clicks on the initial menu, which then displays its sub-menu.