WordPress.org

Support

Support » How-To and Troubleshooting » Icon next to active page in navbar

Icon next to active page in navbar

  • I am sure this is a very newbie type question but I cannot find out how to add an icon to the active page. Basically what I am looking to do is add a logo to whichever page is active in the navbar. I’m sure there is probably a plugin to do this I just haven’t had luck in finding the correct one. Thanks for any help.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Evan Herman
    Participant

    @eherman24

    Please provide a link to your site.

    At the moment it is running locally on my machine. The customer wants a small version of the logo to follow the active page and I have created it in dreamweaver however this is the first time I have used WordPress and cannot for the life of me figure this out lol.

    Also this is the first time in a few years that I have done anything with websites, so to say I’m a bit rusty would be an understatement.

    Evan Herman
    Participant

    @eherman24

    Without the page in front of us ( to find out what classes your theme is using) no one will be able to assist you.

    This should get you there http://71.65.126.166/wp/

    Evan Herman
    Participant

    @eherman24

    It sort of does. There are no css files or anything because they are all throwing 404 errors.

    You basically just want to add a backround image, or some other image to the active menu item. You can do it all via CSS or JS

    Yea they are all linked to 127.0.0.1 for the local host, I’m using X theme not sure if that helps. But any of the links if you replace 127.0.0.1 with the ip address I posted it should take you to that page.

    Evan Herman
    Participant

    @eherman24

    It helps , but I don’t have access to the theme because it’s a commercial theme. We generally only support free themes downloaded from the repository here.

    Ok, well I did change the links so they should all work now without having to replace any addresses. I can change it to a free theme just to see what it is I need to do if that would help.

    Evan Herman
    Participant

    @eherman24

    Why not just add a background image to the hovered nav item, or the active nav item.

    .nav-item:hover {
     background: url('/link/to/white/circle');
    }
    
    .active-nav-item {
      background: url('/link/to/white/circle');
    }

    again, I’m not sure what your navigation item classes are or the active navigation item, but you can figure that out and adjust accordingly.

    I will try that, thank you.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Icon next to active page in navbar’ is closed to new replies.