WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Trying to add images to a wordpress menu (7 posts)

  1. johns75
    Member
    Posted 1 year ago #

    Hi,

    I am trying to install an image menu on my wordpress site instead of the default menu. I have found an accordion image gallery plugin that allows this, but it conflicts with the other plugins that I have installed.

    Is there a better way to achieve this? I know a little css but i cannot find the element that chrome identifies in my wordpress files.

    The test link is: http://inc.equatehosting.com

    Any help appreciated

  2. Doodlebee
    Member
    Posted 1 year ago #

    You can add classes to your menu items. You just have to make sure the "Classes" item is checked to show that field (under "screen options" in the upper right-hand corner of the screen - you're looking for "CSS Classes"). You can then assign class names to the menu items, and use CSS to apply the images as backgrounds to each menu item. Use "text-indent" to move the text so it's out of view.

  3. johns75
    Member
    Posted 1 year ago #

    Hi Shelly,

    Thank you so much, that works, BUT! my css is so bad it was painful.

    Can you tell me how i remove the lines between the images?

    Also, how do i move this menu around the page as a unit using css?

    Thanks again!

  4. johns75
    Member
    Posted 1 year ago #

    P.S. here is what i have got so far from a standard wordpress menu: http://inc.equatehosting.com

  5. johns75
    Member
    Posted 1 year ago #

    Hi Shelly,

    I have actually worked it out. I just needed to apply padding to the .art-nav element.

    Do you know how i would remove the lines in between the images? also, notice the images wobble when i hover over them?
    http://inc.equatehosting.com

  6. Doodlebee
    Member
    Posted 1 year ago #

    The lines must be in your CSS somewhere - looks like you have a border set for the list items or the links. I'd just do a selector for the menu (whatever the div ID is) and set it to border:0. As for moving it - that depends on where you want to move it to. if it's floating, just change the float:right to float:left. If it's positioned, just mess with the pixel values.

  7. johns75
    Member
    Posted 1 year ago #

    I have everything but the lines sorted. Thanks for the help, learnt alot.

Topic Closed

This topic has been closed to new replies.

About this Topic