[Theme: Expound] Color of current page menu button

  • Resolved Andrew Chapman

    (@andrew-chapman)


    11 years, 1 month ago

    Hi, it’s my first day with a Child Theme. I have succeeded in changing the color of the menu bar, of the text, and of the menu buttons (if that’s the word) when I am not on that page, with the following, which I have taken from other threads, without really understanding much of what I am doing:

    /* Menu bar background */
.navigation-main, .navigation-main ul, .navigation-main li {background:#e2e2e2;
}

/* Menu bar text */
.navigation-main a {
  color: #180423;
  padding: 10px;
  position: relative;
}

/* Menu color when not on page */
.navigation-main li {
  background: #c3a1e2;
}

/* Menu color when hovering and not on page */
.navigation-main li:hover {
  background: #a76ce2;
}

    I can’t work out how to change the color of the current page menu button, either when hovering or not. I tried Firebug, but that just brings up the above from the style.css in my child theme.

    https://womeninthechurch.co.uk/

    Would appreciate any help,

    Andrew

Viewing 1 replies (of 1 total)
  • Thread Starter Andrew Chapman

    (@andrew-chapman)

    Seems to be sorted:

    /* current page menu button color then hover color */
.navigation-main ul > .current_page_item,
.navigation-main ul > .current-menu-item,
.navigation-main ul > .current-post-ancestor,
.navigation-main ul > .current-menu-ancestor,
.navigation-main ul > .current-menu-parent,
.navigation-main ul > .current-post-parent {
  background: #a499c6;
}
.navigation-main ul > .current_page_item:hover,
.navigation-main ul > .current-menu-item:hover,
.navigation-main ul > .current-post-ancestor:hover,
.navigation-main ul > .current-menu-ancestor:hover,
.navigation-main ul > .current-menu-parent:hover,
.navigation-main ul > .current-post-parent:hover {
  background: #9f64c9;
}

/* triangle pointer */
.navigation-main ul > .current_page_item a:after,
.navigation-main ul > .current-menu-item a:after,
.navigation-main ul > .current-post-ancestor a:after,
.navigation-main ul > .current-menu-parent a:after,
.navigation-main ul > .current-post-parent a:after {
  content: '';
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 6px solid #a499c6;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
  z-index: 9995;
}

/* triangle pointer hover */
.navigation-main ul > .current_page_item:hover a:after,
.navigation-main ul > .current-menu-item:hover a:after,
.navigation-main ul > .current-post-ancestor:hover a:after,
.navigation-main ul > .current-menu-ancestor:hover a:after,
.navigation-main ul > .current-menu-parent:hover a:after,
.navigation-main ul > .current-post-parent:hover a:after {
  border-top-color: #9f64c9;

    including the triangle pointer!

    Andrew

Viewing 1 replies (of 1 total)
  • The topic ‘[Theme: Expound] Color of current page menu button’ is closed to new replies.