1

I am currently working on customising my Big Cartel website and I've ran into the issue of the header image that scrolls with the page when using the Parade theme.

This is okay for my main shop page but for my Lookbook page, it is covering my content too much and I wish for it to either be hidden or stop scrolling.

Does anybody have a solution to this?

Thank you so much!

.header {
  background-color: transparent;
  padding: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 97;
}
@media screen and (max-width: 767px) {
  .header {
    padding: 20px;
  }
}
.header.overlay-header {
  position: relative;
}
.header .primary-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 15px;
}
.header .secondary-header {
  margin: 0 auto;
  text-align: center;
}
.header .header-center {
  text-align: center;
}
Charles Jensen
  • 11
  • 2
  • Welcome! please, edit your post and put your code so I can help. About how to ask: https://stackoverflow.com/help/how-to-ask – Matheus Barem Sep 27 '18 at 13:05
  • Hello @CharlesJensen. Please provide some code with your question so it is easier for us to understand your problem :) – Karl Taylor Sep 27 '18 at 13:40
  • Hi Karl! I apologise, but I'm very new to this so I'm not exactly sure if the issue we're looking for is in this code but this is what I could find of the code that relates to the "header". – Charles Jensen Sep 27 '18 at 13:51

1 Answers1

0

Your header is fixed so it'll be in a fixed position relative to the viewport. Just make it relative or remove the position all together to make it static.

.header {
  background-color: transparent;
  padding: 50px;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 97;
}

It'd be very beneficial to you to understand the position property going forward, so here's a small overview.

There are 5 different position values you need to know;

Static (default)

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page. This is the definition of position if you don't explicitly set one in your CSS.

Relative

An element with position: relative; is positioned relative to its normal position where it falls in the hierarchy.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

Fixed

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. If you set a navbar to fixed at the top, it'll always be at the top of the view. If you set a footer to fixed at the bottom, it'll always be at the bottom of the view and remain there when scrolling.

Absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Personally I recommend being a bit cautious with absolute positioning and really only use it for overlays and layering as an element positioned absolute will ignore the flow of the document.

CodeSpent
  • 1,684
  • 4
  • 23
  • 46