i have used two components 1) navbar 2) login in mobile view when i click into menu option not able to see menu options Please check image for better understanding i have used bootstrap.
You may forget to trigger toggle function for your menu when you click the menu button. (Also should check element's display property from css.
You may try with add css for your menu element z-index: 1 or position:fixed for your menu.
Related
I try not to display a bootstrap popover next to the button but for all buttons on the page at a fixed position (e.g. at the bottom of the website).
Unfortunately I can't find anything about it, is that even possible via popover or tooltip? Like this
I am using mat-menu from Material-UI to have a menu. I want the menu to take all the width of the button which make it appear.
When I don't custom the width I got this:
However, when I modify in the inspector to add the propriety width: 100% to the class cdk-overlay-pane. I got this :
But when I click elsewhere in the page and click again in the mat-menu. It shows the mat-menu at top left corner of the page.
Also, when I modify the class cdk-overlay-pane directly in the code. The menu is showing directly at top left corner of the page.
My question is: How to modify the mat-menu width to show with the result of the second picture and have a persistent result knowing that the structure is like that when we add a mat-menu in the HTML
In Polymer 2 I would like to create an app-toolbar with menu buttons that on-click show a dropdown menu, similar to a classical desktop application. The app-toolbox seems to be a great start for a responsive solution and there are examples for creating toolbars with simple navigation buttons/links.
What I don't find are examples on creating dropdown menus in the toolbar.
My questions:
Which component should I use to show a dropdown menu in the app-toolbar? Maybe iron-dropdown? Is there any example?
What would happen to the dropdown menu when on narrow screens the app-toolbar collapses to the single menu button? Would the drawer that is shown by the menu button allow me to show the dropdown menus?
You could use paper-dropdown-menu, or iron-dropdown or some similar.
But you should pay attention for the iron-overlay-behavior dropdown content max-height.
I have a basic Bootstrap navbar here
What I want to do is this:
(Navbar)
-----Logo------Item----Dropdown----------------------------Login/Signup-----
(Dropdown menu)
-----Sub-item----Sub-item----Sub-item---------------------------------------
On hover I want to make the dropdown menu show full width right underneath the navbar. The hover event isn't what I'm having trouble with, I'm having trouble positioning it correctly to be full 100% width.
Update
I see that bootstrap adds position: relative to .nav > li, when I take that off in Chrome developer tools it goes full width off the screen starting at the position of the navbar element.
Solution
Working Example
The solution to my example was overriding Bootstrap's .nav>li to position: static.
I now know that this is called a mega menu :)
I dont know exactly what you need if my thought is right you want this link , check with the bootstrap mega menu
click here
I am working to convert a site to a completely new theme in Wordpress. The original site is here:
Original
The new dev site is here:
Dev site
What I am trying to do is make the menu match as closely as possible to the original site. I am fairly intermediate on CSS so I have the following questions:
How can I make the sub-menu text left align with the parent menu text?
How can I get that pointer to point at the parent menu?
Please note that I am using a plugin called Max Mega Menu for the dev site.
Max Mega Menu includes a location to add custom styling. There is an example at their site:
Max Mega Menu Styling Example
You need two things to achieve sub-menu like in selier.com.
First, you create an empty div which will appear on parent menu hover, and which will have width of 100%. This div will be your semi-transparent background.
Then, for each sub-menu you create, set its background to none, limit its width to some value, and set its position property to absolute.
Also, make sure that the sub-menu shows on top of the background div.
This should do it.
It will be better not to use any plugin and used the custom html menu to get the exact menu like in the demo.