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
Related
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
}
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;}
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;
}
I'm using Drupal 7.26 - I've created a menu and entered some links into the menu. I'm trying to style the menu now - it has output the links as a bulleted list.
I've styled the li element to give padding, margin, text colour and a background colour. I now have each menu item inside a blue box which is what I was looking for. However, I now need to take away the bullet points which are to the left and outside of the blue background of each menu item, and instead, inside the menu item background box, I need a background image placed to the left of the text.
My question is, how can I place the little image to the left of the text?
Thank you v much.
If I understand correctly,
li{
list-style-position: inside;
list-style-image: url('image/path/here');
}
if not, please post a fiddle.
The above code will style all li's in your page. to make it specific, use class names.
like ul.menu li..
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.