navmenu CSS properties not working

  • Resolved lucid_design

    (@lucid_design)


    14 years, 5 months ago

    I have a nav bar of top level categories in my header (upper right edge of page). There are 7 items in the list. They are displaying inconsistent a:link, a:hover, and a:visited properties.

    Below is the section of my css that handles navmenu styles. I will also show the section in my header.php file where the navmenu appears.

    I’m using Black and White theme, and have modified its architectural structure.

    My blog is: https://www.albereo.com/melanie

    Here is CSS code:

    #navmenu a:link {
    text-decoration: underline;
    color: FFB915;
    }
    #navmenu a:hover {
    text-decoration: none;
    color: BD6406;
    }
    #navmenu a:visited {
    color: FFB915;
    }
    #navmenu ul{
    list-style-type: none;
    list-style-image: none;
    }
    #navmenu ul li{
    display: inline;
    padding: 0 0 0 10px;
    }
    #navmenu ul li a:link {
    text-decoration: underline;
    color: FFB915;
    }
    #navmenu ul li a:hover {
    text-decoration: none;
    color: BD6406;
    }
    #navmenu ul li a:visited {
    text-decoration: underline;
    color: FFB915;
    }

    Here is header.php code:

    <div id=”navmenu”>

    </div>

    Thanks for any help you can offer.

Viewing 4 replies - 1 through 4 (of 4 total)

  • as i can only assume what ‘inconsistant’ means, i think it has to do that the :visited style is defined after the :hover style and makes the links that you have already visited kind-of unchanged on hover.

    have a look at this:
    https://www.w3schools.com/CSS/css_pseudo_classes.asp

    Thread Starter lucid_design

    (@lucid_design)

    That was the solution for the navmenu links.

    There’s a second issue that I thought this would clear up but didn’t. The :link and :visited colors are the same throughout my css style. Yet, the category and tag links that accompany each post is showing different :link and :visited colors. (The :link is yellow and the :visited is ivory; both should be ivory).

    Here is my css code again with all the link preferences:

    h1 a{

    color: #FFB915;

    text-decoration: underline;}

    h1 a:visited{

    color: #FFB915;

    text-decoration: underline;}

    h1 a:hover{

    text-decoration: none;

    color: #FFB915;}
    a:link{

    text-decoration: underline;

    color: #FFB915;}
    a:visited{

    text-decoration: underline;

    color: #FFB915;}

    a:hover{

    text-decoration: none;

    color: #FFB915;}

    p{

    padding: 10px 0 0 0;}

    #wrapper{

    float: center;

    margin: 0 auto 0 auto;

    width: 990px;

    text-align: left;}

    #header{

    float: center;

    width: 990px;

    height: 90px;

    color: #FFB915;

    background: url(images/header_logo_web.jpg); }

    #htitle{

    float: left;

    margin: 17px 10px 0 0;}

    #desc{

    float: left;

    color: #000000;

    margin: 25px 10px 0 0;}

    #navmenu{

    float: right;

    margin: 0px 10px 0;}

    #navmenu a:link {

    text-decoration: underline;

    color: FFB915;}

    #navmenu a:visited {

    text-decoration: underline;

    color: FFB915;}

    #navmenu a:hover {
    text-decoration: none;

    color: FFB915;}

    #navmenu ul{

    list-style-type: none;

    list-style-image: none;}

    #navmenu ul li{

    display: inline;

    padding: 0 0 0 10px;}

    #navmenu ul li a:link {

    text-decoration: underline;

    color: FFB915;}

    #navmenu ul li a:visited {

    text-decoration: underline;

    color: FFB915;}

    #navmenu ul li a:hover {
    text-decoration: none;

    color: FFB915;}

    #container{

    float: center;

    width: 990px;

    margin: 0 0px 0 0;

    background: #000000;

    }

    #postcon{

    margin: 10px 0;}

    .post{

    padding: 10px 20px;}

    .post a{

    color: #E9D5A0

    text-decoration: underline;
    }
    .post a:visited{

    color: #E9D5A0;

    text-decoration: underline;}

    .post a:hover{

    color: #E9D5A0;

    text-decoration: none;}

    .post h2{

    font-family: Bell, Times, Times New Roman;

    font-size: 20px;

    color: #FFB915;

    line-height: 28px;}

    .post h2 a{

    color: #FFB915;}

    .entry{

    line-height: 18px;}

    .postmetadata{

    float: center;

    border-top: 0px solid #7F0303;

    padding: 0px 40px 40px 0px;

    color: #000000;}

    .metabox{

    float: center;

    width: 80%;

    line-height: 20px;

    margin: 15px 0;

    padding: 5px 0px 5px 5px;

    background: #000000;

    }

    .navigation{

    clear: left;

    padding: 10px 10px;

    background: url(images/top-nav-bar.jpg);

    color: #340707;

    width: 970px;

    height: 15px;}

    .commentlink{

    padding: 2px 0 2px 20px;

    background: 000000;

    margin-left: 10px;}

    .editcomment{

    padding: 2px 0 2px 20px;

    background: 000000;

    margin-left: 10px;}

    .catlink{

    padding: 2px 0 2px 20px;

    background: 000000;
    }

    .taglink{

    display: block;

    padding: 2px 0 2px 20px;

    background: 000000;}

    /*Tags

    —————————————————–*/

    .tags,

    #tag_cloud {

    margin: 0 0 15px;}

    .tags {

    text-align: left;}

    .tags a,

    #tag_cloud a {

    color: #AAA;

    margin: 0 2px;}

    .cle{

    clear: both;}

    /*Footer

    —————————————————–*/

    #footer{

    clear: both;

    float: center;

    text-align: center;

    width: 990px;

    line-height: 20px;

    margin: 15px 0;

    padding: 0 0 0 0px;}

    #footermenu{

    float: center;

    margin: 0px 0 0 0;}

    #footermenu a:link {

    text-decoration: underline;

    color: 340707;}

    #footermenu a:visited {

    text-decoration: underline;

    color: 340707;}

    #footermenu

    a:hover {
    text-decoration: none;

    color: 340707;}

    #footermenu ul{

    list-style-type: none;

    list-style-image: none;}

    #footermenu ul li{

    display: inline;

    padding: 0 0 0 20px;}

    #footermenu ul li a:link {

    text-decoration: underline;

    color: 340707;}

    #footermenu ul li a:visited {

    text-decoration: underline;

    color: 340707;}

    #footermenu ul li a:hover {

    text-decoration: none;

    color: 340707;}

    here is a semicolon missing after the color code:

    .post a{

	color: #E9D5A0

	text-decoration: underline;
}

    btw: there is no need to post the style codes as style.css (and all styles) is easily accessible with a link to your site.

    Thread Starter lucid_design

    (@lucid_design)

    That cleared up the issue.
    Many thanks alchymyth.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘navmenu CSS properties not working’ is closed to new replies.