Member Avatar for nagatron

Hi Guys and to all programmers, I have a website wherein my header appears on all pages of my website. Did a test by disabling the display; however, the header was gone on all pages of my website so I turned the display back on. My question is, is there a CSS code that will disable my header on the main page only?

Note: All pages are sharing one CSS layout, all pages share one header. It is just it is being included on to each pages of my website.

Thank for the help.
Neil

  • 1 Contributor
  • 1 Reply
  • 124 Views
  • 25 Minutes Discussion Span
  • Latest Post Latest Post by nagatron

Dani AI

Generated

Good to see this resolved by . Two safe patterns that cover most setups are: add a page-specific class or ID and hide the header with CSS (fast and non-invasive), or avoid outputting the header server-side on that page (cleaner when the header should not exist at all). Which to pick depends on whether the header contains scripts or navigation you want completely removed from the DOM and accessibility tree.

A simple CSS approach (add a class to that page's body):

/* on the single page: <body class="no-header"> */
body.no-header header.site-header {
  display: none;
}

/* Bootstrap navbar example */
body.no-header .navbar { display: none; }

If you prefer not to leave the header in the DOM, conditionally include it on all pages except the one in question (example in PHP):

<?php
// set $no_header = true on the page you want header-free
if (empty($no_header)) {
  include 'header.php';
}
?>

Notes and cautions: display:none hides the element visually and generally from assistive technologies, so use it only when hiding is acceptable for accessibility. If the header contains meta tags, critical scripts, or analytics that must run, do not merely hide it with CSS — omit or adjust those parts server-side. Test keyboard navigation, mobile layouts, and screen readers after changes. Adding a skip-to-content link is a good practice whenever you change header/nav visibility.

Member Avatar for nagatron

nevermind I got now :)

each page has its own div tag so I just disabled it

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.