Help w/ Menu -- Horiz bullet images, but not on every item in list

HTML & CSS
1

Hello everyone. I am just starting out with CSS and have been working on a friend’s website in WordPress, using an ecommerce theme. I have been trying to create a small blue heart image in between the navigation menu categories across the top, but have been only slightly successful.

I am trying to remove the image in front of the following text (on top): Home, Search, Login, Register, and before the image of the shopping cart.

Also, I would like to remove the image before the first word of each category line (currently “All Products,” and “Simply Swarovski”). It’s possible that more categories may be added in the future, which would then change the first category name in the second line. Then have the 2 category lines flush left underneath the logo.

This is the site (it’s not yet open): http://crystalpearlboutique.com/shop/

I would so greatly appreciate any help you could provide – at this point I am totally clueless as to what to do.

Thanks so much in advance. I look forward to your replies. :slight_smile:

2

Glad to help :). And the class line could hvae been added as such
Say you had <ul>
Just make it <ul class=“whatever”>

3

Or you could change your #header ul li{} CSS rule to be more specific and only apply it to the bottom list

Hmmm, how would I go about applying the bullet to only the navigation? I’m interested in learning how if you have the time to share. :slight_smile:

4

Thanks so much for your reply. :slight_smile: Would I add this underneath /LR Navi/ ?

Or you could change your #header ul li{} CSS rule to be more specific and only apply it to the bottom list :slight_smile:

I would love to create a rule, but I have no idea how to go about that. :wink:

As for the category change, why not just go into the HTML and remove the word?

I think I might have confused things by saying this (I add the categories in WordPress so that’s not a problem). I mentioned it because I specifically wanted the bullets gone from before each of the first words in each line, not just removed from in front of those 2 particular words (since those first words may change if more categories are added). Hope that makes sense. :slight_smile:

5

As you see, you add it anywhere :). If you want to pick and choose which gets bullets, add classes and set the backgrounds accordingly :slight_smile:

6

Well I went ahead and tried adding it under /LR Navi/ and as you can see it just removed the bullets from in front of Home, Search, Login, Register, and before the image of the shopping cart. Unfortunately, the bullets are still in front of the 2 first words in each of the category lines (I think I will keep the one in front of “Home” in the upper right-hand corner). But yay! Thank you for getting me this far! Anything else that you could help with is a tremendous plus! :smiley:

7

Hi, since both lists meet the rule of “#header ul li” all of them will have the background image. You can override that rule to remove the background image on the top list by doing as such

#header ul.LR_navi li{background:none;}

Or you could change your #header ul li{} CSS rule to be more specific and only apply it to the bottom list :slight_smile:

As for the category change, why not just go into the HTML and remove the word?

8

Hey Ryan,

I did find an index.php file under the parent theme folder (which I’m not supposed to edit directly - I’m supposed to copy that file over to the child theme and edit it there). This file contained a couple of “class” lines that had to do with where the sidebar went (in the theme design), but I didn’t see any html pages where I could add a “class” line about the category navigation. I would have loved to remove the 2 bullet images that come before the first words on both lines, but I think for now I’ll leave it as is. Thank you so much for your help! It’s greatly appreciated. :slight_smile:

9

The HTML file for the link you posted will be in your root folder (well, go there)

Then find the folder called “shop”
Go into there, then you will most likely see a file called index.html (or whatever the defualt page is)

10

Ahhhhh – the html! I don’t even know where the html files would be. That sounds sad, doesn’t it… I will have to go look at all the files and see what I can find. :slight_smile:

11

I’ll go look, but if you only updated hte CSS and not the HTML then that would be a definate cause :wink:

12

Instead of me messing through that entire source, post the HTML for the navigation, along with the CSS you think it should be working with :slight_smile:

13

Thanks so much for helping, Ryan, but I think I’m doing something wrong b/c I tried it and it didn’t work. I’m sure I must have put it in the wrong place – all the bullet images disappeared. :frowning:

14

Just add a class to the navigation, aka class=“nav”

Now change your CSS of “#header ul li” to “#header ul.nav li” to target the nav :slight_smile: