Dropdown Nav Question

Hi there,
What you need to do is go into Appearance > Menus and find that menu you created. Then, instead of using a page to create that menu item, use the Custom Links option and name the link PHOTOS, but where it has http:/ put a # instead, so it doesn’t link to anything. (If you don’t see Custom Links, click on Screen Options at the top right of the screen and make sure Custom Links is checked.)

If you want to change the hover of the mouse as well when you hover over that menu item, you will need to do an Inspect Element and find the item # of that link and change it in the CSS, for example

li.page-item-61 a {cursor: pointer;}

Hope this helps!

Sorry, just realized that is the CSS for the drop down items that you DO want clickable. For the item where you don’t want a pointer, CSS should be something like this:

li.page-item-3405 a {cursor: default;}

Hi Laura,
Thank you so much for the response! I’ve learned a lot from that it I did not know before – including inspect element! I was able to create the new menu with the custom link as the button and the # works so that it doesn’t go anywhere.

Now I’m trying to follow your instructions to make the cursor be an arrow while just on PHOTOS but I’m having trouble. So far, the arrow shows up while hovering on the nav button but there’s also an arrow for all of the pages on the drop down menu below – those should have the hand because they are clickable links.

Inspect element revealed for the PHOTOS nav button:
<li id=“menu-item-3117” class=“menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3177”>

So far each of the following lines of code, tried separately, result in all the links in the PHOTOS dropdown menu having an arrow for the cursor.

.menu-item-has-children a{cursor: default;}
#menu-item-3117 a{cursor: default;}

Do you know how I can apply it to only the nav button? I’m confused as to why it would apply the arrow to the dropdown pages because they don’t have the same id or class as the ones I’m using here for the nav button. I left #menu-item-3117 a{cursor: default;} in the CSS so for now the PHOTOS dropdown menu has the arrow.

Thanks again!

Btw, I mistyped 3177 in the message above – it should be 3117 and I did put the correct number in the CSS.

I think the dropdown menu pages are inheriting this new style of the arrow cursor. Am I inspecting the element wrong?

Hi Rebecca,
You’re doing great. I think I confused you a little by giving the wrong instructions in my original post. When you set the top link to cursor:default, that property is handed down to all of it’s children as well, so we need to override that. Here’s how we do it:

li.menu-item-3118 a,
li.menu-item-3119 a {
cursor: pointer;
}

I just did the first couple so you would get the idea, but you’ll need to use Inspect Element again and list them all. Hope this works for you and then you can mark this one as resolved. Good luck!

Thank you very much, it worked!!
I did it with id’s.