Removing mouseover effect on links in nav bar.

[jimmythetulip]

I have a rather strange issue.
Why I can’t I remove the hover effects on the links in the menu bar. I guess there is some kind of jquery fix which overrides the css changes I make.
I can change the link colour using this css statement:

.menu ul a, .menu ul a:visited, .menu ul a:hover
{
background-color: #CC0000;
color: #FFFFFF;
}

Obviously, I don’t want the hover state to be red on a red background, but the link colour should be white with no hover effect.

[admin]

Hello,

Obviously, I don’t want the hover state to be red on a red background, but the link colour should be white with no hover effect.

You can customize Contango with your own CSS Code Snippet via `Appearance > Contango Options > Extend Settings`

Example:

Hover effect style of Contango can be modified via the following CSS Code Snippet,

/** Global Anchors Hover */
.menu ul a:focus,
.menu ul a:hover,
.menu ul a:active {
color: #ff0000;
}[/CODE]

Thanks[CODE]/** Global Anchors Hover */
.menu ul a:focus,
.menu ul a:hover,
.menu ul a:active {
color: #ff0000;
}[/CODE]

Thanks

[jimmythetulip]

Dear Admin
Your answer only covered the global anchors hover, but what about the global anchors; eg. a, a:link, a:visited ?
I need a simple global soloution to all my links, so I don’t need to change every anchor element individually in the style.css file.

• Links must be white in terms of font colour.
• Buttons must have red background colour and white font colour.

Do you follow me ?

[jimmythetulip]

By the way. Here’s a link to my website http://whitfield.dk

[admin]

Hello,

First of all, Congrats for great customization of Contango. Dark version of Contango is also very impressive.

Quote:

I need a simple global soloution to all my links, so I don’t need to change every anchor element individually in the style.css file.

It depends on the level of customization. Like, in your case – deep customization may need to write more and more styles to make the customization perfect.

*** I will strongly recommend NOT TO ALTER style.css file. As it will be override in case of Contango upgrade. Please always use Extend Settings of Contango Options to write your own styles.

Do you follow me ?

I have made some quick customization to Contango to meet your style. Let have a look on the attachments and steps,

Step One:

I have changed the Background color to #000 of theme via `Appearance > Background > Colors`
I have changed the Contango Layout to wide via `Appearance > Contango Options > Layout Settings`

Step Two:

I have changed the Contango Skin via `Appearance > Contango Options > Skin Settings`
Primary Skin to: #ff0000
Secondary Skin to: #ff2626

Step Three:

I have written following some quick styles to match with your theme via `Appearance > Contango Options > Extend Settings`

/* Content */
#content {
background: #000;
border: none;
box-shadow: none;
}

/* Sidebar */
#sidebar {
background: #000;
border: none;
box-shadow: none;
}

/* Nav Common Styles */
#loop-nav-numeric a,
#loop-nav-next-prev a,
#loop-nav-singlular-post a,
#loop-nav-singular a,
#comments-nav-below a,
.page-link a span,
.page-link span,
.nav-numeric span {
background-color: #ff0000;
border: solid 1px #ff2626;
color: #fff;
}
#loop-nav-numeric a:hover,
#loop-nav-next-prev a:hover,
#loop-nav-singlular-post a:hover,
#loop-nav-singular a:hover,
#comments-nav-below a:hover,
.page-link a:hover,
.page-link a span:hover {
color: #fff;
background-color: #ff2626;
}

/* Navigation */
#nav {
background: #000;
border: none;
box-shadow: none;
}

/* Menu Primary */
/** Top Level List */
.menu ul li {
background: #000;
border-right: none;
}

/** Nested List */
.menu ul ul.sub-menu li,
.menu ul ul.children li {
border: none;
background: #000;
}

/** Top Level Anchors */
.menu ul a,
.menu ul a:visited {
color: #fff;
}[/CODE]

Please see the result in the attached screenshots.
I hope you have got the point.

Thanks

[ATTACH=full]72[/ATTACH]

[ATTACH=full]73[/ATTACH]

[ATTACH=full]74[/ATTACH][CODE]/* Content */
#content {
background: #000;
border: none;
box-shadow: none;
}

/* Sidebar */
#sidebar {
background: #000;
border: none;
box-shadow: none;
}

/* Nav Common Styles */
#loop-nav-numeric a,
#loop-nav-next-prev a,
#loop-nav-singlular-post a,
#loop-nav-singular a,
#comments-nav-below a,
.page-link a span,
.page-link span,
.nav-numeric span {
background-color: #ff0000;
border: solid 1px #ff2626;
color: #fff;
}
#loop-nav-numeric a:hover,
#loop-nav-next-prev a:hover,
#loop-nav-singlular-post a:hover,
#loop-nav-singular a:hover,
#comments-nav-below a:hover,
.page-link a:hover,
.page-link a span:hover {
color: #fff;
background-color: #ff2626;
}

/* Navigation */
#nav {
background: #000;
border: none;
box-shadow: none;
}

/* Menu Primary */
/** Top Level List */
.menu ul li {
background: #000;
border-right: none;
}

/** Nested List */
.menu ul ul.sub-menu li,
.menu ul ul.children li {
border: none;
background: #000;
}

/** Top Level Anchors */
.menu ul a,
.menu ul a:visited {
color: #fff;
}[/CODE]

Please see the result in the attached screenshots.
I hope you have got the point.

Thanks

[ATTACH=full]72[/ATTACH]

[ATTACH=full]73[/ATTACH]

[ATTACH=full]74[/ATTACH]

[jimmythetulip]

Dear Admin
You’ve been very helpful as always.
I followed your guidelines and customized your solution, so it fitted my requirements.
Just to clarify; I DON’T ALTER the style.css file in the parent theme, but the style.css in my child theme.
Have a nice day and keep up the good work !
And thank you so much.

[admin]

Thanks for your valuable feedback.

Quote:

I DON’T ALTER the style.css file in the parent theme, but the style.css in my child theme.

Great Approach

[Author]

Posts