WordPress.org

Ready to get started?Download WordPress

Forums

Spun
Social Menu (13 posts)

  1. Banjer
    Member
    Posted 1 year ago #

    Hi Caroline,
    I would like to modify the menu with icon instead tex, or mix text and add some social icon... it is possible?
    I have to add a new menu , or could I make it using the css class?

    Thank you very much
    Banjer

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    The menu already has CSS classes. You could hide the text and apply background images through CSS.

  3. Banjer
    Member
    Posted 1 year ago #

    I tried but what is the css class to modify? I use chrome develop tool and I suppose the class to modify are one of this?

    <li id="menu-item-37" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-37 parent">

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Do you want to target one particular item?

  5. Banjer
    Member
    Posted 1 year ago #

    Yes I would like add 3 social icon

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    You need to get rid of the text align on the <nav> item for the text indent to work:

    .main-navigation {
     text-align: start;
    }

    Then you'll need to add widths to the menu items if you indent the text, because the text will no longer have a width.

    Try adding this;

    .main-navigation a {
     text-indent: -9999em;
     width: 50px;
    }

    And then you can apply icons to individual menu items;

    #menu-item-37 {
     background: url("/wp-content/themes/spun/directory-to-image/image.png") no-repeat;
    }

    Are you using a Child Theme or Custom CSS plugin?

  7. Banjer
    Member
    Posted 1 year ago #

    I am using a chili theme
    I will try what you wrote me and let you know
    Thank you very much 😄

  8. Banjer
    Member
    Posted 1 year ago #

    Ok after a couple of month I star working again on my site.
    I resolved the problem write above, but when I display the site on mobile, the text menu appear again.
    How can I resolve this proble?

  9. hexdee
    Member
    Posted 10 months ago #

    Hi Banjer,

    could you please share how you managed to achieve this. In more detail :)
    Or simply PM me to [ email redacted ]

    Thanks

  10. Hexdee, please don't ask people to email. It doesn't help the forums as no one else learns how to fix this.

  11. hexdee
    Member
    Posted 10 months ago #

    Sorry :)

  12. Banjer
    Member
    Posted 10 months ago #

    Hi, I will try to explain but I am not a very good with this stuff and with english.
    Anyway, you have to set the css class from the menu section and then you have to modify the css file of your theme adding something like that.
    I hope this is will be helpful

    /*
    Theme Name: spun Child
    Description: Child theme for the spun theme
    Author: Davide
    Template: spun
    */
    
    @import url("../spun/style.css");
    
    .main-navigation {
     text-align: start;
    }
    
    .main-navigation a {
     text-indent: -9999em;
     width: 50px;
     height: 50px;
    
    }
    
    #masthead {
    opacity: 1;
    }
    
    .menu-soundcloud  {
      background-image: url(http://www.albertodati.com/wp-content/uploads/2013/08/sc.png) !important;
      background-repeat: no-repeat !important;
      background-position: left center;
    
    }
    
    .menu-soundcloud:hover {
      background-image: url( http://myname.com/wp-content/uploads/2013/08/sccolor.png) !important;
    }
    
    .menu-facebook  {
      background-image: url(http://www.myname.com/wp-content/uploads/2013/08/fb.png) !important;
      background-repeat: no-repeat !important;
      background-position: left center;
    
    }
    
    .menu-facebook:hover {
      background-image: url( http://www.myname.com/wp-content/uploads/2013/08/fbcolor.png) !important;
    }
    
    .menu-twitter  {
      background-image: url(http://www.myname.com/wp-content/uploads/2013/08/tw.png) !important;
      background-repeat: no-repeat !important;
      background-position: left center;
    
    }
    
    .menu-twitter:hover {
      background-image: url( http://www.myname.com/wp-content/uploads/2013/08/twcolor.png) !important;
    }
    
    .menu-youtube  {
      background-image: url(http://www.myname.com/wp-content/uploads/2013/08/yt.png) !important;
      background-repeat: no-repeat !important;
      background-position: left center;
    
    }
    
    .menu-youtube:hover {
      background-image: url( http://www.myname.com/wp-content/uploads/2013/08/ytcolor.png) !important;
    }
    
    .menu-flickr  {
      background-image: url(http://www.myname.com/wp-content/uploads/2013/08/fl.png) !important;
      background-repeat: no-repeat !important;
      background-position: left center;
    
    }
    
    .menu-flickr:hover {
      background-image: url( http://www.myname.com/wp-content/uploads/2013/08/flcolor.png) !important;
    }
  13. hexdee
    Member
    Posted 10 months ago #

    Thanks, Banjer, I will give it a try. Could you also post a link to your website, please?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic