CSS customization to a wordpress theme

Hello,

I'm creating a website using wordpress + Canvas theme, and I'm doing a lot of CSS customization in the menu area. Right now, I have two problems.

1. I can't center the main menu (Yoga, Music, Food, Body...) vertically over its background.

2. The CSS properties I applied work normally on Google Chrome, but on Firefox they don't. And I haven't seen how it is on IE.

Does anyone know what I should do to fix these problems?

Thanks so much in advance. I literally tried everything I could before asking your help. Any help is really really appreciated.

Wordpress CSS conflicting with Java menu?

Hi, forgive me; I'm not sure if this question is better suited in the Off topic section, due to the Javascript menu, or if it's better in the CMS section since it also deals with Wordpress, so I've posted this in both places for now.

JS menu styling conflicting with Wordpress CSS?

Hi, forgive me; I'm not sure if this question is better suited in the Off topic section, due to the Javascript menu, or if it's better in the CMS section since it also deals with Wordpress, so I've posted this in both places for now.

Wordpress Sub Menus Disappearing On Hover?

It never ends... I'm working on another Wordpress theme and I have the submenus styled exactly how I want them. However, they disappear upon hover. I have set all of my margin-tops to zero as stated on Stack previously but they still don't work properly. Here's the link to the site: tinyurl.com/ku6mlx7. Dropdowns can be seen under Artists.

My CSS is the following:

.top-nav {
background-color: #444;
min-height: 40px;
}
 
.top-nav ul {
margin-bottom: 0;
}
 
.top-nav li {
margin: 0 20px 0 0;
padding: 0;
float: left;
display: inline-block;
position: relative;
}

CSS & Wordpress

Hi all,

I was wondering if it is necessary to use classes in the Wordpress editor to make your css work.

Because right now I have this for the links:

#header a:link, #header a:visited {
	color: #000;
	text-decoration: none;
	font-weight: bold;
}
#header a:hover, #header a:active {
	color: #5dc0e3;
	text-decoration: none;
	font-weight: bold;
}
#ColumnMiddle a:link, #ColumnMiddle a:visited, {
    color: #F90;
    text-decoration: none;
}
#ColumnMiddle a:hover, #ColumnMiddle a:active, {
    color: #F90;
    text-decoration: none;
}

Syndicate content