Member Avatar for gogs85

The navigation must be styled using the :hover pseudo class, while the active menu point must use the body class. How to make this?
Thanks!

Edited by gogs85 because: info
  • 3 Contributors
  • 3 Replies
  • 107 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by Alberto Bucur

Dani AI

Generated

Brief answer for : give each page a page-specific class on the BODY (for example page-about), keep your hover rules generic with :hover, and write selectors that target the active link through the body class. That keeps hover behavior shared while the active state is driven by the page class.

Example HTML and CSS pattern:

HTML:

<body class="page-about">
  <nav class="main-nav">
    <a href="/index.html" class="nav-home">Home</a>
    <a href="/about.html" class="nav-about" aria-current="page">About</a>
    <a href="/contact.html" class="nav-contact">Contact</a>
  </nav>
</body>

CSS:

.main-nav a {
  color: #333;
  text-decoration: none;
}

.main-nav a:hover {
  color: #0077cc;
}

body.page-about .nav-about,
body.page-about .nav-about:hover {
  color: #c0392b;
  font-weight: 600;
}

For static pages add the body class when generating the page (server-side templates). If pages are static files and you cannot change build output, a small runtime script can add the page class based on location.pathname:

(function() {
  var path = location.pathname.split('/').filter(Boolean).pop() || 'index';
  document.body.classList.add('page-' + path.replace(/\.[^/.]+$/, ''));
})();

Notes and troubleshooting (answering and ): include aria-current="page" for accessibility, avoid !important—instead increase selector specificity when the hover rule conflicts (as shown by also targeting :hover under the body class), make naming consistent (page-foo / .nav-foo), and for SPAs update the body class when routes change. Use DevTools to inspect which selector wins if styles don’t appear.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

while the active menu point must use the body class

what do you mean? can you clarify?

Member Avatar for gogs85

How to do that active menu points use body class?

Member Avatar for Alberto Bucur

When the user click on menu option do you want to change the body content ?
Show us your code, please!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.