Menu Item as Heading, not as Link and its Styling

[deeper]

Hi,

my static front page has a vertical nav in the sidebar. I want the first item on the top to serve as heading, not as a real menu item. Therefore in Wordpress menu I deleted the URL for this item.

It's necessary to style this "heading-item" differently than the real menu items below (only five). It should have a different font-family, font-size, font-weight (or bold), font-colour and it should not show any hover effect.

I made some research and found three ways to accomplish this:

a) CSS-class in Wordpress for this item plus CSS-code in CSS-file

b) CSS-Code in CSS-file, but using an ID which my theme automatically asignes.

c) Wordpress menu allows to insert also HTML in the anchor field

"c)" means inline-styling which usually is not recommended, but I don't have to care about cascading/inherited styles ect.

a) and b) are the opposite of c): No inline-styles but always considering possible complications.

I probably will need this kind of "heading-item" often in future, so I'd liked to know what the differences are and may be the best way for this cases. I'm not a big coder, like it simple, safe and reliable.

[Planet13]

I think you could use the :first-child pseudoclass to style it?

I assume the navigation links are li elements in a ul, right?

If the ul has a class assigned like:

.nav_links

in your html:

<ul class="nav_links">

Then in the CSS, have this style:

ul.nav_links:first-child {
color: red;
font-weight: bold;
}

Anyway, I truly BELIEVE this is how to do it.. but I have been known to be wrong / clueless before...

[Fotiman]

@Planet13, close... this is what you were going for I think:

ul.nav_links li:first-child { 
  color: red; 
  font-weight: bold; 
}

Note I added the "li", otherwise, you're selecting the first ul.nav_links element instead.
Also, no need for ul portion, so this would be better:

.nav_links li:first-child { 
  color: red; 
  font-weight: bold; 
}

[deeper]

@Planet13:

I assume the navigation links are li elements in a ul, right?

Yes. And every menu item as a <li> has its own ID, which the theme creates automatically, for example "menu-item-78".

I think you could use the :first-child pseudoclass to style it?

I guess so, at least I don't know a reason against it. As WP and its custom menus allow every webmaster explicitly to assign each single menu item its own class, [themesandco.com...] I didn't have the idea with :first-child pseudoclass. Always nice to have several options.

Avoiding "hover-effect" only for this one heading-item is possible for all CSS options as well as directly inserting tags with inline-CSS in the field WP offers for anchors, option c), like described at [mor10.com...] ?

Before creating the CSS-code for font-family/size/colour/weight and "no hover" my first intention was to find out, what option of the three I described may be the best. You both vote for option a)CSS-class (pseudoclass or my own)?

[Fotiman]

Yes, I'd vote for option "a". :)

[Planet13]

If there are going to be LOTS of these menus, and the only thing in common is that the FIRST instance of the li would be without a link (meaning that the first li would have a different id from page to page), then I would use the first-child: pseudoclass, too.

But remember: Up until about three months ago, I thought CSS was a crime show on tv that my parents watch...

[deeper]

But remember: Up until about three months ago, I thought CSS was a crime show on tv that my parents watch...

:)