I'm trying to build a responsive mobile first navigation, trying to teach myself progressive enhancement.What I want to do is target my #header by clicking a menu icon, and thus setting my #menu to height 100%. Basicly making it show on clicking the icon. I tried the following:\[code\]#header:target #menu { height:100%;}\[/code\]Wich didn't work. Anyone got any suggestions on how to change the #menu height if the #header is targeted?jsFiddleEdit: Since I'm building this nav using progressive enhancement, I don't want to use any Jquery or JavaScript. The point is making it compatible with all devices before adding a next level of UX. So it needs to work WITHOUT jQuery/JavaScript\[code\]<body id="home"> <div class="wrapper"> <header id="header"> <h1 class="logo"><a href="">Nav</a></h1> <a href="http://stackoverflow.com/questions/15566655/#header"> <div id="nav_btn"> </div> </a> </header> <nav id="primary_nav"> <ul id="menu"> <li><a href="">Portfolio</a></li> <li><a href="">About Me</a></li> <li><a href="">Nonsense</a></li> <li><a href="">Services</a></li> <li><a href="">Contact</a></li> </ul> </nav><!--end primary_nav--> </div><!--end wrapper--></body>\[/code\]
if div:target change css of another div
- Thread starter FLCL
- Start date