We Keep Coding

image in html hiding under nav bar in header

i have downloaded an html template and it has a banner after the nav bar, i am trying to replace the image banner with my image, i changed it to the same size of the image in the template and added, the html is like below:
<div class="single-creative-shop-banner parallaxBg bg-img" style="max-width:100%; height:auto;"
data-bg="assets/img/home-banner/home_shop_creative_01.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="creative-shop-banner-content">
<h2>Minimal Collection</h2>
<p class="mb-0">Unlock The Goddess In You</p>
</div>
</div>
</div>
</div>
</div>
the css is so long , not able to post in the question, my website is https://likhaa.com
the problem is when i am adding the banner image, its not properly displaying, instead some part is hiding under the navbar, and the width is also not proper. is there any code in html to fix it or can anyone help me with my code

Please remove the inline margin of 131px from the div having the class "shop-creative-banner" also remove position fixed from the div which is children of div having id "jarallax-container-0"

Vertical Scrolling on Links with fullPage.js

I'm using the fullPage.js plugin to develop a project. The plugin works fine, but I have one question:
I have some sliders within a section so as to create vertical scrolling. However, within one slider I have different links that I also want to trigger vertical scrolling in the same way as the plugin does. Here's how my structure looks like:
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">
<div class="slide"> Slide 1 </div>
<div class="slide">
Example
...
</div>
<div class="slide" id="example"> Slide 3 </div>
</div>
</div>
So, just like I click on the arrows and the different sliders appear, is it possible to click on a link and then a specific slider to appear? The idea is that the Slide 3 will contain content that will change depending on the link that is clicked.

Setting the background of a nav using toDataURL?

So I've been working on a site that uses a JavaScript animation for the background of some of the sections. Right now, the section in question is broken down like this:
<section id="intro">
<div class="info">
<div class="container">
<div class="row">
<div class="col-full"><h1>My Name</h1></div>
</div>
<div class="row"><div class="col-1-4 centered line"></div></div>
<div class="row">
<div class="col-full"><h4>Video<span class="cool">s</span> and stuff</h4></div>
</div>
</div>
</div>
<nav id="nav">
<!-- The content between <span> </span> tags will be hidden on mobile version -->
<ul class="clearfix">
<li>Pro<span>file</span></li>
<li>Ski<span>lls</span></li>
<li>Exp<span>erience</span></li>
<li>Edu<span>cation</span></li>
<li>Por<span>tfolio</span></li>
<li>Con<span>tact</span></li>
</ul>
</nav>
</section>
Originally, I wanted to set the background of the entire section using
dataUrl = canvas.toDataURL();
document.getElementById("intro")[0].style.background='url('+dataUrl+')'
but that didn't work, so I ended up going with
dataUrl = canvas.toDataURL();
document.getElementsByClassName("info")[0].style.background='url('+dataUrl+')'
which did. However, the Nav bar scrolls with the page as you move down, and as soon as the script for scrolling it down kicks in, the background reverts to its default blue color.
My first thought was to simply add
document.getElementById("nav")[0].style.background='url('+dataUrl+')'
but that didn't work. I had some success with
document.getElementByClassName("clearfix")[0].style.background='url('+dataUrl+')'
but only the area immediately surrounding the text used the animated background; the rest was still blue.
So I'm not sure if it's some issue with getElementById, or if you can't use style.background with <section> and <nav>.
Anyone have any thoughts?

I dont think you need the array selector with getElementById so try it on the whole section again and see if that will fix it for you.
So do document.getElementById("intro").style.background='url('+dataUrl+')'

picturefill.js issue with z-index

I'm using picturefill to do responsive images. The issue that I am having is that I am calling picturefill(); method on the success callback of an ajax call. When the dynamically loads, picturefill is called.
This works fine but the issue is that the picturefill'd picture covers up all of the elements that are overlayed on top of it for about 1 second. this causes an uncomfortable effect because the overlayed elements shows up abruptly. so the sequence is that we see the elements, elements dissapear, and then elements reappear from under the picturefill'd picture.
has anyone else run into this problem and does anyone have any suggestions on how I can deal with it? I already tried changing the z-index of the picture fill'd pictures to z-index:1 and everything else to z-index: 200 but still no luck.
Adding some code:
<!-- Begin centerimage Container -->
<!-- Begin rightcaption -->
<div class="rightcaption">
OVERLAID CAPTION
</div>
<!-- End rightcaption -->
<!-- Begin flip-container -->
<div class= "flip-container">
<div class= "flipper">
<div class= "front">
<div class="main-pic-wrap" id="bloop">
<div data-picture data-alt="name" data-class="relative_image">
<div data-src=source> </div>
<div data-src=img2%> data-media="(min-width: 480px)"></div>
<div data-src=img3%> data-media="(min-width: 767px)"></div>
<!--[if (lt IE 9) & (!IEMobile)]>
<div data-src="medium.jpg"></div>
<![endif]-->
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src=img3 alt="Image of Activity">
</noscript>
</div>
</div>
</div>
<div class = "back">
<div id="map"></div>
</div>
</div>
<!-- End flipper -->
</div>
<!-- End flip-container container -->
<div id="moreShowHideGroup">
<div id="mapShowHide" class="icon-globe"></div>
</div>

Alright - finally figured it out. So I believe what is happening is that the container which is holding my picture fill'd picture and my position:absolute floating element is losing it's width property on execution of picturefill since I think picturefill.js removes the picturefill div from the DOM and then replaces it.
While it's removed, the container element which I have set to width:100% has nothing inside to give it an actual width so it collapses for a split-second and my fixed position elements dissapear for a split second.
To prevent this, I put another position:absolute div with 100% width into the container and then dropped my other position:absolute divs into this new container. So the structure looks like this:
<div class="main" style="position:relative">
<div data-picture data-alt="name">div data-src=source> </div></div>
<div class="always-here" style="position:absolute" top:0; left:0;>
<div class="fixed" style="position:absolute; top:2%; left:2%; ">
</div>
</div>
</div>

How to expand div / show hidden content

My goal is to expand the .sort width and show all content in the .sort-expand div. This is expanding to the right with the .sort expanding from 200px when "more" is clicked to 400px. And, when clicked again, to shrink.
<div class="sort">
<div class="mainimg"></div>
<div class="infoarea">
<h3>Main Name</h3>
<p>Title of position</p>
<p><span class="floatl">Tag01, Tag02</span><span class="floatr">more</span></p>
</div>
<div class="sort-expand">
<div class="votes"></div>
<div class="full-info"></div>
<div class="other"></div>
</div>
</div>
This also needs to push all the other .sort areas so it doesn't overlap them. Any ideas? I will post what I've started with but having a hard time. Thanks so much.

You should be able to use jQuery's .slideDown(). .slideDown() will push the other elements as it animates downwards and shows the content of the div. Call it on the div you want: $("#myDiv").slideDown() If you want it to shrink when clicked again, use .slideToggle()