Support » Theme: Spun » Social Menu

  • 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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    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”>

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Do you want to target one particular item?

    Yes I would like add 3 social icon

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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?

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

    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?

    Hi Banjer,

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

    Thanks

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

    Sorry 🙂

    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;
    }

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Social Menu’ is closed to new replies.