• bittenbyazebra

    (@bittenbyazebra)


    On this website here: https://courses.destructivelyfit.com, I cannot get the “active page” menu tab color to change.

    This is the code I have pasted into the custom CSS:

    a:link {color:#4f2c15;} /* unvisited link */
    a:visited {color:#39054d;} /* visited link */
    a:hover {color:#97862c;} /* mouse over link */
    a:active {color:#000000;} /* selected link */

    /** Global Anchors Hover */
    .menu ul a:focus,
    .menu ul a:hover,
    .menu ul a:active {
    color: #97862c;
    }

    #header {
    width: 100%;
    background: transparent;
    padding: 20px 0;
    }

    Many thanks in advance!

    Bob

Viewing 4 replies - 1 through 4 (of 4 total)
  • wen.wainwright

    (@wenwainwright)

    I just looked at your site and the colors are changing when I hover over them – assuming you mean the menu up at the top of the page? And the current page and visited page are different colors than the unvisited pages and the hover colors are different than those. If you have already resolved this issue, please mark it as resolved. If you haven’t fixed the issue then maybe you could try explaining it again.

    Thread Starter bittenbyazebra

    (@bittenbyazebra)

    Right now the menu tabs are all dark purple. When I hover over them, they turn a greenish-yellow color. When I select a page I want to visit, the title of the page tab (“About,” “Register,” “My Account,” etc.) all stay the same color.

    If I click on about and go to that page, I would like the page (i.e. the “active page”) to be a different color — let’s say hunter green — to let people know that they are on that page.

    When I click on “About,” I would go to the “about” page and the menu title/link would be green and all the others would be the deep purple. If I move to “Register,” the “About” page menu/tab (all and the others) would go back to deep purple and the “About” page would be forest green.

    Is that clearer? ??

    wen.wainwright

    (@wenwainwright)

    O.K. It’s all doable in the CSS. Without your files I can’t give you exact code but if you look at the style.css that came with a theme (I’m using TwentyThirteen as an example) you can see that it starts off with the most basic styles like:

    a {
    	color: #ca3c08;
    	text-decoration: none;
    }

    If you scroll pretty far down you’ll see:

    .nav-menu li a {
    	color: #141412;
    	display: block;
    	font-size: 15px;
    	line-height: 1;
    	padding: 15px 20px;
    	text-decoration: none;
    }

    So you can see that later on the style of “a” is changed to be something specific to navigation menu li items. Everyone will tell you to use Firebug or something like that for help in editing CSS (or to go to a CSS forum) – and it (firebug, etc.) is the way to go, but it can be confusing when you first start using it so just hang in there and expect to have to play around a bit to get used to it.

    Thread Starter bittenbyazebra

    (@bittenbyazebra)

    Hey Wen. I’ve been coin gym best. The CSS for the theme I’m using (Cave) is a bit different. Here it is and let me know if you have any thoughts. I’m literally banging my head against the wall as I type….

    [ Please use a https://pastebin.com/ link to that CSS or just post a link to your style sheet. ]

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘"Active Page" menu tab color.’ is closed to new replies.