Image in Navigation - Support | Kriesi.at

Tagged: navigation

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
March 26, 2019 at 12:39 pm #1083087

Kesselhut
Participant

Hi all,

i have a small issue with my navigation.
I changed “Home” to an image with different states (hover, active) and it works as it should, except when on the Homepage.
May you got an idea how to fix that.

Here is my css which I applied in QUICK CSS.

/* Home-Icon in Navigation */
#menu-item-890 > a {
text-indent: -9999px;
background: url(‘https://font-khi.hekeko.de/wp-content/uploads/2019/03/ki-home-w_50.png’) no-repeat top center;
width: 100% !important;
height: 75px !important;
}

#menu-item-890 > a:hover {
text-indent: -9999px;
background: url(‘https://font-khi.hekeko.de/wp-content/uploads/2019/03/ki-home-g_50.png’) no-repeat top center;
width: 100% !important;
height: 75px !important;
}

#menu-item-890 > a:active {
text-indent: -9999px;
background: url(‘https://font-khi.hekeko.de/wp-content/uploads/2019/03/ki-home-g_50.png’) no-repeat top center;
width: 100% !important;
height: 75px !important;
}

The Link to the website is in the private content

March 30, 2019 at 5:50 am #1084797

Rikard
Keymaster

Hey Kesselhut,

It’s working but your image is white and the home menu item is highlighted in white on the home page. How do you want to change the behaviour?

Best regards,
Rikard

March 30, 2019 at 11:00 am #1084841

Kesselhut
Participant

Hey Rikard,

i want it to be shown on the homepage in the same color, as in the :hover state.

Greetings and thanks for the support

April 1, 2019 at 8:08 am #1085317
Nikko
Inactive Moderator
Hi Kesselhut,

Try to replace it with this css code:
```
#header #avia-menu #menu-item-890 > a {
    text-indent: -9999px;
    background: url('https://font-khi.hekeko.de/wp-content/uploads/2019/03/ki-home-w_50.png') no-repeat top center;
    width: 100% !important;
    height: 75px !important;
}

#header #avia-menu #menu-item-890.current-menu-item > a,
#header #avia-menu #menu-item-890 > a:hover,
#header #avia-menu #menu-item-890 > a:active {
    text-indent: -9999px;
    background: url('https://font-khi.hekeko.de/wp-content/uploads/2019/03/ki-home-g_50.png') no-repeat top center;
    width: 100% !important;
    height: 75px !important;
}
```
Hope it helps.

Best regards,
Nikko
April 1, 2019 at 4:35 pm #1085573

Kesselhut
Participant

Hi Nikko,

it seems to work but the background-color is not white anymore.
There is a small white line at the left side of the active item but is not filled?

Any ideas?

Thanks for the support

April 2, 2019 at 1:11 am #1085765
Nikko
Inactive Moderator
Hi Kesselhut,

Try to replace this code:
```
#header #avia-menu #menu-item-890.current-menu-item > a,
#header #avia-menu #menu-item-890 > a:hover,
#header #avia-menu #menu-item-890 > a:active {
    text-indent: -9999px;
    background: url('https://font-khi.hekeko.de/wp-content/uploads/2019/03/ki-home-g_50.png') no-repeat top center;
    width: 100% !important;
    height: 75px !important;
}
```
with:
```
#header #avia-menu #menu-item-890.current-menu-item > a,
#header #avia-menu #menu-item-890 > a:hover,
#header #avia-menu #menu-item-890 > a:active {
    text-indent: -9999px;
    background: #fff url('https://font-khi.hekeko.de/wp-content/uploads/2019/03/ki-home-g_50.png') no-repeat top center;
    width: 100% !important;
    height: 75px !important;
}
```
Best regards,
Nikko
April 2, 2019 at 8:31 am #1085925

Kesselhut
Participant

Yeah Nikko,

that’s it!

Thanks for the support.
Ticket can be closed

Best regards,
Henning

April 2, 2019 at 9:23 am #1085961

Nikko
Inactive Moderator

Hi Kesselhut,

We’re glad that we could help :)
Thanks for using Enfold and have a great day!

Best regards,
Nikko
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Image in Navigation’ is closed to new replies.