Secondary Menu: Adding Icons/Images

  • Author
    Posts
  • #162954

    Hi, I have a question regarding customizing the secondary menu area. We’d like to see if we can add some iconography or a small image next to the phone number and perhaps put the “Patient Portal” link in a coloured button. Is there an option or a custom css you’d recommend that may allow this?

    The url to the image is https://npfamilymed.wpcomstaging.com/wp-content/uploads/2021/05/Contact-Icons-2.png (it’s 31 x 31)

    The blog I need help with is: (visible only to logged in users)

    #162971
    tarasdashkevych
    Theme Author

    Hello,

    By default, WordPress does not provide an option to upload images in the menu section. It should be possible in the future versions of WordPress.

    At the moment, we can use a custom CSS to add an image next to the menu item.

    For example, if you want to display a custom image in the 1st menu item in the secondary menu area, please use this custom CSS:

    
    .secondary-navigation > .menu > .menu-item:nth-child(1) {
      background-image: url(https://npfamilymed.wpcomstaging.com/wp-content/uploads/2021/05/Contact-Icons-2.png);
      background-position: top left;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      padding-left: 1.75em;
    }
    

    If you want to add an image to the 2nd menu item, please use this custom CSS:

    
    .secondary-navigation > .menu > .menu-item:nth-child(2) {
      background-image: url(https://npfamilymed.wpcomstaging.com/wp-content/uploads/2021/05/Contact-Icons-2.png);
      background-position: top left;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      padding-left: 1.75em;
    }
    

    Also, since you are planning to use icons in this menu section then we need to remove a separator between the menu items to avoid style issues:

    
    .secondary-navigation > .menu > li::before {
      border: none;
    }
    

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • The topic ‘Secondary Menu: Adding Icons/Images’ is closed to new replies.