Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    47
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Highlighting Current Page in menu

    Can somebody help me out with this?
    I am using Egesto as my theme, and automatically it came with a script that would highlight the current page in the top menu.
    i think the code is one of these lines..

    Code:
    <?php if ( has_nav_menu( 'main-menu' ) ) { ?>
    <?php wp_nav_menu( array( 'theme_location' => 'main-menu', 'menu_class' => 'mainnav superfish' ) ); ?>
    Anyways, I wanted to make a customized drop down menu. So I removed that top line of code, and put in a line of code to refer to a plugin I downloaded. In the plugin is the HTML for the customized drop down menu...however, the current page is no longer highlighted in the menu..

    I tried looking this up, seeing something about CSS and giving each link an id, and putting the id in the body tag of each page...HOWEVER, i can not find a body tag for each of my pages, as it is only in the HEADER of the overall website..

    Can anyone help me with this?

    THANK YOU!

  • #2
    New Coder
    Join Date
    Jan 2010
    Posts
    47
    Thanks
    1
    Thanked 0 Times in 0 Posts
    bummpp

  • #3
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    Don't bump your thread so soon, it's only been a day. I'm guessing you're using Wordpress since you're using a theme and don't seem to know much about making a site from scratch but it looks like you're taking the long way around this. I use a highlight on the current page on the menu for a lot of my sites and it's pretty simple. Usually, the menu is in <ul> and I give the current page an id like this:
    <ul>
    <li>Not Current Page</li>
    <li>Not Current Page</li>
    <li id="currentPage">Current Page</li>
    <li>Not Current Page</li>
    </ul>

    Then in the css I give #currentPage a background image or highlight of some kind. No PHP, plug-ins, or anything else involved.

  • #4
    New Coder
    Join Date
    Jan 2010
    Posts
    47
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by cineweekly.com View Post
    Don't bump your thread so soon, it's only been a day. I'm guessing you're using Wordpress since you're using a theme and don't seem to know much about making a site from scratch but it looks like you're taking the long way around this. I use a highlight on the current page on the menu for a lot of my sites and it's pretty simple. Usually, the menu is in <ul> and I give the current page an id like this:
    <ul>
    <li>Not Current Page</li>
    <li>Not Current Page</li>
    <li id="currentPage">Current Page</li>
    <li>Not Current Page</li>
    </ul>

    Then in the css I give #currentPage a background image or highlight of some kind. No PHP, plug-ins, or anything else involved.

    thanks, but, how do i highlight only one page at a time? i only have one menu in html form, not one on every single page

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    19
    Thanks
    0
    Thanked 4 Times in 4 Posts
    link site please

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I do have the same problem. I want to know how to highlight the current page in the Menu bar. Is it possible just by using HTML & CSS. How can I do it???

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by nischalinn View Post
    I do have the same problem. I want to know how to highlight the current page in the Menu bar. Is it possible just by using HTML & CSS. How can I do it???
    I take a similar approach to that already mentioned by cineweekly. I copy the nav bar between pages and just amend the current page to use a class "current" (and set its href to "#"). Within the css I change the text colour and cancel the link cursor for this class. Here's a whole page:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
        <title><!-- Insert your title here --></title>
        <style type="text/css">
            ul#navList { padding: 0; margin: 0.5em 0 1em 0; list-style-type: none; float: left;
                width: 100%; color: #fff; background-color: #036;
            }
            ul#navList li { display: inline; text-align:center; }
            ul#navList li a { float: left; color: #fff; background-color: #036;
                padding: 0.2em 1em; text-decoration: none; border-right: 1px solid #fff;
            }
            ul#navList li a:hover {
                background-color: #369; color: #fff;
            }
            #navList .current > a {
                pointer-events: none; cursor: default; color: lightgray;
            }
            #navList .current > a:hover {
                color: lightgray; background-color: #036;
            }
        </style>
        
    </head>
    <body>
        <h1>Andy's Home Page</h1>
    	<ul id="navList">
    		<li class="current"><a href="#">Home</a></li>
    		<li><a href="GoSearch.html">Go Search</a></li>
    		<li><a href="Sorting.html">Sorting</a></li>
    		<li><a href="ReadingXML.html">Reading XML</a></li>
    	</ul>
    </body>
    </html>
    It is possible to write some JavaScript to do this automatically (to examine the current window.location and compare it to the href addresses in the nav bar and add the class "current" to the current page link).

    I'm not sure whether it's possible to do this with just css - I kinda doubt it
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    The problem with these methods I think is if you're using a server side include for your menu code.

    Here might be a work around using php found on the wordpress site. Regardless if you're using wordpress or not, you can use this small bit of code and modify to suit your needs.

    I think the method 1 is the one you would need. The php script checks the page title, and based on this, inserts the needed class/id and CSS to highlight the list item.

    Hope that helps.
    Teed

  • #9
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    that link posted by teedoff seems overly complicated in how it says the css must be on each page.

    if your site is static - ie a html page for each well, page output, then you need to make the link in the nav menu have the class='current' assigned to it. then in your css use the type of css shown earlier this thread.

    if your site is dynamic, you need only have each script find out what its name is . Then in your script output, you can say;

    (pseudo code)
    if ( $script_name eq 'whatever' ) {
    print qq( <li class='current'>highlighted menu link</li> );
    } else {

    print qq( <li>non-highlighted menu link</li> );
    }

    Please ignore the coding discrepancies eg print qq(); as this is perl code and I don't yet do much php.


    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by bazz View Post
    that link posted by teedoff seems overly complicated in how it says the css must be on each page.

    if your site is static - ie a html page for each well, page output, then you need to make the link in the nav menu have the class='current' assigned to it. then in your css use the type of css shown earlier this thread.

    if your site is dynamic, you need only have each script find out what its name is . Then in your script output, you can say;

    (pseudo code)
    if ( $script_name eq 'whatever' ) {
    print qq( <li class='current'>highlighted menu link</li> );
    } else {

    print qq( <li>non-highlighted menu link</li> );
    }

    Please ignore the coding discrepancies eg print qq(); as this is perl code and I don't yet do much php.


    bazz
    Well the second method has the css in one document. Either of these methods seem to address the issue of having a ssi menu in the document, which must take into account that one cannot simply use the id/class="current" method.
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •