Hard coded Menu, Current page highlighted

Community Forums Forums Design Tips and Tricks Hard coded Menu, Current page highlighted

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Tom 6 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #105785

    Nick_osprey
    Member
    Post count: 2

    Hi,

    I hope someone can help me out urgently.

    I’ve created a hard coded navigation in my pages, which goes across numerous pages. I’m wanting to make the current page highlight, as this would do for a menu created using WordPress Menus. Ive tried all sorts to get it to work, even using jquery href to create a custom class which didn’t work for me. If someone has done this before and has a quick fix would be great, below is the code to my navigation.

    <ul id=”second-li-items”>
    <li class=”secli”>Babies
    <li class=”secli”>Toddlers
    <li class=”secli”>Nursery
    <li class=”secli”>EYFS Curriculum
    <li class=”secli”>Policies
    <li class=”secli”>News
    <li class=”secli”>Admissions
    <li class=”secli”>Your Contacts

    Thanks

    Nick

    #105987

    Tom
    Participant
    Post count: 983

    Please tell me if I got this right. Or not.

    If the pages are served by WordPress (that’s the reason you’re here, right?) ….

    You have a limited, static array of menu items, each representing a PHP page.
    Each menu link also contains a unique class.
    Have each of your *.php pages define a unique custom body class.
    (in this example I just used WordPress pages with custom column classes.)
    Create a CSS selector for each static PHP page/menu-link pair.

    PAGE BODY CLASSES:

    home
    columns
    sample
    contact

    MENU HTML:

    <ul id="second-li-items">
    <li class="secli"><a class="home" href="http://keypresswp.com/genesislab/">Home</a></li>
    <li class="secli"><a class="columns" href="http://keypresswp.com/genesislab/columns/">Columns</a></li>
    <li class="secli"><a class="sample" href="http://keypresswp.com/genesislab/sample/">Sample</a></li>
    <li class="secli"><a class="contact" href="http://keypresswp.com/genesislab/contact/">Contact</a></li>
    </ul>

    CSS:

    .home a.home,
    .columns a.columns,
    .sample a.sample,
    .contact a.contact {
        color: blue !important;
        background: yellow !important;
        border: 2px solid lime !important;
    }

    Working example (temporary):

    http://keypresswp.com/genesislab/columns/

    image: https://i.cloudup.com/lGQjVLJ1dG.jpg
    Fixed HTML Menu in WordPress


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.