Change colour on top menu hover box

bloom20
(@bloom20)

8 years, 8 months ago

Downloaded adamos a couple of days ago and trying my best to get what i want, which is a really simple about/contact page.
Managed a few things that i want to change but im stuck at changning the colour of the hover box in the top menu, both for when hovering and when that particular page is used/selected.

I’ve managed to change the text colour for the page that is used in the menu in the active hover box, but i want the other pages in the menu to have the same text colour as the page im on.

Also played around in the /* Small menu */ and the only thing that i havent been able to fix there is the text colour on the active page, i want that to be the same as the other pages that arent active.

you can see for yourself here – http://www.projekt1.tobiasbloom.se/

Viewing 4 replies - 1 through 4 (of 4 total)

Theme Author Template Express
(@danstriker)

8 years, 8 months ago
Hello,

try this:
```
.main-navigation a {
    color: #494949;
}
```
Thread Starter bloom20
(@bloom20)

8 years, 8 months ago
i’ve tried to change every main-navigation a { i can find that has some kind of color or background code to ff0000, choosed red to see the difference but nothing has changed on any of the following that is found under

/* =Menu
———————————————– */
```
.main-navigation a {
	color: #ff0000;
```
```
.main-navigation ul ul {
	background: #ff0000;
```
```
.main-navigation li:hover > a,
.main-navigation li.current_page_item a,
.main-navigation li.current-menu-item a {
	color: #697877; /* this is the text color in the active hover box */
	display: block;
	background-color: #ff0000;
	border-radius: 0.2em;
```
```
.main-navigation ul ul a:hover {
	color: #ff0000;
	display: block;
	background-color: #ff0000;
	border-radius: 0;
```
```
.main-navigation ul ul ul a:hover {
	color: #ff0000;
	display: block;
	background-color: #ff0000;
	border-radius: 0;
```
Thread Starter bloom20
(@bloom20)

8 years, 8 months ago
when looking at inspect element in chrome i get the following result
```
media="screen"
.main-navigation a {
    color: #CCC;
}
```
on the other hand i have set the text color to FFF now as shown below, i guess the problem is in @media but what is overruling my preferred color setting?
```
media="all"
.main-navigation a {
    color: #FFF;
    display: block;
    font-size: 1.1rem;
    font-size: 11px;
    font-weight: normal;
    margin-right: 1em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0.2em 0.8em;
}
```
Theme Author Template Express
(@danstriker)

8 years, 8 months ago

Hello,

keep in mind that if you have selected a color scheme in the customizer this will overwrite the style.css

To change the color scheme styles you will find them in the css directory.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Change colour on top menu hover box’ is closed to new replies.