Is there a way to disable the <header> using CSS without hiding it?
I am unable to find any disabled attribute that can be added to the element. The header contains dropdowns and buttons.
To disable the entire page, I used JQuery to add a div with a specific class.
<div class="modalOverlay"></div>
The associated CSS style is as follows:
.modalOverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
right:0%;
bottom : 0%;
background-color: rgba(0, 0, 0, 0.1); /* black semi-transparent */
}
This style applies to the entire page except for the elements within the header tag. How can I disable those too, preferably with CSS so I can easily add or remove the class as needed?
UPDATE:
<header>
<nav class="navbar navbar-default">
<a class="navbar-brand" href="#"> Title </a> <a
class="toggle-nav btn pull-left" href=""> <i class="icon-reorder"></i>
</a>
<ul class="nav">
<li class="dropdown medium only-icon widget"><a
class="dropdown-toggle" data-toggle="dropdown" href=""> <i
class="icon-rss"></i>
<div class="label">1</div>
</a>
<ul class="dropdown-menu">
<li><a href="">
<div class="widget-body">
<div class="pull-left icon">
<i class="icon-user text-success"></i>
</div>
<div class="pull-left text">
New User Added. <small class="text-muted">just now</small>
</div>
</div>
</a></li>
<li class="divider"></li>
<li class="widget-footer"><a href="">All notifications</a></li>
</ul></li>
<li class="dropdown dark user-menu"><a class="dropdown-toggle"
data-toggle="dropdown" href=""> <img width="23" height="23"
alt="userName" src="assets/images/male_icon.png" />
<span class="user-name">Hi, Guest</span> <b
class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href=""> <i class="icon-user"></i> Profile
</a></li>
<li><a href=""> <i class="icon-cog"></i> Settings
</a></li>
<li class="divider"></li>
<li><a href="" ng-click="logout()"> <i
class="icon-signout"></i> Sign out
</a></li>
</ul></li>
</ul>
</nav>
</header>
Thank you.