WordPress.org

1. pgsilva
   Member
   Posted 10 months ago #

   Hey all, first time asking for help, hope you can!

   allysonlongshore.com/blog is the page I'm working on. I've been able to replace the header pic, and create a rollover and link it back to the blog by making changes to header.php and functions.php in my child theme, but I can't seem to make changes to the menu.

   I want to: eliminate the hover effect (gray box), and create one menu item with no effects to link back to the main site, allysonlongshore.com

   I've tried changing style.css in the child theme:

   #access {
   background: #ffffff;
   display:inline;
   font-weight:bold;
   float: left;
   margin: 0 auto;
   width: 940px;
   }

   #access a {
   color: #000;
   display: block;
   line-height: 38px;
   padding: 0 10px;
   text-decoration: none;
   }

   #access ul li.current_page_item > a,
   #access ul li.current-menu-ancestor > a,
   #access ul li.current-menu-item > a,
   #access ul li.current-menu-parent > a {
   color:#000;
   }

   #access ul ul :hover > a {
   background:none;
   color: #000;
   }

   * html #access ul li.current_page_item a,
   * html #access ul li.current-menu-ancestor a,
   * html #access ul li.current-menu-item a,
   * html #access ul li.current-menu-parent a,
   * html #access ul li a:hover {
   color: #000;
   background:none;
   }

   But these aren't working. Where can I make changes to make the menu look and link to where I want it?

   btw, no working knowledge of php but I learn fast.

   Thanks!

2. peredur
   Member
   Posted 10 months ago #

   This is the rule that sets the background to black on a hover:

   #access li:hover > a,
   #access ul ul *:hover > a
   {
       color: #FFFFFF;
   }

   In this case it's just the first one (#access li:hover > a), I think.

   So you probably just want to override it in your child theme style sheet with:

   #access li:hover > a
   {
       color: #000000;
   }

   I haven't tested it, but it should work.

   To make sure this only happens on your blog pages, you'll probably want to do something like:

   body.blog #access li:hover > a
   {
       color: #000000;
   }

   (assuming that you want to restrict it to your blog pages, of course).

   And you'll probably want to get rid of all the other stuff you've changed in case it has unforeseen consequences elsewhere.

   Actually, I think I'd rather do something on hover, so that your users know its a link. Underline on hover, perhaps? But that's just my opinion...

   HTH

   PAE

3. peredur
   Member
   Posted 10 months ago #

   Aaargh!!

   Sorry. Copy and paste error.

   The rule you want to change is:

   #access li:hover > a,
   #access ul ul *:hover > a
   {
   background: none repeat scroll 0 0 #333333;
   color: #FFFFFF;
   }

   And you probably want to finish up with:

   body.blog #access li:hover > a
   {
   background: none repeat scroll 0 0 #000000;
   color: #FFFFFF;
   }

   Following my impeccable logic but lousy coding in my previous post.

   Sorry

   PAE

4. pgsilva
   Member
   Posted 9 months ago #

   Thanks! I'll give this a try. Stupid me, I forgot I could make some of my changes through the dashboard. Making extra work for myself!!

   Thanks again!

Reply

You must log in to post.