page navigation menu

  • I have been researching the this problem for the last 2 hours with no luck! I am trying to change my top navigation menu (home, about, contact, etc.). I would like it to have a different background color and when you hover over the page, I would like it to change colors.

    My webiste:
    https://www.crazyforsavings.com

    Examples of how I would like it to look:
    https://forthemommas.com/
    https://moneysavingmom.com/

    Would I change it in style.css? I’m not exactly sure where in there I would change it. Here are a few things I think it might be, but again, not sure:

    /* CATEGORY NAVIGATION */
    #catnav { width: 620px; }
    #catnav a:link, #catnav a:visited { display:block; z-index:100; padding:0 20px 0 0; line-height:55px; font: 14px Georgia, Times, Serif; text-decoration: none; color: #fff; }
    #catnav a:hover { text-decoration: underline; }
    #catnav li ul { margin-top: -15px; border-top: 1px solid #d8d8d8; }
    #catnav li ul a:link, #catnav li ul a:visited { padding: 0 0 0 10px; }
    #catnav li ul a:hover { color: #000!important; background: #d8d8d8; }

    or could it be this?

    /* 2.2.1 Drop-down menus */
    .nav li ul { position: absolute; left: -999em; width: 160px; }
    .nav li ul li { border: 1px solid #d8d8d8; background: #FFF; border-width: 0 1px 1px; }
    .nav li ul li a { width:148px; line-height:25px!important; font: 14px Georgia, Times, Serif; font-size:24px; color:#000!important; padding: 0 0 0 10px; }
    .nav li ul ul { margin: -26px 0 0 158px!important; }
    .nav li ul ul li a { }
    .nav li ul li ul li a { }
    .nav li:hover ul ul, .nav li:hover ul ul ul, .nav li:hover ul ul ul ul, .nav li.sfhover ul ul, .nav li.sfhover ul ul ul, .nav li.sfhover ul ul ul ul { left: -999em; }
    .nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li li li li:hover ul, .nav li.sfhover ul, .nav li li.sfhover ul, .nav li li li.sfhover ul, .nav li li li li.sfhover ul { left: auto;}
    .nav li:hover,.nav li.hover { position:static; }

    Thanks for the help!!

Viewing 1 replies (of 1 total)
  • Thread Starter crazyforsavings

    (@crazyforsavings)

    Ok I was able to change the color to how I want it, but now the dropdown menus are changed and I want them white. I also don’t want it underlined pink, I would like to have the whole section highlighted when you scroll over them just like how it looks in the drop down section. What do I need to change?

    /* CATEGORY NAVIGATION */
    #catnav { width: 620px; }
    #catnav a:link, #catnav a:visited { display:block; z-index:100; padding:0 20px 0 0; line-height:55px; font: 14px Georgia, Times, Serif; text-decoration: none; color: #fff; }
    #catnav a:hover { background:#000000; text-decoration: underline; }
    #catnav li ul { margin-top: -15px; border-top: 1px solid #d8d8d8; }
    #catnav li ul a:link, #catnav li ul a:visited { padding: 0 0 0 10px; }
    #catnav li ul a:hover { color: #000!important; background: #d8d8d8; }

    /* PAGES NAVIGATION */
    #pagenav { margin-top: 18px; }
    #pagenav a { background:#9DDA4E; display:block; z-index:100; margin: 0; padding:10px 20px 10px 10px; text-decoration: hover; font-size: 18px; font-family: arial, sans-serif; color: #000; }
    #pagenav li ul a:link, #pagenav li ul a:visited { padding: 0 0 0 10px; font-family: Arial, sans-serif !important; font-size: 14px; border: none; }
    #pagenav li.rss a { padding-right: 25px; }

Viewing 1 replies (of 1 total)
  • The topic ‘page navigation menu’ is closed to new replies.