Secondary Menu: Adding Icons/Images

  • northparkfamilymd · Member ·

    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)

  • 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.