I have the following code in html:
<nav class="box">
<div class="logo">
<button class="c-hamburger c-hamburger--htx linksbuendig">
<span>toggle menu</span>
</button>(...)
</div>
</nav>
<div class="relative box">
<div class="nav">
<ul>
<li>
Login
</li>
</ul>
</div>
and this in CSS:
.c-hamburger:focus ~ div.nav {
margin:0;}
so if the button is focused the div should change the margin. But it won't work, until i copy the code for the button 1 to 1 directly over the div with the class nav. Why does it so and what can I change? Just copy solves the problem until now, but then is the full page destroyed, because there're other elements in between etc.
JS or sth. like that is not allowed. Please only CSS resp HTML.
Beforehand: Thanks!
Related
I have a nav bar going across the top of my page, on :active of a certain one, I would like a certain div on another part of the page to pop up, is this possible or does the div i want to pop up have to be within the nav bar div?
The first nav part is a nav bar going across the top of the page with. There are 4 buttons and a logo in the middle. The second section, that is within the wrapper div, uses the grid system to display three columns, in the first column is 'SubNavBar', second is 'Info' then third is 'Links'. There is a second nav bar, within the first column that I would like to appear when clicking on the first option from the top nav bar.
<nav class="container">
<div class="1">
Nav1
</div>
<div class="2">
Nav2
</div>
<div class="logo"> Garrett Sauls
</div>
<div class="3">
Nav3
</div>
<div class="4">
Nav4
</div>
</nav>
<div class="wrapper">
<div class="one">SubNavBar
<nav class = "container2">
<div class="partOne">
Nav1.1
</div>
<div class="partOne">
Nav1.2
</div>
<div class="partOne">
Nav1.3
</div>
<div class="partOne">
Nav1.4
</div>
</nav>
</div>
<div class="two">Info
</div>
<div class="three">Links
</div>
</div>
So you can do it, but it depends on the structure of your HTML.
If the element you want to apply the hover effect to is next to your div (adjacent), you can use the + adjacent selector.
If there are elements in between the two elements you want interacting, use the ~ general sibling selector:
.first-element:hover + .adjacent-element {
background: #9dff73;
}
.second-element:hover ~ .distant-element {
background: #9dff73;
}
<div class="first-element">Hover over me</div>
<div class="adjacent-element">Watch me light up!</div>
<br />
<div class="second-element">Hover over me</div>
<div>I'm a div</div>
<span>I'm a span</span>
<section>I'm a section</section>
<div class="distant-element">Watch me light up!</div>
Designing a single page application in reactjs.I have a fixed navbar on the top of the page and i have 4 section .on click of link in navabr it jumps to that particular section.But i want to highlight that li with small border below.if user scrolls to any section without clicking link in navbar,the link must be highlighted with border.
// header.js
<ul className="col-2 flex-row flex-justify-align-center ">
<li className="navigation__link">Problem</li>
<li className="navigation__link">Solution</li>
<li className="navigation__link">Footprint</li>
<li className="navigation__link">Services</li>
<li className="navigation__link">Contact</li>
</ul>
function App() {
return (
<div className="App">
<div id="problem"></div>
<Header></Header>
<div id="solution">
<Solution></Solution>
</div>
<div id="footprint">
<Footprint></Footprint>
</div>
<div id="contact">
<Contactus></Contactus>
<Footer></Footer>
</div>
</div>
);
}
Question is unclear because I didn't get how to frame question for this requirement.
You need to use scroll spy. Visit this git repository React-scrollspy.
relavent question: How to implement a scrollspy with React
i bought a bootstrap material look template but i did some modifications, but when i submit a transparent css on the top navbar, it is not working i don't know how!, i used the backgroung-image, webkit, and a simple css background transparent but not working, even with !important not successful,i think it has a default color because when i put it a transparent css code it turn into the body default color same as facebook body background color i think it is this one #f4f4f4, any help?
Html code
<div class="app-content">
<div class="box">
<div class="navbar">
<div class="navbar-menu">
<ul>
<li>
Menu 1
</li>
</ul>
</div>
<!--start content page-->
<div class="app-content">
<div class="box">
<div class="navbar">
<!--start content-->
I wrapped all contents with <div> which height and width is both 100px. Contents inside this <div> contains index and content.
The problem is that clicking "a2" in the following code won't let me jump to the bottom contents in Google Chrome.
<div style="height:100px;width:100px;overflow:scroll;">
<ul>
<li>a1</li>
<li>a2</li>
</ul>
<h2 id="a1">a1</h2>
a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>
<h2 id="a1">a2</h2>
a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>
</div>
The working code can be seen from the following link.
http://jsfiddle.net/L7rQ6/
Is there some good solution to make "a2" jump to the proper contents?
You missing to update your 2nd <h2> element set id="a2" instead of id="a1"
Check demo jsfiddle
Update this small,
<h2 id="a2">a2</h2>
HTML (Updated)
<div style="height:100px;width:100px;overflow:scroll;">
<ul>
<li>a1</li>
<li>a2</li>
</ul>
<h2 id="a1">a1</h2>
a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>
<h2 id="a2">a2</h2>
a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>
</div>
You need to use:
<h2 id="a2">
instead of:
<h2 id="a1">
for your second h2 element. Current you've duplicated id which is invalid HTML as well.
Updated Fiddle
As Felix and user1153551 has said you have duplicated the Id for both of the tags try this.
<div style="height:100px;width:100px;overflow:scroll;">
<ul>
<li>a1</li>
<li>a2</li>
</ul>
<h2 id="a1">a1</h2>
a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>a1<br/>
<h2 id="a2">a2</h2>
a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>a2<br/>
</div>
I am trying to figure out how to do this... I have 4 divs that I am looking to show and hide one at a time. The link to the divs are in a separate nested div. Here's my code:
<div id="container">
<div class="roundbox">
<ul>
<li class="t">
Main
</li>
<li class="e">
News
</li>
<li class="t">
History
</li>
<li class="e">
Contact
</li>
</ul>
</div>
<div class="inceptioncontent">
<div class="content">
<div class="contentnest">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</div>
</div>
</div>
I want the Main, News, Contact, and History links to show/hide the corresponding divs in the contentnest div. Any ideas? Thanks!
JQuery is great at doing his sort of thing. This looks like a good place to start: http://papermashup.com/simple-jquery-showhide-div/
It seems your looking for a drop down menu. You can achieve this:
Coding it in Javascript + css ( with a framework like jQuery it will be easier)
; With Css
; Downloading A plugin
I think the "Css only" is the best way, jQuery is cool and download a plugin it's the easiest way, but you need the js of the user's explorer to be on.
You can check how to do it only with css here:
https://www.grc.com/menudemo.htm