WordPress.org

Support

Support » Themes and Templates » Highlight current page

Highlight current page

  • Hello,
    I would like the current page link to show in another color, but cant get it working. Here’s my stylesheet css code:

    Main menu
    ----------------------------*/
    #navigation
    {
    	width:100%;
    
    }
    
    #navigation ul
    {
    	list-style-type:none;
    	padding:0;
    	margin:0;
    	display:block;
    
    }
    #navigation li
    {
    	line-height: 3.5em;
    	position:relative;
    	list-style: none outside none;
    }
    #navigation ul ul {
    
    	display: none;
    	position: absolute;
    	top: 0px;
    	left: 0;
    	float: left;
    	width: 150px;
    	z-index: 99999;
    
    }
    
    #navigation ul li:hover > ul {
    	display: block;
    
    }
    /* style all the links */
    #navigation a, #navigation :visited
    {
    	display:block;
    	color:#7c0331;
    	font-size: 1.8em;
    	font-weight: bold;
    	margin-right: 1px;
    	padding: 2px 2px 2px 2px;
    	text-align: left;
    	text-decoration: none;
    
    }
    
    #navigation ul ul a {
    
    	line-height: 1.9em;
    	padding: 8px 8px 8px 10px;
    	display: block;
    	height: auto;
    
    }
    
    #navigation ul ul li, #navigation ul li {
    	width: 100px;
    }
    #navigation ul ul ul, #navigation ul ul {
    	left: 100%;
    	top: 0;
    }
    
    #navigation .current-menu-item a { color: #c6e000; }

    Please can anyone help?

    Bibs

Viewing 12 replies - 1 through 12 (of 12 total)
  • WPyogi
    Forum Moderator

    @wpyogi

    We need to see your site for CSS questions.

    WPyogi
    Forum Moderator

    @wpyogi

    Where is that code? Are you making changes to theme files? That’s not a good idea – as your changes will be lost when the theme is updated.

    WPyogi
    Forum Moderator

    @wpyogi

    It also looks like you need to use .current_page_item as the class in there – judging from this:

    <li class="page_item page-item-18 current_page_item">

    The code is in the style.css

    I have modified with colors and so…

    WPyogi
    Forum Moderator

    @wpyogi

    That’s going to be unfortunate when you need to update the theme – those changes will be overwritten. The better approach is to use a child theme or a custom CSS plugin.

    http://codex.wordpress.org/Child_Themes

    Looks like your CSS file has some errors that are likely causing problems – so check on those – Parse errors are often problematic:

    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fglassy.dk%2Fwebsite-2013%2Fwordpress%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    Then this should work for the current page item:

    .menu li.current_page_item a {
         color: red;
    }

    Thank you 🙂
    I have corrected the errors in the style sheet and validated them, and I have started to create a child-theme to be set up as described in the instruction. But for the actual page I can’t get the code

    .menu li.current_page_item a {
         color: red;
    }

    to work. It simply does not change color….

    I really hope for a reply!

    It ought to simple according to everybody, so I really don’t get, why it does not work here.

    The style.css has been validated now and is OK!

    Hope for help!

    WPyogi
    Forum Moderator

    @wpyogi

    The code on your site is not that – you have:

    #navigation ul .menu li.current_page_item a {
         color: red;
    }

    But that should still work except that it looks like it’s being overridden by this CSS:

    #navigation a, #navigation *:visited {
        color: #7C0331;
        display: block;
        font-size: 1.8em;
        font-weight: bold;
        margin-right: 1px;
        padding: 2px;
        text-align: left;
        text-decoration: none;
    }

    Well that is the code that sort of sets the lay out of the menu, and the one that comes with the theme. Does that mean, that it is not possible?

    WPyogi
    Forum Moderator

    @wpyogi

    I’m not sure what all is going on, but this seems to work:

    .menu li.current_page_item a {
         color: red !important;
    }

    It’s not generally a good idea to use !important unless absolutely necessary, but I’m not sure what else to suggest.

    It looks fine 🙂 Thank you so much for helping 😀

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Highlight current page’ is closed to new replies.