WordPress.org

Ready to get started?Download WordPress

Forums

A CSS query. (2 posts)

  1. CaptainSEO
    Member
    Posted 3 years ago #

    I am using a modified theme and I need a little help with CSS.

    On the top navigation, when I move my mouse over the nav it changes colour which is nice, but what I want it to do is the active page to stay highlighted.

    The theme developer gave me this, but I don't know what to do with it.

    ul#menu li.current_page_item { }
    
    Here is the rest of the CSS for the menu. it's the blue colour #0099cc from hover I wish to show in the nav for the active page. I pasted that in, but wasn't enough.
    
    #menu-wrap {
    	position:absolute;
    	height:30px;
    	right:0;
    	margin-top:-20px;
    	margin-bottom:-20px;
    	display:inline;
    	top:50%;
    	bottom:50%;
    	clear:both;
    	z-index:1;
    }
    ul#menu {
    	position:relative;
    	margin-left:10px;
    }
    ul#menu li {
    	position: relative;
    	display: inline;
    	float: left;
    	margin-left:10px;
    }
    ul#menu li.current_page_item a { color: #fff; }
    ul#menu li a {
    	display:block;
    	height: 100%;
    	padding:0 10px;
    	text-align: left;
    	line-height: 40px;
    	font-size:12px;
    	color:#fff;
    	font-weight:normal;
    	text-transform:uppercase;
    	text-decoration: none;
    	background: transparent url(styles/default/opacity50.png) left top repeat scroll;
    }
    * html ul#menu li a { display: inline-block; }
    ul#menu li a:hover {
    	color: #fff;
    	background:#0099cc;
    }
    ul#menu ul {
    	visibility:hidden;
    	position:absolute;
    	left:0;
    	top:40px;
    	z-index:1;
    	padding-top:5px;
    	width: 160px;
    }
    ul#menu li li {
    	display:block;
    	width: 100%;
    	margin:0;
    	cursor:pointer;
    	background: transparent url(styles/default/opacity70.png) left top repeat scroll;
    	border-bottom:1px solid #111;
    }
    ul#menu li li a {
    	height:auto;
    	color:#ccc;
    	line-height:30px;
    	font-weight:normal;
    	background:none;
    	text-transform:none;
    	font-size:12px;
    	margin:0;
    }
    ul#menu li li a:hover {
    	color: #0099cc;
    	background:#000;
    }
    
    ul#menu ul ul {
    	position:absolute;
    	left:100%;
    	top:-1px;
    	padding:0;
    	width: 100%;
    	visibility:hidden;
    	z-index:2;
    	border:1px solid #111;
    }
  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    these are css styles for the menu;

    is this already part of the style.css file of your theme?

    if not, you could try and add it at the end of style.css;

    btw:
    this line from the above should highlight a active/current page link:

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

    with css problems, it is best if you could post a link to the live site with the issue visible.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.