Forums

WordPress › Support » Themes and Templates

Dynamic Menu Highlight CSS Problem (10 posts)

  1. HonestWorker
    Member
    Posted 7 years ago #

    Hi there,
    I took this horizontal navigation from here: http://css.maxdesign.com.au/listamatic/horizontal34.htm
    and built it into my blogg following this Instructions:
    http://codex.wordpress.org/Dynamic_Menu_Highlighting.

    The result you can see here: http://www.bazarow.de/blogg/

    Now: Before I made it dynamic it worked fine, as you can see under the categorie "gallerie" (it works there well, for it's manually insertet code for the "$current" page in pixelposttemplate).

    But if you see on the dynamic navigation in the WordPressblog, the font doubles it size, when you hover the current's page button.

    This is due to the css-style of the navigation in the last part, where you bring in the variable $current.

    Here you have the parts of the code that are important:

    <?php
    if ( is_home() ) { $current = 'one'; }
    elseif ( is_page('gallerie') ) { $current = 'two'; }
    elseif ( is_single('14') ) { $current = 'three'; }
    elseif ( is_single('13') ) { $current = 'four'; }
    ?>
    <style type="text/css" media="screen">
    #navcontainer
    {
    font-family: Arial,Sans-Serif;
    margin: 0 auto;
    width: 70%;
    border-bottom: 1px solid #ddd;
    }

    #navlist
    {
    width: 60%;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    text-indent: 0;
    list-style-type: none;
    }

    #navlist li
    {
    padding: 0;
    margin: 0;
    text-indent: 0;
    display: inline;
    }

    #navlist li a
    {
    letter-spacing: -1px;
    text-decoration: none;
    color: #ccc;
    font-size: 1em;
    padding: 0 2px;
    border-top:none;
    }

    #navlist li a:hover,#navlist a<php echo $current; ?>
    {
    color: #E60003;
    border-top: none;
    font-size: 2.0em;
    }
    #<php echo $current; ?>
    {
    color: #E60003;
    border-top: none;
    font-size: 2.0em;
    }
    #navlist a#<?php echo $current; ?> { color: #E60003;}
    </style>
    </head>

    <body>

    <div id="navcontainer"
    <ul id="navlist";
    <li id="one"blog

    2. <li id="two"gallerie

    <li id="three"error

    <li id="four">error message

    </div>

    Can anyone help me with this? I mean to make the font not getting sized the second time when hovering the current page's link? I'm lost!

    Thanks!

  • moshu
    Member
    Posted 7 years ago #

    Well, you have the font-size "1em" for navlist li a and "2em" for hover...

  • HonestWorker
    Member
    Posted 7 years ago #

    I've tried editing it - it didn't show any effect.
    Anyhow, i'm pretty sure the mistake is in this part:
    #navlist li a:hover,#<?php echo $current; ?>, #navlist a#<?php echo $current; ?>
    {
    color: #E60003;
    background-color:white;
    border-top: none;
    font-size: 2.0em;
    }

    So when I got it right, the navigation sizes the font 2 times because of the 2 #<?php echo $current; ?> situated in this style tag.
    I've tried, but I can't figure it out: Either the "current" is not doublesized when loaded or it's like this - no way to let the font only be sized ones :( ARGH!!!

  • HonestWorker
    Member
    Posted 7 years ago #

    Btw, the code looks like this now:

    <head>

    <?php
    if ( is_home() ) { $current = 'one'; }
    elseif ( is_page('gallerie') ) { $current = 'two'; }
    elseif ( is_single('14') ) { $current = 'three'; }
    elseif ( is_single('13') ) { $current = 'four'; }
    ?>
    <style type="text/css" media="screen">
    #navcontainer
    {
    font-family: Arial,Sans-Serif;
    font-size: 1em;
    margin: 0 auto;
    width: 70%;
    border-bottom: 1px solid #ddd;
    }

    #navlist
    {
    width: 60%;
    text-align: center;

    margin: 0 auto;
    padding: 0;
    text-indent: 0;
    list-style-type: none;
    }

    #navlist li
    {
    padding: 0;
    margin: 0;
    text-indent: 0;
    display: inline;
    }

    #navlist li a
    {
    letter-spacing: -1px;
    text-decoration: none;
    color: #ccc;
    padding: 0 2px;
    border-top:none;
    }

    #navlist li a:hover,#<?php echo $current; ?>, #navlist a#<?php echo $current; ?>
    {
    color: #E60003;
    background-color:white;
    border-top: none;
    font-size: 2.0em;
    }
    </style>
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php wp_head(); ?>
    </head>
    <body>
    <div id="navcontainer">
    <ul id="navlist">
    <li id="one">blog

    • <li id="two">gallerie

    <li id="three">error

    <li id="four">error message

    </div>

  • moshu
    Member
    Posted 7 years ago #

    I would separate these two statements:
    #navlist li a:hover,#<?php echo $current; ?>, #navlist a#<?php echo $current; ?>
    Remember, CSS stands for "cascading" style sheets :) so the link "blog" when I go the the site once it is doubled in size because being the current link and then second time by hovering (2x2=4)

  • HonestWorker
    Member
    Posted 7 years ago #

    Ok, I already thought that was the problem, but though I tried many constellations: When I delete the #<?php echo $current; ?> tag, its not doublesized when current page loaded.
    So I know what the problem is but I cant solve it :(

  • moshu
    Member
    Posted 7 years ago #

    As I said above: do not put those two things together! Give them separate definitions. I think it should work. Did you try it?

  • Joshua Sigar
    Member
    Posted 7 years ago #

    What you have
    #navlist a#<?php echo $current; ?>

    What it should be
    #navlist li#<?php echo $current; ?> a

    ...and so on

  • HonestWorker
    Member
    Posted 7 years ago #

    HALLELUJA!! Thanks alot alphaoide, that was the snippet I needed. Works fine now. Thanks!

  • Ptryk
    Member
    Posted 6 years ago #

    found a plugin of interest w/r/t dynamic menu's includes highlighting, multiple levels.. or not....
    http://www.adsworth.info/wp-pagesnav

    • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags

    No tags yet.