Hello, I want to create some icons in my dropdown menu and was wondering how to do this? The website is www.gadjetsupply.com and here is an example of what I want to do: The yellow icons on the right dropdown menu is what I am trying to do. Thanks guys!
You can use pseudo elements . For example : .menu ul li ul li:before{ content:" "; background-image: url(""); width: 20px; height:20px; float: left;}
You must add content and bcg image url. Or just add something like this to your current text container(it could work): background-image:url('your images url'); padding-left: width of image in px; In your case(just change the images urls): #top-menu li li a { padding: 10px 20px 10px 48px; width: 160px; background-repeat: no-repeat; background-image:url('https://pbs.twimg.com/profile_images/636212894049378304/HQbUarE8_normal.png'); }
Brilliant! This works, thanks a lot. The problem I now have is that the icons are all the same, is there a way to have different icons for different links in the menu? Thanks!!
I am not sure what you mean unfortunately... can you please show me the change I need to make to the code you gave me before? : #top-menu li li a { padding: 10px 20px 10px 48px; width: 160px; background-repeat: no-repeat; background-image:url('https://pbs.twimg.com/profile_images/636212894049378304/HQbUarE8_normal.png'); } Thanks a lot !!
If you want to change only css this is one of solutions: #top-menu li li:nth-child(1) a { background-image:url('url of first image'); } #top-menu li li:nth-child(2) a { background-image:url('url of second image'); } repeat this pattern for each menu item.
Fantastic, thanks a lot for this!! I tried this code and it allows me to have different icons for for the dropdown menu. I want to create three dropdown menus, is there a way to have different icons for the different dropdown menus? Thanks!!
Sure it's possible, give each different dropdown menu id or class, and than repeat the same pattern like #top menu li .class1 li ... just experiment, play with it!
I tried to do your suggestion but I am struggling to get it to work, they are all still the same unfortunately
this is sample add your things into it.... background-image:; padding-left: width of image in px; #top-menu li a { padding:; width:; background-repeat:; background-image:url(); } you can add things in these and then check it if it works if it don't then tell me so that i can add other changes that might work for your website..... by the way your website is very good. keep it up and make changes in it..
Hi, thank you for this. I tried the code and it works but I cannot get it exactly how I need it - different dropdown menus should have different icons. So annoying that I can't fix it.
And, again, you'll need to give each of the dropdowns its own ID, so you can differentiate between each dropdown, then place the code you already have within each ID, and change the pictures to match.
Take this quick tutorial, it's fun and useful: http://www.webcosmoforums.com/content/section/122-css-tutorials.html
Thank you for this. I still don't understand it though if you can please show me the code for it then that would be absolutely awesome because I can't figure this out!