PrimeFaces with HTML/CSS Navigation Bug - html

I have made a Homepage (HTML/CSS) and now I work with Primeface.
The big problem is that some Buttons are over the navigation.
So here you can see the problem:
In the second Picture: If you over the Arrow Buttons then the navigation disappeared.

use simply z:index for (calendar and menu)

Related

Bootstrap NavSide with Scroll and Dropdown

This is my first time on SlackOverflow, i hope that you can help me.
I'm trying to achieve something tricky regarding my skill on development and specifically on Bootstrap.
I've created a template with dual Navbar (top and left).
The left one is a fixed navside where there is 3 kind of experience : Expanded, Not Expanded, Not visible.
As you can see, my Expanded NavSide is working perfectly with Scrollbar and Dropdown inside the nav
Expanded SideBar with Dropdown
The not visible experience is also working perfectly.
Not Visible SideBar
When i'm working with my not expanded SideBar, everything is perfect if i don't have too many item menus. If i have too much items i can't scroll on the Sidebar because i've only activated my css for expanded js.
Not Expanded SideBar without Scroll
Where is the issue ? I want to keep the same experience for the not Expanded version with Dropdown displayed on the right of my navside. But if i put the overflow-y scroll on my navbar, the dropdown on the right side is not displayed anymore (but the scroll is working well).
Not Expanded Sidebar with scroll but no Dropdown
Any idea if what i'm trying to achieve is possible ?
I can share my code if needed :)
Many thanks !

Polymer app-toolbar with drop down menus

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.

Bootstrap : Top nav issue with mobile

I am using bootstrap with my wordpress site , its perfect when we uploaded to live server but when we hover over/ click nav item in mobile this is what happens
right now if i click on any of the nav items its not clicked and bottom one comes just right to upper one , now i don't remember if i modified some css for navigation code while doing this site but what i expect a single css rule will make it fine can someone help me to fix this ?
In hover and click some css get overrides which is applied for desktop version.
You have to override desktop version css with media query for mobiles.

Vertical dropdown menu in sidebar using BootStrap

from couple of hours I try figureout how vertical drop down works. Maybe somebody will be so nice and explain my what Iam doing wrong.
I would like to achive vertical dropdown menu like is here.
When you click on eg 'UI Features' the sub menu roll down and move other elements down.
I tried couple of solutions but it still doesnt work. My dropdown appear above other elements.
Here is what I achived Codeply
Ps: I using Bootstrap v3.3.2
Use Bootstrap collapse button component
You can look at this question, and try the code user post in his question, the code works better, you can modify it according to your need..
1) Responsive Sidebar in twitter bootstrap 3.x
2) left sidebar in twitter bootstrap
The link 2 will also help you...

CSS Menu Overflow?

I have a css menu, pretty standard functionality. I have implemented it within a Netsuite site im working on.
The menu is visible here:
http://www.gardensandhomesdirect.co.uk
Its the one just under the header.
Ive been trying to get the only part of the menu with dropdowns to come left instead of right when hovered so that it is not being 'hidden' underneath the wrapper.
What is the best way to get this menu showing correctly? I there a way i can get it hover over the top of everything else instead of underneath like now?
Any help appreciated.
-Wayne
You need to have overflow: visible on #outerwrapper if you want to show anything outside that div.
Alin