There was a similar question, based on the same w3school codes here
Dropdown navigation bar vs sticky navigation bar? asked and answered but I need a little more functionality.
On Desktop or wide screen:
The navbar is sticky when page is scrolled. The dropdown menu works. Happy with that.
On Mobile or narrow screen (when media queries kick in):
The sticky feature still works. However, navbar disappears when hamburger menu is clicked. No dropdown either. Navbar reappears and hamburger becomes functional when page is scrolled back to top.
I spent a good part of the day trying with various combinations in html and css but none seem to work. I suspect the JS myFunction() is the culprit but, as a relative newbie, I do not know enough JS to solve the problem.
Codepen can be viewed here https://codepen.io/harlequin8/pen/bxERNb/
Please help. Thank you
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
window.onscroll = function() {
myFunction2()
};
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunction2() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky")
}
}
body {
margin: 0;
font-family: Arial
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 12px 16px;
/*vertical align with .topnav a, from 14px 16px*/
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
/* absolute;
ref. https://stackoverflow.com/questions/46535480/position-fixed-ruins-the-dropdown-menu-in-css-webpage */
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* stocky part begin */
.header {
padding: 0 16px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
/* sticky part end */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child),
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
border-bottom: .05px solid white;
/* dropdown separation line */
}
.topnav.responsive a:nth-child(5) {
border-top: .05px solid white;
}
/* dropdown separation line */
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
☰
</div>
</div>
About
☰
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stck to the top when you reach its scroll position</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
</div>
Your problem is one of specificity. Your .sticky class correctly adds position: fixed to keep your navbar in place for the expanded responsive menu... though the .topnav.responsive selector adds position: relative with more specificity.
To correct this, I would recommend creating a new class inside of your media query to add position:fixed back, whilst giving more specificity:
#media screen and (max-width: 600px) {
.topnav.responsive.sticky {
position: fixed;
}
}
This can be seen in the following:
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
window.onscroll = function() {
myFunction2()
};
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunction2() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky")
}
}
body {
margin: 0;
font-family: Arial
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 12px 16px;
/*vertical align with .topnav a, from 14px 16px*/
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: fixed;
/* absolute;
ref. https://stackoverflow.com/questions/46535480/position-fixed-ruins-the-dropdown-menu-in-css-webpage */
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* stocky part begin */
.header {
padding: 0 16px;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
/* sticky part end */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child),
.dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive.sticky {
position: fixed;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
border-bottom: .05px solid white;
/* dropdown separation line */
}
.topnav.responsive a:nth-child(5) {
border-top: .05px solid white;
}
/* dropdown separation line */
.topnav.responsive .dropdown {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<div class="topnav" id="myTopnav">
Home
News
Contact
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
☰
</div>
</div>
About
☰
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stck to the top when you reach its scroll position</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nesciunt repellendus doloremque deleniti illo, nam saepe repellat, optio tempore praesentium qui quo debitis vitae quisquam delectus accusantium pariatur in.
Praesentium eius id magnam laudantium, ducimus. Dolor culpa incidunt numquam fuga deserunt necessitatibus assumenda pariatur, quod unde, velit neque sit earum.</p>
</div>
Related
I'm making a modal where the show modal button when clicked will display the modal right in the middle of the screen and has the exact same width as the main page. but the modal is not as right in the middle as I expected. I think it's because of the overflow style which adds scroll on the right side. how do I solve this?
<body>
<main>
<h1>THIS IS MAIN PAGE</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
mollitia, repellendus, ratione modi saepe iste ea id qui quia autem nisi
distinctio maxime! Repellat, consequatur. Possimus delectus perferendis,
illo vero perspiciatis tenetur debitis provident itaque rem laborum sint
esse temporibus officia reprehenderit nesciunt laudantium, aspernatur
consectetur quia sapiente exercitationem odit. Molestiae necessitatibus,
dolorem illum expedita minus obcaecati dicta distinctio minima?
</p>
<button>show modal</button>
</main>
<div class="modal-container">
<div class="modal-wrapper">
<h2>THIS IS MODAL PAGE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
nobis nulla iure consequuntur provident? Laborum, suscipit. Aut
similique dolor unde tempora laborum voluptates at cupiditate,
deserunt voluptate illum cum explicabo magnam quibusdam quam facere
consectetur aspernatur adipisci. Magnam, inventore harum.
</p>
</div>
</div>
<script>
document.querySelector("button").addEventListener("click", ()=> document.querySelector(".modal-container").classList.add("show"));
</script>
<script src="script.js"></script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: min(calc(100% - 3.125rem), 45.625rem);
height: 200vh;
position: relative;
left: 50%;
transform: translate(-50%, -5%);
background-color: aqua;
}
.modal-container {
position: fixed;
inset: 0;
padding: 20vh 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
overflow: scroll;
pointer-events: none;
transition: 200ms;
}
.modal-container.show {
opacity: 1;
}
.modal-wrapper {
width: min(calc(100% - 3.125rem), 45.625rem);
height: 150vh;
margin: auto;
padding: 1.75rem 1.25rem;
pointer-events: none;
transition: 200ms;
border-radius: 0.5rem;
background-color: aquamarine;
}
Here is a revised example (scroll and centered).
We didn't have the JS 'close' script so that part is left as provided.
There are a few CSS lines we turned off to resolve the issue, and a few of those lines can be switched back on if needed for you main content. Non-scrollable text in popup will need minor further CSS changes.
document.querySelector("button").addEventListener("click", ()=> document.querySelector(".modal-container").classList.add("show"));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
/*-- xwidth: min(calc(100% - 0.1rem), 45.625rem); --*/
height: 80vh;
position: relative;
/*-- xleft: 25%; --*/
/*-- xtransform: translate(-0%, -0%); --*/
background-color: aqua;
}
.modal-container {
position: fixed;
/*-- xinset: 0; --*/
/*-- xpadding: 20vh 0; --*/
background: rgba(0, 0, 0, 0.6);
opacity: 0;
/*-- xoverflow: scroll; --*/
pointer-events: none;
transition: 200ms;
/*--add all below--*/
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
}
.modal-container.show {
opacity: 1;
}
.modal-wrapper {
/*-- width: min(calc(100% - 3.125rem), 45.625rem); --*/
/*-- height: 150vh; --*/
margin: auto;
padding: 1.75rem 1.25rem;
pointer-events: auto;
transition: 200ms;
border-radius: 0.5rem;
background-color: aquamarine;
/*--add all below--*/
height: 50%;
width: 50%;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
<main>
<h1>THIS IS MAIN PAGE</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
mollitia, repellendus, ratione modi saepe iste ea id qui quia autem nisi
distinctio maxime! Repellat, consequatur. Possimus delectus perferendis,
illo vero perspiciatis tenetur debitis provident itaque rem laborum sint
esse temporibus officia reprehenderit nesciunt laudantium, aspernatur
consectetur quia sapiente exercitationem odit. Molestiae necessitatibus,
dolorem illum expedita minus obcaecati dicta distinctio minima?
</p>
<p> </p>
<button>show modal centered</button>
<p> </p>
<button id="myBtn">W3 Open Modal</button>
</main>
<div class="modal-container">
<div class="modal-wrapper">
<h2>THIS IS MODAL PAGE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
nobis nulla iure consequuntur provident? Laborum, suscipit. Aut
similique dolor unde tempora laborum voluptates at cupiditate,
deserunt voluptate illum cum explicabo magnam quibusdam quam facere
consectetur aspernatur adipisci. Magnam, inventore harum.
</p>
</div>
</div>
Here's a good explanation and examples of an absolute centered modal:
codepen
trying to making scrollbar out of the layout as pic 2
is there any way with custom scrollbar or with any plugin?
.notification-container>div{
scrollbar-color: #CFD8DC #FFFFFF;
scrollbar-width: thin;}
.notification-container>div::-webkit-scrollbar-track
{
background-color: #FFFFFF;
}
.notification-container>div::-webkit-scrollbar
{
width: 4px;
background-color: #FFFFFF;
}
.notification-container>div::-webkit-scrollbar-thumb
{
background-color: #CFD8DC;
}
You can fake it, not sure how crossbrowser-safe this solution is.
.container {
width: 400px;
height: 400px;
border: 2px solid black;
}
.scroller {
height: 100%;
width: calc(100% + 20px);
overflow: auto;
}
.content {
height: 800px;
width: 400px;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
<div class="container">
<div class="scroller">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi hic pariatur a sed quas, accusantium laudantium nisi aliquid voluptatibus corrupti illo corporis optio illum non minima debitis, eaque labore vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi hic pariatur a sed quas, accusantium laudantium nisi aliquid voluptatibus corrupti illo corporis optio illum non minima debitis, eaque labore vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi hic pariatur a sed quas, accusantium laudantium nisi aliquid voluptatibus corrupti illo corporis optio illum non minima debitis, eaque labore vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi hic pariatur a sed quas, accusantium laudantium nisi aliquid voluptatibus corrupti illo corporis optio illum non minima debitis, eaque labore vel.
</p>
</div>
</div>
</div>
.notification-container{
position: relative;
margin-bottom: 25px;
overflow-y: hidden;
padding-right: 15px;
margin-right: -15px;}
.notification-container>div{
scrollbar-color: #CFD8DC #FFFFFF;
scrollbar-width: thin;
padding-right: 15px;
margin-right: -15px;}
solved with this code
.notification-container>div have the scrollbar. Giving margin-padding for just this element is enough for chrome and safari. But firefox not working
if the ".notification-container" also has the same margin padding. It works for FireFox too
Total beginner here, learning HTML and CSS (not yet grid and flexbox). I am trying to make a section with two horizontal blocks consisting of an image/icon to the left and text on the right. Very simple, yet I somehow can't get the icon to float to the left of the text. It is stuck on the line below. What am I doing wrong? or what should I add?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="fas fa-chess-pawn fa-3x"></i>
</div>
<br><br>
<div class="primary">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis
qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
<i class="far fa-play-circle fa-3x"></i>
</div>
</div>
</section>
Bad idea to use float. I suggest you look into flexbox asap.
But if you really want to use it, you should change the HTML a little bit.
Think of it this way. You want the icon to be a 'column' and the title together with the text to be another column.
The best way to achieve that is to wrap the text and title inside a HTML element ( most probably a div )
Then you should specify the width used inside their parent .primary. So for example the icon has 5% and the title and text 95% - 20px which is the margin of the icon.
Also add float:left to the primary div. Because adding float:left to an element ( the icon and text ) gets that element out of the normal flow of the document. ( similar to position:fixed/absolute ) and so, for them to remain ' a part ' of the primary div , you need to add float:left on that div also.
See below
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
margin: auto;
max-width: 1100px;
overflow: auto;
padding: 50px;
}
#strengths {
height: 600px;
margin: auto;
Display: block;
background-image: url('./img/mountain-lake.jpg');
background-size: cover;
}
#strengths .primary {
background-color: #ccc7f2;
padding: 20px;
margin: 20px;
border-radius: 10px;
opacity: 0.75;
line-height: 1.4em;
float:left;
width:100%;
}
#strengths .primary i {
float: left;
margin-right: 20px;
display: inline;
width:5%;
}
#strengths .primary .wrapper {
float:right;
width: calc(95% - 20px);
}
<section id="strengths" class="py-3">
<div class="container">
<h2 class="main-heading">My Strengths</h2>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Strategic Thinking</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="fas fa-chess-pawn fa-3x">icon</i>
</div>
<br><br>
<div class="primary">
<div class="wrapper">
<h3 class="sub-heading">Analysis</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus perspiciatis culpa optio nam, ut maxime voluptatibus magnam amet id cupiditate reiciendis quis mollitia vitae nobis eum corporis! Dicta dolorum delectus repellat dolorem hic quis qui illum minima ullam voluptas, reiciendis sed quos asperiores eaque amet velit magnam maxime officiis facere.</p>
</div>
<i class="far fa-play-circle fa-3x">icon</i>
</div>
</div>
</section>
I have created a simple accordion using only html and css but there is one problem hopefully you can help me. The accordion is working properly but am using display:none to hide the content and then display:block to show it. I would like to have a smooth transition sliding down for .5s in order for the content to reveal when the link is pressed, and when the user press another link i would like to slideup the active content and slidedown the content that is active.
Thanks
HTML Code:
<section id="accordion">
<section id="accordion-title-1">
<a href="#accordion-title-1">
<h2>Videos</h2>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p>
</section>
<section id="accordion-title-2">
<a href="#accordion-title-2">
<h2>Videos</h2>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p>
</section>
<section id="accordion-title-3">
<a href="#accordion-title-3">
<h2>Videos</h2>
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p>
</section>
</section>
CSS Code:
* {
padding:0px;
margin:0px;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 14px;
}
#accordion {
margin-top:100px;
padding:20px;
background:#2e6572;
}
#c-accordion section {
line-height: 1.6em;
}
#accordion section a {
color:#fff;
text-decoration: none;
font-size: 20px;
letter-spacing: 2px;
display: inline-block;
padding-bottom:15px;
border-bottom: 1px solid red;
}
#accordion #accordion-title-2 a, #accordion #accordion-title-3 a {
margin-top:20px;
}
#accordion section p {
color:#bebebe;
margin-top:20px;
display: none;
}
#accordion section:target p {
display: block;
}
Just posting the changes to the css
#accordion section p {
color:#bebebe;
margin-top:20px;
max-height:0;
overflow: hidden;
transition: max-height 0.5s ease-in;
}
#accordion section:target p {
max-height:100px;
overflow:none;
transition: max-height 0.5s ease-in;
}
Demo : http://jsbin.com/rivayagehe/edit?html,css,output
It's a bit rough and may need some polishing
Trying to center the text I have in an element with a display property value of just inline but to no avail.
Below would've been a perfect example of what I want if the text would align in the middle.
#inliner {
background-color: green;
padding: 10px;
display: inline;
font-size: 24px;
line-height: 50px;
text-align: center!important;
}
<div id="inliner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim nulla fugit quidem hic temporibus aliquam a! Consectetur, tempore temporibus optio quod repudiandae placeat distinctio eligendi quae nihil sit rerum ex cumque libero cupiditate delectus doloremque incidunt esse recusandae omnis enim magnam alias perspiciatis quas id reprehenderit neque iusto minima dolores!
</div><!-- End Inliner -->
I tried adding an inner DIV to help me achieve that. Far from desired result because the green background disappears and can only be seen the bottom area.
#inliner {
background-color: green;
padding: 10px;
display: inline;
font-size: 24px;
line-height: 50px;
text-align: center;
}
#inliner-in {
width: 100%;
height: 100%;
display: inline-block;
}
<div id="inliner">
<div id="inliner-in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim nulla fugit quidem hic temporibus aliquam a! Consectetur, tempore temporibus optio quod repudiandae placeat distinctio eligendi quae nihil sit rerum ex cumque libero cupiditate delectus doloremque incidunt esse recusandae omnis enim magnam alias perspiciatis quas id reprehenderit neque iusto minima dolores!
</div><!-- End Inliner -->
</div><!-- End Inliner -->
Add the background-color and display:inline to the child DIV.
#inliner {
padding: 10px;
font-size: 24px;
text-align: center;
}
#inliner-in {
background-color: green;
width: 100%;
height: 100%;
display: inline;
line-height: 50px;
}
Check on your console if your css if being correctly applied, because I think what you have there is supposed to work but if not...
You can try by aligning the entire div like:
#inliner {
margin-left: auto;
margin-right: auto;
}