Jump to content

Archived

This topic is now archived and is closed to further replies.

margie

insert down arrow under current menu item Navi Bar

Recommended Posts

margie

Hi,

 

Using iBlogPro6 (version 1.2) and WP version 4.0

 

I have the following css to make the background color of the current menu item a bit darker:

 

#site .navi-right ul li.current-menu-item a {

  background-color: #bbbfc4;
  opacity: .7;

}

 

What I would like to do is put a small downward-pointing icon (arrow) under the list item to identify which item is current.  Any suggestions as to how I would place the arrow centered under the menu item?  The arrow is just a .gif, created in Adobe Photoshop.  Thank you so much for your help.

 

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

If I understand correctly, you want to include an arrow image on menu items that are the current menu item or page. To do this you're going need to use the .current class you have above and add your image via background or background-image property.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Viktoriya
      By Viktoriya+
      Hi, I followed this post to center logo using it as an item in the menu.  
       
      Now, I just have to figure out 3 things:
      1. How to remove the hover on for the logo.  Ideally, I would like to replace the background with an underline, and I can do this with this code, but it applies to everything including the logo (it acts funny: logo in the menu disappears when it is on the current page and then jumps when it is hovered on)
      .sf-menu > li > a:hover, .sf-menu > li.sfHover > a, .sf-menu > li.current-menu-item > a, .sf-menu > li.current_page_item > a {
          background:#FFFFFF !important; border-bottom: 2px solid #376092;
      }
      2. How to spread the menu items
      3. How to just have the logo with the mobile menu activated for mobile use
       
      Thanks for your help! 
    • BentleyD
      By BentleyD+
      Hey guys,
       
      I am working on http://theeargazm.com . To make the flipper arrow border color match the website I changed the css coinciding with it, but it also change the hyperlink color on the website. Since I chose black, the hyperlinks dont show up as hyperlinks. Can I separate the two?
    • flourishdesignstudio
      By flourishdesignstudio+
      I'm working on a site, and am struggling with changing the color of the dropdown arrow in the nav menu. You'll see there is a faint arrow next to shop. But, I'd like it to be darker. http://erinmckennanowak.com/home Thanks in advance for the help!
×