WordPress.org

Ready to get started?Download WordPress

Forums

Highlight current page (13 posts)

  1. bibber
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year ago #

    We need to see your site for CSS questions.

  3. bibber
    Member
    Posted 1 year ago #

  4. WPyogi
    Forum Moderator
    Posted 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year ago #

    The code is in the style.css

    I have modified with colors and so...

  7. WPyogi
    Forum Moderator
    Posted 1 year 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 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic