Topic: Font Colour Change – Uber Menu | Themeco Community

Tagged: x

Author

Posts

December 1, 2016 at 6:02 pm #1278083

Moderator

Hello There,

Thanks for the updates! To include the colour change when you hover over the image, you can make use of this code instead:

.ubermenu-tab-content-panel  .ubermenu-target.ubermenu-target-with-image span.ubermenu-target-title.ubermenu-target-text,
.ubermenu-tab-content-panel span.ubermenu-target-title.ubermenu-target-text {
    color: #fff !important;
}

.ubermenu-current-menu-item .ubermenu-tab-content-panel  .ubermenu-target.ubermenu-target-with-image span.ubermenu-target-title.ubermenu-target-text
.ubermenu-tab-content-panel  .ubermenu-target.ubermenu-target-with-image:hover span.ubermenu-target-title.ubermenu-target-text,
.ubermenu-tab-content-panel span.ubermenu-target-title.ubermenu-target-text:hover {
    color: #aab5bf !important;
}

Please let us know how it goes.

December 4, 2016 at 2:56 pm #1280706

MakkBlakk

Participant

I added the above code in place of the previous code. Now the text remains white, rather than changing colour when hovering or opening that tab…

Mark

December 4, 2016 at 6:43 pm #1280843

MakkBlakk

Participant

This reply has been marked as private.

December 4, 2016 at 7:51 pm #1280996

Rue Nel

Moderator

Hello There,

Thanks for updating in! It turns out that there is an invalid and orphaned curly brace in your custom css. Please check out the screenshot below:

Please let us know how it goes.

December 5, 2016 at 7:16 am #1281518

MakkBlakk

Participant

Hi
I have fixed the menu but the colour of the text still stays white when I hover over either the associated image or text.

December 5, 2016 at 7:48 am #1281565

Paul R

Moderator

Hi,

There are still syntax errors in your custom css code.

Kindly change the entire code in your custom css with this.


.x-logobar {
    background-color: #000000;
}

div#x-section-2
h2.h-custom-headline.resp-h-timeline.h2 {
    text-align:left;
}

div#x-section-2 .x-text.none.resp-p-timeline {
    text-align: left;
}

div#x-section-2 a.x-btn.x-btn-pill.x-btn-large {
    float: left;
}

.x-accordion-heading .x-accordion-toggle {
background-color: black !important;
}

.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: #E85546;
color: white;
}

.x-accordion-heading .x-accordion-toggle.collapsed:hover {
background-color: #ffffff;
color: black;
}

.x-accordion-heading .x-accordion-toggle.collapsed {
background-color: #E85546;
color: white;
}

.x-accordion-heading .x-accordion-toggle.collapsed:hover {
background-color: #F58B7F;
color: white;
}

.x-accordion-group {
box-shadow: 0 0.3em 0 0 #ffffff, px 9px rgba(0, 0, 0, 0.3);
background: #ffffff;
}

.masthead-stacked .x-brand {
  width: 30%;
}

.masthead-stacked .custom-headline {
  width: 35%;
  display: inline-block;
}

.masthead-stacked .custom-headline {
    font-family: Halant, sans-serif;
    font-size: 30px !important;
   letter-spacing:  8px;
  text-transform:  uppercase;
}

@media(max-width: 979px){
  .masthead-stacked .custom-headline {
    font-size: 24px !important;
  }
}
@media only screen and (max-width: 480px) {
  .masthead-stacked .custom-headline {
    font-size: 18px !important;
  }

.x-card-outer .x-face-outer.back .x-face-content {
  font-size: 15px;
  line-height: 17px;
}

.x-card-outer .x-face-outer.back .x-face-content p{
  margin-bottom: 1.313em;
}
}

@media ( max-width: 979px ) {
.x-face-graphic img {
width: 100% !important;
}
}
.x-accordion-heading {
    font-size: 16px !important;
}
.x-accordion-inner {
    font-size: 20px !important;
}
.x-navbar .x-container.max.width {
    width: 100%;
}
@media(min-width: 980px){
  .ubermenu-item > a{
    -webkit-box-shadow:inset 0 -7px 7px -.5px rgba(0,0,0,0.8) !important;
    box-shadow:inset 0 -7px 7px -.5px rgba(0,0,0,0.8) !important;
  }
}
body .x-navbar {
    -webkit-box-shadow: inset 0 -6px 6px rgba(0,0,0,0.6), inset 0 6px 6px rgba(0,0,0,0.6) !important;
    box-shadow: inset 0 -6px 6px rgba(0,0,0,0.6), inset 0 6px 6px rgba(0,0,0,0.6) !important;
    padding-bottom: 10px;
    border-bottom: 0;
    margin-top: -1px;
}
#shadow {
    -webkit-box-shadow: inset 0 -6px 6px rgba(0,0,0,0.6), inset 0 6px 6px rgba(0,0,0,0.6) !important;
    box-shadow: inset 0 -6px 6px rgba(0,0,0,0.6), inset 0 6px 6px rgba(0,0,0,0.6) !important;
    padding-bottom: 10px;
    border-bottom: 0;
}

.x-colophon.bottom {
    -webkit-box-shadow: inset 0 -6px 6px rgba(0,0,0,0.6), inset 0 6px 6px rgba(0,0,0,0.6) !important;
    box-shadow: inset 0 -6px 6px rgba(0,0,0,0.6), inset 0 6px 6px rgba(0,0,0,0.6) !important;
    border-top: 0px;
}

.ubermenu-target.ubermenu-item-layout-text_only {
  box-shadow: 0 -7px 7px -0.5px rgba(0, 0, 0, 0.8) inset !important;
}

.ubermenu.ubermenu-main .ubermenu-tab > .ubermenu-target {
    color: #000000;
    box-shadow: 0 -7px 7px -0.5px rgba(0, 0, 0, 0.8) inset !important;
}

.ubermenu-main .ubermenu-submenu .ubermenu-item-header > .ubermenu-target,
.ubermenu-main .ubermenu-submenu .ubermenu-item-header > .ubermenu-target:hover {
    color: #aab5bf !important;
}

.ubermenu-tab-content-panel span.ubermenu-target-title.ubermenu-target-text {
    color: #fff !important;
}

.ubermenu-tab-content-panel  .ubermenu-target.ubermenu-target-with-image span.ubermenu-target-title.ubermenu-target-text,
.ubermenu-tab-content-panel span.ubermenu-target-title.ubermenu-target-text {
    color: #fff !important;
}

.ubermenu-current-menu-item .ubermenu-tab-content-panel  .ubermenu-target.ubermenu-target-with-image span.ubermenu-target-title.ubermenu-target-text
.ubermenu-tab-content-panel  .ubermenu-target.ubermenu-target-with-image:hover span.ubermenu-target-title.ubermenu-target-text,
.ubermenu-tab-content-panel span.ubermenu-target-title.ubermenu-target-text:hover {
    color: #aab5bf !important;
}

Hope that helps.

December 5, 2016 at 8:09 am #1281584

MakkBlakk

Participant

Nope, still stays white …..

December 5, 2016 at 5:10 pm #1282273

Friech

Moderator

Hi There,

Please remove the previous code given, specifically this part;

.ubermenu-main .ubermenu-submenu .ubermenu-item-header > .ubermenu-target,
.ubermenu-main .ubermenu-submenu .ubermenu-item-header > .ubermenu-target:hover {
    color: #aab5bf !important;
}

.ubermenu-tab-content-panel span.ubermenu-target-title.ubermenu-target-text {
    color: #fff !important;
}

.ubermenu-tab-content-panel  .ubermenu-target.ubermenu-target-with-image span.ubermenu-target-title.ubermenu-target-text,
.ubermenu-tab-content-panel span.ubermenu-target-title.ubermenu-target-text {
    color: #fff !important;
}

.ubermenu-current-menu-item .ubermenu-tab-content-panel  .ubermenu-target.ubermenu-target-with-image span.ubermenu-target-title.ubermenu-target-text
.ubermenu-tab-content-panel  .ubermenu-target.ubermenu-target-with-image:hover span.ubermenu-target-title.ubermenu-target-text,
.ubermenu-tab-content-panel span.ubermenu-target-title.ubermenu-target-text:hover {
    color: #aab5bf !important;
}

And add this instead.

.ubermenu-main .ubermenu-submenu .ubermenu-item-header.ubermenu-current-menu-item > .ubermenu-target,
.ubermenu-main .ubermenu-submenu .ubermenu-item-header .ubermenu-target:hover > img.ubermenu-image + span.ubermenu-target-text {
	color: red;
}

This will address the active color and the color when you hover the image and/or the text. Change the red value with the desired color.

Hope it helps, Cheers!

December 6, 2016 at 6:26 am #1283003

MakkBlakk

Participant

In the customize view it all woks fine. The published version does not and has not changed.

The site did crash twice after the updates and had to be redone.

Could this be a wordpress issue, maybe a delay in updating?

December 6, 2016 at 6:35 am #1283016

MakkBlakk

Participant

Problem solved

Cleared the cache and made an edit, re-saved / published and now works

Thank for the help

December 6, 2016 at 7:11 am #1283046

Friech

Moderator

We’re delighted to assist you with this.

Cheers!

Author

Posts

← 1 2

<script> jQuery(function($){ $("#no-reply-1269479 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>