WordPress.org

Support

Support » Themes and Templates » [Resolved] Menu categories images

[Resolved] Menu categories images

Viewing 11 replies - 1 through 11 (of 11 total)
  • Moderator cubecolour

    @numeeja

    ɹoʇɐɹǝpoɯ

    can you provide a link to your site please?
    What theme are you using?

    Assuming you have a menu which currently has menu items for ‘news’, ‘top 5’, ‘interviews’ there are various text replacement techniques you can use. Chris Coyier has outlined several methods at http://css-tricks.com/examples/ImageReplacement/

    This is my page :

    http://stefanvblog.com/category/news/
    it is custom theme…

    Thank you for link 🙂

    Is there any chance to do that :))

    WPyogi

    @wpyogi

    Forum Moderator

    Try this plugin –

    http://wordpress.org/plugins/nav-menu-images/

    Also please read the forum guidelines –

    http://codex.wordpress.org/Forum_Welcome#No_Bumping

    ok.. sry.. But this plugin don’t work for categories.. That’s the problem..

    WPyogi

    @wpyogi

    Forum Moderator

    You should be able to use the menu-specific classes to add images yourself – for example this code from News:

    <li id="menu-item-632" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-632">

    So in the CSS, try:

    li#menu-item-632 {
       background: url("URL TO YOUR IMAGE HERE");
    }

    .li#menu-item-632 {
       background: url("http://stefanvblog.com/wp-content/uploads/2013/11/news.png");
    }

    i put that but nothing happend :S..
    This is code of my menu now… in css.. Do I need ti delete here something?

    #navmenu ul {margin: 200px; margin-left:35%; margin-top:5%; padding: 10px;
    	list-style-type: none; list-style-image: none; position:relative;}
    #navmenu li {display: inline; }
    
    #navmenu ul li a {text-decoration:none;  margin: 4px;
    	padding: 5px 20px 5px 20px; color: blue;
    	background:green;}
    #navmenu ul li a:hover {
    	background: yellow;
    }

    WPyogi

    @wpyogi

    Forum Moderator

    Look closely at what you have here:

    .li#menu-item-632

    compare that to what I posted – i.e. li is not a class, it’s a tag.

    Thank you for answer 🙂

    I tried it and… nothing happens … :/

    #navmenu ul {margin: 200px; margin-left:35%; margin-top:5%; padding: 10px;
    	list-style-type: none; list-style-image: none; position:relative;}
    #navmenu li {display: inline;}
    
    li#menu-item-632 {
       background: url("http://stefanvblog.com/wp-content/uploads/2013/11/Untitled.png");
    }
    
    #navmenu ul li a {text-decoration:none;  margin: 4px;
    	padding: 5px 20px 5px 20px; color: blue;
    	background:green;}
    #navmenu ul li a:hover {
    	background: yellow;
    }

    OK, this is my code for menu..

    #navmenu ul {margin: 200px; margin-left:35%; margin-top:5%; padding: 10px; position:relative;}
    
    #navmenu li {display: inline;}
    
    li#menu-item-632 {
       background:red;
    }
    li#menu-item-633 {
       background: blue;
    }
    li#menu-item-631 {
       background: white;
    }

    This is link : http://stefanvblog.com/category/news/

    As you can see, the background color has changed.. but when i put background-image : url(…);, backgroung color became white and there is no image.. image size iz 300x300px… Do you know reason for that..

    Thank you

    i found the reason.. i need to expand [widht, height] my menu.. but i don’t know what to expand. 🙁

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] Menu categories images’ is closed to new replies.
Skip to toolbar