Parallelogram menu bar with -webkit-transform causes multiple bugs - css

Recently, I created a navigation bar and transformed the menu items into a parallelogram using -webkit-transform:skew(-30deg); and the tweaks of the community.
Now, I tried fixing the dropdown menus with the CSS class .submenu.
This is my progress so far: http://jsfiddle.net/an5mb2y3/1/
But there are some bugs I could not fix:
Font smoothing: When I hover over the dropdown menu items, the font gets blurry. After another second, the font gets clear. I read about using -webkit-font-smoothing: antialiasedto fix this, I tried it and had no success.
Also, the dropdown menu gets displayed in the background, behind the embedded image. I want to show the menu on a top layer of the image. What I tried was changing the z-index to a bigger value. But it did not work.
I want to display the submenu from the position where the parallelogram starts while hovering. I tried margin-left: 42px; on the .submenu class, but this doesn't work for both dropdown menus at the same time.

Add this CSS dropdown menu up:
nav.nav-primary{z-index: 1; position: relative;}

Related

Bootstrap hamburger menu z-index and styling issues

I'm trying to design my first responsive site and am having issues with the navigation. I've got everything somewhat working up to point where the hamburger kicks in. At that point, the drop down menu goes behind the form elements and I don't understand enough at this point to change the styling without affecting the normal navigation.
It seems that most of the things I've looked at are using the standard BootStrap elements with little more than color changes. I need to change the height of the nav bar (along with the hamburger), center the nav but when the site goes mobile, the nav dropdown would need to change font and background colors and text alignment.
I've got a bootply running and will continue to research as I go. I know I have a long way to go but would appreciate a helping hand getting me over this hurdle.
The bootply is at http://www.bootply.com/xtOWUEP1bw. Thanks in advance for any help.
You need z-index and background color.
Put z-index in .navbar and put background color in .navbar-collapse.in like below;
.navbar {
z-index: 10;
}
.navbar-collapse.in{
background:#fff
}

WordPress CSS Menus & Text Alignment Issues

I'm having a problem with the header menus, my sub-menus, and text alignment. Every time I hover my mouse over them, the word disappear. I want it to look like the About Us button when I hover the mouse over it then it turn black with the gold text. I tried using the same code for the header menus, but that disappearing effects didn't go away and it doesn't turn black when hover over it. I want to make the header menus and sub-menus to have the same effect as the About Us button when I hover over it. I want the picture and text in the About Us page to be at the center. I tried various padding and margin alignment methods, but it didn't work. Please help, and thank you. My website: http://www.empirenailsbar.com
For your menu items which disapper You need to add in your style sheet the property for your menu item on hover:
#mainnav ul li a:hover{
color:#FFFFFF;
}
This in this css file:
wp-content/themes/sydney/style.css?ver=4.4

Hover issue with background colour Slicknav responsive menu

I have an issue using the slicknav responsive menu, if the navigation buttons have a different background colour set for the hover in the stylesheet, if you hover over the actual tag text the background colour changes correctly, but if you hover over any part of the button away from the text, then the colour behind the actual text doesn't change. So you get a rather ugly box around the text in the original colour. This is happening in all browsers tested.
I cannot find any way to stop this happening, the css file is not that complicated. I've used Slicknav now on a few sites and always had the same problem, but this time I really need to fix it.
You can see an example of this here: http://www.yorkluxuryholidays.co.uk/
In responsive mode, hover anywhere over one of the menu items that have sub menus, but not directly over the menu text itself, and the area behind the text does not change colour.
This is the css I'm using for the hover:
.slicknav_nav .slicknav_item:hover {
background:#59584e;
color:#fff; }
.slicknav_nav a:hover{
background:#59584e;
color:#fff;}
It seems to make no difference which class you set the colour on, either or both, the behaviour is exactly the same.
I'd love to know if there is a way to fix this with the css!
Add in your css :
.slicknav_nav a:hover * {
color:#fff;
background-color:#7b9fc7;
}

Side navigation submenu flyout pushes down other menu items in IE7

This problem is only showing up in IE7. Other browsers and IE8 and above work fine.
I am using a sprite map with an ul for my side navigation. There is a fly-out submenu for one of the li elements which also uses a sprite map with an ul for downloading various PDFs.
If you look at the image that I've attached, the submenu is appearing in the correct location, but it's pushing down everything below it. (The word "Music" should appear directly below the word "Menu".)
I have tried various fixes using a display: inline; element and position: static; element, but my attempts have failed. Would really appreciate some help on this. The website address is: http://www.graysonmain.com/
You could use a fixed height, height: 58px and display: inline-block for li#nav_02.
Have you looked into overlays with CSS? I'm very new to this so I, personally, can't give you a concrete answer, but it might be possible to set the positioning of the submenus and toggle the visibility with an onClick() command.

css dropdown - gap wanted

My dropdown menu is now working with my css triangles (yesterdays problem), but now i would like a 2-3 px gap to the dropdown, but the moment i add that, i have the problem, that when you slide the mouse from the main nav point to the drop down, the drop down disapears (obviously as the mouse is no longer over the li link.)
So anyone got any good ideas, how i can have a gap, without the drop down dissapearing ?
http://keith464.fahrradhamburg.de/Lager/Metall-Behaelter/Stahlblech-Behaelter/Stapelbehaelter-aus-Stahlblech.html
You can use another container to hold your dropdown, witch will have transparent background and will be larger than your menu by 3px at the top, so you'll actually display that container too at your mouse hover, and nothing will disappear
LE: or you can show your dropdown by using javascrip and set a timeout to it, so it won't disappear that fast if your mouse is not over any <li>
A simple fix is to add this to your ul ul (drop down menu):
margin-top:-3px !important
The important tag ensures this margin takes precedence over any existing styles.

Resources