Setting Current Page Properties to CSS Navigation

Posted on 2012-08-30
Last Modified: 2012-08-30

I'm slowly developing a page in Dreamweaver that will become a Wordpress theme and it's my first time trying to do this so I'm running into a few problems.

This time I want to be able to set the properties of the Navigation so that the page the visitor is currently on will have different properties from the other links.

This is my CSS so far and it's working okay, what I want is for the bottom-border to be the same as Active but static to highlight the current page.

#navigation {
	float: right;
#navigation a {
	color: #FFF;
	text-align: center;
#navigation a:hover {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #66bc29;
#navigation a:active {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #66bc29;
#header_top {
	background-image: url(images/header_bg.png);
	background-repeat: repeat-x;
	height: 107px;
.logo {
    float: left;
    padding-top: 27px;
    padding-left: 18px;
ul {
li {

Open in new window

This never used to be a problem when I used to create new HTML pages but now I'm only building one page to be used a template I don't know the best way to do it.

Thanks in advance
Question by:Tezdread
    LVL 70

    Accepted Solution

    This time I want to be able to set the properties of the Navigation so that the page the visitor is currently on will have different properties from the other links.

    You're having trouble with this because it is not a pure CSS issue.  You need to use some form of scripting to check to see which page you are on and change the class dynamically.

    WordPress builds this function into its internal menu generator.  I would suggest that you not spend a whole lot of time trying to figure this out this way.  Instead, build Custom Menu support into the theme and after the menu is generated, alter the CSS so that items display the way you want them to.
    LVL 1

    Author Closing Comment

    Ah okay that sounds like it should make it easier.

    Thank you, I'm sure I'll have more questions about getting my current HTML & CSS into a workable theme :)
    LVL 70

    Expert Comment

    by:Jason C. Levine

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
    In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now