WordPress.org

Forums

Icon next to active page in navbar (11 posts)

  1. theo2889
    Member
    Posted 1 year ago #

    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.

  2. Evan Herman
    Member
    Posted 1 year ago #

    Please provide a link to your site.

  3. theo2889
    Member
    Posted 1 year ago #

    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.

  4. Evan Herman
    Member
    Posted 1 year ago #

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

  5. theo2889
    Member
    Posted 1 year ago #

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

  6. Evan Herman
    Member
    Posted 1 year ago #

    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

  7. theo2889
    Member
    Posted 1 year ago #

    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.

  8. Evan Herman
    Member
    Posted 1 year ago #

    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.

  9. theo2889
    Member
    Posted 1 year ago #

    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.

  10. Evan Herman
    Member
    Posted 1 year ago #

    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.

  11. theo2889
    Member
    Posted 1 year ago #

    I will try that, thank you.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags