WordPress.org

Ready to get started?Download WordPress

Forums

Highlight current page (13 posts)

  1. bibber
    Member
    Posted 9 months ago #

    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

  2. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    We need to see your site for CSS questions.

  3. bibber
    Member
    Posted 9 months ago #

  4. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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.

  5. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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">
  6. bibber
    Member
    Posted 9 months ago #

    The code is in the style.css

    I have modified with colors and so...

  7. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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;
    }
  8. bibber
    Member
    Posted 9 months ago #

    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....

  9. bibber
    Member
    Posted 9 months ago #

    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!

  10. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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;
    }
  11. bibber
    Member
    Posted 9 months ago #

    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?

  12. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    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.

  13. bibber
    Member
    Posted 9 months ago #

    It looks fine :) Thank you so much for helping :D

Reply

You must log in to post.

About this Topic