how to move button on bottom using css?

how to move button on bottom using css? - javascript

I am trying to move my button on bottom (some pixel above bottom).so it always be in bottom whether it contend is less or large. I tried using flex-box also not able to do that.Container have min-height : 500px
here is my code
https://jsbin.com/joyalosate/edit?html,css,output
Expected output :: Explore products move bottom with some pixel above bottom .
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
HTML
<div class="rh02w2">
<div class="bottom__block">
<button class="rh02-pcontent" data-lbl="panel2-home-apps-content-area">
<h1 class="rh02-ttl">Tetst <b>Applications</b></h1>
<div class="rh02-sub">Complete Suite of Apps</div>
<div class="rh02-leadin">
<p>Streamline your enterprise business process. With ERP Financials, Procurement, Project Portfolio Management and more, you can increase productivity, lower costs, and improve controls.</p>
</div>
</button>
<div class="rh02w4">
<div class="rh02-cta">
<div class="obttns">
<div>
<a data-lbl="panel2-home-apps-learn-more">Explore products</a>
</div>
</div>
</div>
</div>
</div>
</div>
css
.rh02w2 {
background-color: #325C72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #FBF9F8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
.obttns {
width: 100%;
font-size: 1.4rem;
margin-bottom: -1.6rem;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: stretch;
align-items: stretch;
}
.obttns>div>* {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
}

Replace your CSS with this.
.rh02w2 {
background-color: #325c72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #fbf9f8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height: 500px;
}
.rh02w4 {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.obttns {
width: 100%;
font-size: 1.4rem;
}
.obttns > div > * {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}

If you want to display your button about 10% above the bottom of the screen you can use the margin-top: 90%; in css. Here is the entire code alongside a button:
<button style="margin-top: 90%;">hi</button>
You can edit the 90% depending on how far down the button is on your screen. Since the code is also using the percentage instead of pixels, it will adjust depending on your screen size.

Related

How can i do for overflow in trapezoid

The span text inside the button is overflow from trapezoid button. I can't move to inside. There is a span tag in button tag. There are text and slider in span but slider is hidden.
I tryed like this code in my css code for soutions but did not working. Maybe I tryed wrong:
`
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
`
What can i do this overflow:
Overflow image
this my css code:
.product-view {
$self: &;
display: flex;
flex-direction: column;
&__container {
display: flex;
flex-direction: column;
#include make-container();
}
&__seperator{
border-radius:1em ;
padding:0.2em;
width: 100%;
background-color: getColor(primary);
}
&__tabs-container {
margin-top:2.5em ;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
&:deep() {
.v-slide-group__content {
height: 5em;
justify-content: center;
}
.v-slide-group__container{
height: 5em;
}
.v-slide-group{
height: 3.05em;
}
.v-btn--size-default{
width: 9em;
color:getScaledColor(secondary,95);
border-bottom:3.5em solid;
border-left:1.35em solid transparent;
border-right: 1.35em solid transparent;
}
.v-slide-group-item--active{
color: getColor(primary);
height: 3em;
width: 9em;
border-bottom:3.5em solid;
border-left:1.40em solid transparent;
border-right: 1.40em solid transparent;
.v-btn__content{
width: 5px;
color:getColor(on-primary);
font-size: 0.8rem;
font-weight: bold;
justify-content: center;
display: flex;
transform: translate(2px,25px);
text-align: center;
.v-tab__slider{
visibility: hidden;
}
}
}
.v-btn__content{
width: 15rem;
display: flex;
color:getColor(secondary);
font-size: 0.9rem;
font-family: bold;
justify-content: center;
text-align: center;
font-weight: bold;
transform: translate(2px,25px);
.v-tab__slider{
visibility: hidden;
}
}
}
}
}

Sliding stops working after opening bigger version of slider

I have a slider, and when I click on one of the images it contains, the bigger slider containing the same images is created and displayed, and all other elements are hidden.
But if I click exactly on the first image of the first slider, and slide a little bit through the bigger slider and then close the bigger slider, the smaller slider stops working: sliding doesn't work.
I noticed that if I disable autoplay property of the first slider, everything works just fine.
jsfiddle of the case when autoplay is enabled (not working): https://jsfiddle.net/seLn6c3w/
jsfiddle of the case when autoplay is disabled (working): https://jsfiddle.net/0dkqubc1/28/
I was prompted that the solution of the problem might be disabling autoplay property when small slider is hidden, and then enabling the property when the small slider becomes again visible.
So I tried to do what I was prompted, but this didn't help: https://jsfiddle.net/gjyx9hbp/1/
Maybe I need to disable autoplay in some other way? Maybe I'm doing something wrong?
HTML
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
"></script>
<body>
<div class="swiper-container" id="album_images_slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://pbs.twimg.com/media/DtQ5AhzX4AUGQeL.jpg:large" alt="">
</div>
<div class="swiper-slide">
<img src="https://im0-tub-ru.yandex.net/i?id=e13d927c1ca5aeb6bafd4cc795b68dea&n=13" alt="">
</div>
<div class="swiper-slide">
<img src="https://newyork.cbslocal.com/wp-content/uploads/sites/14578484/2012/06/83284744.jpg?w=1500" alt="">
</div>
<div class="swiper-slide">
<img src="https://wallbox.ru/wallpapers/main/201301/cb5c7e68c1854dc.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://stihi.ru/pics/2019/11/13/5598.jpg" alt="">
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</body>
CSS
.layer {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
min-height: 100vh;
background: rgb(36, 36, 36);
color: #fff;
}
#album_images_slider_scale {
width: 1200px;
height: auto;
margin: 0 auto;
}
#album_images_slider_scale .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgb(55, 55, 55);
color: #fff;
border: none;
}
#album_images_slider_scale img {
width: 100%;
height: auto;
margin: 0!important;
border: none!important;
}
.album-title {
color: var(--third-color);
text-align: center;
margin-top: 100px;
margin-bottom: 20px;
}
.album-size {
color: var(--second-color);
text-align: center;
margin-bottom: 100px;
}
#album_images_slider {
width: 600px;
height: auto;
margin: 0 auto;
}
#album_images_slider .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color: var(--third-color)!important;
text-decoration: none!important;
padding: 50px;
background: #fff;
}
.swiper-slide:hover {
text-decoration: none!important;
}
#album_images_slider img {
width: 100%;
height: auto;
}
#albums_slider .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border: 1px solid #ccc;
color: var(--third-color)!important;
text-decoration: none!important;
}
#albums_slider .swiper-slide:hover {
text-decoration: none!important;
}
#albums_slider .swiper-slide .title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 15px;
border-bottom: 1px solid #ccc;
text-align: center;
font-size: 22px;
}
#albums_slider .swiper-slide .description {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 5px;
border-bottom: 1px solid #ccc;
text-align: center;
font-size: 18px;
}
#albums_slider .swiper-slide .price {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 15px;
text-align: center;
font-size: 20px;
}
#albums_slider .swiper-slide img {
width: 100%;
height: auto;
}
.cost {
width: 90%;
text-align: center;
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
color: var(--second-color);
}
hr {
width: 100%;
border-top: 8px solid var(--third-color);
margin-bottom: 100px;
}
.info {
width: 90%;
margin: 0 auto 100px;
}
.info h1 {
text-align: center;
margin-bottom: 30px;
color: var(--second-color);
}
.info-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0;
}
.info-list-item {
list-style: none;
background: url("../icons/checkmark.svg") no-repeat;
border-top: 1px solid #ccc;
font-size: 20px;
color: var(--second-color);
padding: 5px;
}
.info-list-item:last-child {
border-bottom: 1px solid #ccc;
}
.info-list-item span {
margin-left: 30px;
}
.info-list-item::marker {
margin-right: -30px;
}
#albums_slider {
width: 90%;
margin: 0 auto;
margin-bottom: 150px;
}
/* #albums_slider .swiper-slide {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
color: var(--third-color);
}
#albums_slider .swiper-slide .title {
width: 100%;
padding: 15px;
border: 1px solid #ccc;
border-top: 0;
text-align: center;
font-size: 22px;
}
#albums_slider .swiper-slide .description {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-top: 0;
text-align: center;
font-size: 18px;
}
#albums_slider .swiper-slide .price {
width: 100%;
padding: 15px;
border: 1px solid #ccc;
border-top: 0;
border-bottom: 0;
text-align: center;
font-size: 20px;
}
#albums_slider .image {
border: none!important;
padding: 0;
}
#albums_slider .swiper-slide img {
width: 100%;
height: auto;
} */
.swiper-button-next, .swiper-button-prev {
outline: none;
color: #000!important;
}
.other-albums {
width: 90%;
margin: 0 auto;
text-align: center;
margin-bottom: 50px;
color: var(--second-color);
}
footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 200px;
width: 100%;
background: var(--first-color);
border-top: 4px solid var(--third-color);
}
.footer-brand {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 200px;
height: 100%;
}
.footer-social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
height: 100%;
margin-right: 50px;
margin-left: auto;
padding-bottom: 20px;
}
.footer-social .social-logo {
margin-right: 15px;
}
#vk-logo:hover {
fill: darkblue;
}
#media screen and (max-width: 1200px) {
#album_images_slider_scale {
width: 95%;
}
}
#media screen and (max-width: 820px) {
#album_images_slider {
width: 500px;
}
}
#media screen and (max-width: 520px) {
#album_images_slider {
width: 98%;
}
}
JavaScript: see in different fiddle links

Make position: fixed with out change resolution

I don't know how to explain it you could understand it well. I have a left navigation and container on rest of website in one line. Navigation has 88px width when .right-column-wrapper 100% of rest available space. In the .right-column-wrapper I have a left and right column in line, each one has 50%. When I add position: fixed to the .right-column, .right-column takes 50% of browser width but not the 50% of .right-column-wrapper
HTML Code:
<div class="page-wrapper">
<!-- Left side navigation -->
<div class="nav-bar-left">
<a href="" class="w-nav-brand">
<img src="https://i.imgur.com/0f8pGKD.png" alt="">
</a>
<nav role="navigation" class="nav-menu-left">
who
what
why
contact
</nav>
<div class="nav-left-social-icons">
<a href="https://twitter.com" target="_blank" class="social-icon-link">
<img src="https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c0f047e81f3_twitter-icon.svg" alt="">
</a>
<a href="https://twitter.com" target="_blank" class="social-icon-link">
<img src="https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c314a7e81d9_instagram-icon.svg" alt="">
</a>
<a href="https://twitter.com" target="_blank" class="social-icon-link">
<img src="https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c861b7e82d0_facebook-icon.svg" alt="">
</a>
</div>
</div>
<!-- Right components -->
<div class="right-column-wrapper">
<div class="column left-column">
<div class="left-column-top">
<div class="split-content">
<h1 class="split-content-headline">the story so far</h1>
<p class="content-v2">
Scotty Huss is an ultimate leader in helping you believing yourself to success. While Breaking records at a young age, yet teaching others to dulpicate his success, Scotty is an aspiring entrepreneur, investor, & mentor.
<br> <br>
Mr. Huss is most known for being one of the youngest top earners in the network marketing industry.
He has already accomplished more then most people accomplish in a lifetime. He helps people expand their
lives financially by providing different services that encourage individuals to multiply their money, add
belief to their lives, and practice personal development characteristics + growth techniques that help people
learn the law of attaction.
<br> <br>
Scotty serves as a great example to his team on what can take place when someone truly commits.
Scotty travels the world to help others become financially free. He currently resides in Florida
but is always on the move with his organization. His mission is to impact the lives of a billion
people around the world in a positive way & teach those who are willling to achieve greatness
learning specific skillsets.
</p>
<div class="launching-beyond-wrapper">
<div class="video-thumbnail-wrap">
</div>
</div>
</div>
</div>
<div class="left-column-footer">
</div>
</div>
<div class="column right-column who-site-right-column"></div>
</div>
</div>
</div>
CS code
.page-wrapper {
width: 100%;
height: 100%;
display: flex;
}
.page-wrapper .nav-bar-left {
width: 88px;
height: 100%;
background: #fff;
border-right: 1px solid #cfcfcf;
float: left;
position: relative;
}
.page-wrapper .nav-bar-left .w-nav-brand {
display: flex;
width: 88px;
height: 88px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.page-wrapper .nav-bar-left .nav-menu-left {
font-family: "Oswald";
position: absolute;
left: -196px;
top: 328px;
width: 480px;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
text-align: right;
}
.page-wrapper .nav-bar-left .nav-menu-left .nav-link {
position: static;
display: inline;
padding: 12px 14px;
opacity: 0.5;
-webkit-transition: opacity 400ms ease;
transition: opacity 400ms ease;
font-family: Oswald, sans-serif;
color: #111;
font-size: 12px;
line-height: 32px;
font-weight: 400;
text-decoration: none;
opacity: .5;
letter-spacing: 2px;
text-transform: uppercase;
}
.page-wrapper .nav-bar-left .nav-menu-left .nav-link.active {
opacity: 1;
}
.page-wrapper .nav-bar-left .nav-left-social-icons {
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-top: 8px;
padding-bottom: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.page-wrapper .nav-bar-left .nav-left-social-icons .social-icon-link {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 8px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
opacity: 0.4;
-webkit-transition: opacity 400ms ease;
transition: opacity 400ms ease;
}
.page-wrapper .nav-bar-left .nav-left-social-icons .social-icon-link img {
max-width: 100%;
vertical-align: middle;
display: inline-block;
}
.page-wrapper .right-column-wrapper {
width: 100%;
height: 100%;
display: flex;
}
.page-wrapper .right-column-wrapper .column {
width: 50%;
height: 100%;
}
.page-wrapper .right-column-wrapper .column.left-column::-webkit-scrollbar {
width: 0px; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
.page-wrapper .right-column-wrapper .column.right-column {
background: url(https://i.imgur.com/4Mmj0E8.jpg);
background-size: cover;
background-position: center;
}
.page-wrapper .right-column-wrapper .column .left-column-top {
width: 100%;
background: #fff;
height: fit-content;
padding-bottom: 100px;
border-bottom: 1px solid #cfcfcf;
}
.page-wrapper .right-column-wrapper .column .left-column-footer {
width: 100%;
height: 400px;
background: red;
}
.page-wrapper .right-column-wrapper .column .split-content {
padding: 104px 6% 120px;
height: 100%;
margin: auto;
}
.page-wrapper .right-column-wrapper .column .split-content .split-content-headline {
margin-top: 0px;
margin-bottom: 24px;
font-family: Oswald, sans-serif;
font-size: 44px;
line-height: 52px;
font-weight: 500;
text-transform: uppercase;
}
.page-wrapper .right-column-wrapper .column .split-content .content-v2 {
font-family: "Karla";
color: #777;
margin-bottom: 24px;
font-size: 15px;
line-height: 24px;
}
.page-wrapper .right-column-wrapper .column .split-content .content-v2::first-letter {
font-family: Oswald, sans-serif;
color: #faaf52;
font-size: 46px;
float: left;
margin: 0.7rem 0rem;
padding-right: 7px;
}
.page-wrapper .right-column-wrapper .column .split-content .launching-beyond-wrapper {
background: #fff;
border-top: 1px solid #cfcfcf;
border-bottoM: 1px solid #cfcfcf;
width: 100%;
height: 160px;
position: relative;
}
.page-wrapper .right-column-wrapper .column .split-content .launching-beyond-wrapper .video-thumbnail-wrap {
width: 136px;
height: 92px;
background: url(https://i.imgur.com/1LPdxEM.jpg);
background-size: cover;
background-position: center;
position: absolute;
left: 0;
top: 0;
bottoM: 0;
margin: auto;
}
.page-wrapper .right-column-wrapper .column .split-content .launching-beyond-wrapper .video-thumbnail-wrap:before {
content: '';
width: 31px;
height: 31px;
bottom: 0;
right: 0;
background-color: #faaf52;
background-image: url('https://assets.website-files.com/5b17159f88941cfc367e81a3/5b1715a088941c88717e824f_play-icon.svg');
background-repeat: no-repeat;
position: absolute;
}

You can set height and width of background image from right column and use calc to calculate width of left column
.page-wrapper .right-column-wrapper .column.right-column {
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 500px;
...
}
.page-wrapper .right-column-wrapper .left-column {
width: calc(100% - 300px);
}
Here is the sample

Toggling nav icon in browser mobile screen size will make nav-list-items dissapear when readjusting browser screen to large size

Hello my current issue is that when the page initially loads the navigation works and appears properly when the browser is enlarged, however when readjusting the browser window to a smaller size, toggling the nav menu icon works but however will either
a) readjust the layout in the larger web browser screen if the mobile menu was left open
or
b) navigation items will entirely disappear if the mobile menu was closed
when readjusting the browser window back to the larger screen size.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chispot_Blog</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/a23422f356.js" crossorigin="anonymous"></script>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
// Trying to figure out toggling visibility issue with navigation when going back to large screen
// let navi = document.getElementById("nav-list");
// navi.addEventListener(onresize, toggle_visibility){
// display = "block";
// };
</script>
</head>
<!-- Hamburger Icon from font awesome -->
<!-- <i class="fas fa-bars"></i> -->
<body>
<header>
<nav>
<a href="index.html"><img class="logo" src="images/Component 1.png" alt="blog spot logo">
<ul id="nav-list">
<li class="nav-list-item">home</li>
<li class="nav-list-item">cafes</li>
<li class="nav-list-item">views</li>
<li class="nav-list-item">posts</li>
</ul>
</nav>
<div class="hide">
<i class="fas fa-bars fa-lg hamburger ham-toggle"></i>
</div>
</header>
I have tried to put display:block property under the appropriate class selector inside the larger media query. Which didn't populate any nav-list-items, I kept the display:flex property because thats how I want the nav-list-items to be formatted in the larger layout.
/* general */
body{
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
img{
width: 100%;
}
a:hover, a:focus{
color: black;
}
a .icon:hover{
color: yellow;
}
.logo{
width: 12em;
margin-top: .5em;
margin-bottom: .5em;
}
.main-image{
height: 80%;
width: 95%;
object-fit: cover;
border: 1em;
border-color: #111111;
border-style: solid;
}
.featured-img{
height: 90%;
width: 100%;
object-fit: cover;
order: 1;
padding: 1em;
background-color: lightgray;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
.secondary-featured-article-img{
height: 75%;
width: 90%;
object-fit: cover;
order: 1;
padding: .75em;
background-color: lightgray;
}
/* Typography */
h1{
font-size: 8rem;
text-align: center;
}
h3{
font-size: 3rem;
margin-bottom: 0;
}
h4{
font-size: 2rem;
font-weight: 700;
margin-bottom: 0;
margin-top: 0;
}
h5{
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0;
}
.site-intro-body{
font-size: 1.15rem;
font-weight: lighter;
justify-content: center;
align-items: center;
order: 2;
}
.secondary-featured-article-body{
font-size: .9rem;
font-weight: lighter;
}
footer{
background-color: black;
color: white;
}
.side-page-post-title{
margin-top: .5em;
margin-bottom: 0;
padding-top: .25em;
padding-bottom: .25em;
background-color: black;
color: white;
}
.side-page-post-body{
margin-left: 6em;
margin-right: 6em;
margin-top: 2em;
margin-bottom: 2em;
}
/* Layout Mobile Screen*/
header{
background-color: #f8f8f8;
width: 100%;
margin-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
z-index: 999;
}
header .hamburger{
margin-top: 1em;
margin-right: 1em;
align-content: flex-start;
/* visibility: hidden; HIDE WHEN IN MEDIA QUERY */
}
nav{
display: flex;
width: 100%;
flex-direction: column;
padding-left: 2em;
align-items: center;
justify-content: center;
}
#nav-list{
margin-top: 0;
display: flex;
flex-direction: column;
justify-content: row;
list-style: none;
margin-bottom: 0;
display: none;
}
.nav-list-item{
margin: .1em;
font-size: 1.5rem;
font-weight: 700;
}
a{
text-decoration: none;
color: darkgray;
}
main{
display: flex;
flex-direction: column;
width: 100%;
}
.main-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 4em;
background-color: black;
color: white;
margin-top: 0;
padding-bottom: 3em;
padding-top: 4em;
}
.site-intro{
width: 90%;
padding: 0 5em;
}
.site-intro p{
column-count: 2;
}
.site-photo{
height: 100%;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
order: 1;
}
.article-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 5em;
margin-top: 0;
}
.featured-article{
width: 90%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
padding-right: 2em;
padding-top: 2.5em;
}
.featured-article-body{
width: 100%;
order: 2;
margin-top: 0;
text-align: center;
}
.secondary-featured-article-section{
width: 100%;
display: flex;
flex-direction: column;
}
.secondary-featured-article{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 2em;
padding-top: 2em;
margin-bottom: 0;
}
.secondary-featured-article-body{
width: 95%;
order: 2;
margin-top: 0;
text-align: center;
}
.secondary-featured-article-border{
border-bottom: .15em lightgray solid;
}
footer{
padding-top: 3em;
padding-bottom: 3em;
}
.footer-body{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1em;
}
.social-media-icons{
display: flex;
justify-content: center;
align-items: center;
}
.icon{
margin-right: .5em;
}
.hide{
height: 100%;
align-self: flex-start;
}
.side-page-post-body{
margin-top: 4em;
margin-bottom: 4em;
}
.article-listings{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 95%;
margin-left: auto;
margin-right: auto;
}
.article-listing{
display: flex;
height: 45vh;
justify-content: space-around;
align-items: center;
margin-bottom: 2em;
background-color: whitesmoke;
padding-top: 2em;
padding-bottom: 2em;
}
.article-blog-description{
display: flex;
width: 50%;
height: 90%;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
order: 2;
}
.article-listing-image{
order: 1;
width: 40%;
height: 90%;
object-fit: cover;
align-items: center;
}
.article-listing-title{
font-size: 1.75em;
margin-bottom: .5em;
}
.article-listing-body{
margin-top: 0;
font-size: .9em;
}
/* Layout Large Screen*/
#media screen and (min-width: 760px){
.main-image{
height: 75vh;
width: 90%;
object-fit: cover;
border: 1em;
border-color: #111111;
border-style: solid;
}
.featured-img{
height: 70vh;
width: 45%;
object-fit: cover;
order: 1;
padding: 1em;
background-color: lightgray;
}
.secondary-featured-article-img{
height: 40vh;
width: 45%;
object-fit: cover;
order: 1;
padding: .75em;
background-color: lightgray;
}
header{
background-color: #f8f8f8;
width:100%;
margin-bottom:0;
display:flex;
justify-content:space-between;
align-items:center;
position: fixed;
}
header .hamburger{
margin-top: auto;
margin-bottom: auto;
margin-right: 1em;
visibility: hidden; /*HIDE WHEN IN MEDIA QUERY */
}
nav{
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-left: 2em;
align-items: center;
}
#nav-list{
margin-top: 0;
display: flex;
flex-direction: row;
justify-content: row;
list-style: none;
margin-bottom: 0;
visibility: visible;
}
.nav-list-item{
margin: 1em;
font-size: 1.5rem;
font-weight: 700;
}
I'm currently using a simple script I had found on css-tricks but am open to alternative suggestions to resolve the problem of wanting to simply hide and show the nav menu without any issues affecting the other layout in the large media query.

You need set the display property of #nav-list back to flex when switching to larger viewport, since it's already overrided when mobile navigation is toggled.
#media screen and (min-width: 760px){
#nav-list {
display: flex!important;
}
}

CSS hamburger menu cuts in half when closing

I've successfully coded a CSS/JS hamburger menu which has a transforming icon when clicked. However, I've just discovered a bug where, when the hamburger 'close' button is clicked, the nav menu cuts behind the header making it look messy.
Currently, the menu opens correctly when the hamburger is clicked - at 100vh - but when it closes, it appears that it cuts behind the header, so it looks like it's at about 80vh. When it's closing, I'm wanting it to remain at 100vh.
Apologies in advance for the lengthy code.
Here's my code:
// Variables
let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");
// Function
function hamburgerActive() {
line1.classList.toggle("active");
line2.classList.toggle("active");
navList.classList.toggle("active");
}
// Event Listener
hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.universal-header-hamburger {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-start;
}
#hamburger {
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
cursor: pointer;
z-index: 99;
}
.hamburger-span {
height: 5px;
width: 30px;
background-color: #342b38;
transition: all .2s ease-in-out;
cursor: pointer;
}
#hamburger-line-1.active {
transform: translateY(7.5px) rotate(-45deg);
}
#hamburger-line-2.active {
transform: translateY(-7.5px) rotate(45deg)
}
.universal-header-logo {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-basket {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#hamburger-nav-list {
height: 100vh;
width: 0;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
transition: all 0.5s ease-in-out;
}
#hamburger-nav-list.active {
height: 100vh;
width: 30%;
position: fixed;
}
<header class="universal-header-section">
<div class="universal-header-container">
<div class="universal-header-hamburger">
<div id="hamburger">
<span id="hamburger-line-1" class="hamburger-span"></span>
<span id="hamburger-line-2" class="hamburger-span"></span>
</div>
</div>
<div class="universal-header-logo">
<a href="index">
<h2>Logo</h2>
</a>
</div>
<div class="universal-header-basket">
<a href="basket">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</header>
<div id="hamburger-nav-list">
<div class="hamburger-container">
</div>
</div>
Thanks in advance.

Think this is easiest edit to make it work?
Changed the position: absolute / flex
Also the order of DOM elements changed around (most important)
Hope it didnt break anyting :)
// Variables
let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");
// Function
function hamburgerActive() {
line1.classList.toggle("active");
line2.classList.toggle("active");
navList.classList.toggle("active");
}
// Event Listener
hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.universal-header-hamburger {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-start;
}
#hamburger {
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
cursor: pointer;
z-index: 9999;
}
.hamburger-span {
height: 5px;
width: 30px;
background-color: #342b38;
transition: all .2s ease-in-out;
cursor: pointer;
}
#hamburger-line-1.active {
transform: translateY(7.5px) rotate(-45deg);
}
#hamburger-line-2.active {
transform: translateY(-7.5px) rotate(45deg)
}
.universal-header-logo {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-basket {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#hamburger-nav-list {
height: 100vh;
width: 0;
top: 0;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
transition: all 0.5s ease-in-out;
position:absolute;
}
#hamburger-nav-list.active {
height: 100vh;
width: 30%;
position: fixed;
z-index: ;
display:flex;
}
<div id="hamburger-nav-list">
<div class="hamburger-container">
</div>
</div>
<header class="universal-header-section">
<div class="universal-header-container">
<div class="universal-header-hamburger">
<div id="hamburger">
<span id="hamburger-line-1" class="hamburger-span"></span>
<span id="hamburger-line-2" class="hamburger-span"></span>
</div>
</div>
<div class="universal-header-logo">
<a href="index">
<h2>Logo</h2>
</a>
</div>
<div class="universal-header-basket">
<a href="basket">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</header>

Develop Reference

JavaScript is the programming language of the Web.

how to move button on bottom using css? - javascript

Related

How can i do for overflow in trapezoid

Sliding stops working after opening bigger version of slider

Make position: fixed with out change resolution

Toggling nav icon in browser mobile screen size will make nav-list-items dissapear when readjusting browser screen to large size

CSS hamburger menu cuts in half when closing

Categories

Resources