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.
Related
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/
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
I have a navigation menu issue that I can't figure out for the life of me, but basically my responsive menu doesn't respond in order to reveal the li's underneath it. The site is healyourselfnecklaces.com and the menu switches at 600px
Any help you can give me, including how you found the issue, would be greatly appreciated.
I believe you issue is that there is no JavaScript added to the menu button to toggle (show/hide) your menu when you are in a mobile view.
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