static header, scoll bar underneath

  • Resolved dinkybluebug

    (@dinkybluebug)


    8 years, 6 months ago

    Hi,

    Ive changed the header of my site to stick to the top of the page, which is good.

    I used:

    header#masthead.site-header {
	position: fixed;
}

    But I need the window scroller only to scroll the main content, and not the area that is covered by the header bar.

    This is particularly troublesome on this page:

    http://www.madethatmyself.com/2015/09/14/lampshade-with-coloured-flex/

    You can see that the top of the page is hidden by the header.(make the width of your browser really narrow and you will see what I mean)

    I want the scroller just to scroll the main content, and the main content to sit nicely below the header.

    Any ideas? Ive played around with all sorts of CSS in the style sheet… and not getting anywhere.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter dinkybluebug

    (@dinkybluebug)

    8 years, 6 months ago

    I fixed it myself!! herrah

    Moderator Kathryn Presner

    (@zoonini)

    8 years, 6 months ago

    Great to hear! Feel free to provide your solution here in case it helps others in the future.

    Thread Starter dinkybluebug

    (@dinkybluebug)

    8 years, 6 months ago

    Hi, Yes- I added this into the stylesheet to fix the header :

    body.home header#masthead.site-header,
body.archive.category header#masthead.site-header {
	position: fixed;

    then added changes to margin top into the responsive code in the cubic stylesheet. See below code that changes depending on width of screen

    body.archive.category div#content.site-content,
	body.home div#content.site-content {
    margin-top: 0px;
    }
    /*--------------------------------------------------------------
7.0 Responsive
--------------------------------------------------------------*/

	body.archive.category div#content.site-content,
	body.home div#content.site-content {
    margin-top: 73px;
    } 

/*--------------------------------------------------------------
7.1 x <= 568px
--------------------------------------------------------------*/
@media screen and (min-width: 568px) {
    /* Content */

	body.archive.category div#content.site-content,
	body.home div#content.site-content {
    margin-top: 97px;
    } 

	.archive .hentry,
	.blog .hentry,
	.search-results .hentry {
		float: left;
		padding-bottom: 50%;
		width: 50%;
	}
	.archive .hentry:nth-of-type(2n+3),
	.blog .hentry:nth-of-type(2n+3),
	.search-results .hentry:nth-of-type(2n+3) {
		clear: left;
	}

}

/*--------------------------------------------------------------
7.2 x <= 768px
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {
	/* Layout */
	body.archive.category div#content.site-content,
	body.home div#content.site-content {
    margin-top: 0px;
    }

	.archive .page-header,
	.search-results .page-header,
	.unfixed-header.archive:not(.sidebar-open) .page-header,
	.unfixed-header.archive:not(.sidebar-open) .site-header,
	.unfixed-header.blog:not(.sidebar-open) .site-header,
	.unfixed-header.search-results:not(.sidebar-open) .page-header,
	.unfixed-header.search-results:not(.sidebar-open) .site-header {
		position: absolute;
	}
	.archive .site-footer,
	.blog .site-footer,
	.search-results .site-footer {
		position: inherit;
	}

	/* Jetpack */
	#infinite-handle:before {
		-webkit-transform: none;
		-moz-transform:    none;
		transform:         none;
	}
	.site-main .infinite-loader {
		width: 100%;
		height: 73px;
		border: 0;
		border-top: 1px solid #d9d9d9;
	}
	.infinite-scroll.neverending .site-main .infinite-loader {
		height: 49px;
	}
	.infinite-scroll.neverending .site-footer {
		display: none;
	}
	.infinity-end.neverending .site-footer {
		display: block;
	}
}

/*--------------------------------------------------------------
7.3 x <= 1024px
--------------------------------------------------------------*/
@media screen and (min-width: 1024px) {
	/* Content */
	.archive .hentry,
	.blog .hentry,
	.search-results .hentry {
		padding-bottom: 33.3333%;
		width: 33.3333%;
	}
	.archive .hentry:nth-of-type(2n+3),
	.blog .hentry:nth-of-type(2n+3),
	.search-results .hentry:nth-of-type(2n+3) {
		clear: none;
	}
	.archive .hentry:nth-of-type(3n+4),
	.blog .hentry:nth-of-type(3n+4),
	.search-results .hentry:nth-of-type(3n+4) {
		clear: left;
	}

}
    Moderator Kathryn Presner

    (@zoonini)

    8 years, 6 months ago

    Great, thanks for sharing!

    Just a heads-up that by editing the theme files directly, you’ll lose your changes the next time you update Cubic or Boardwalk to the latest version. To avoid having to redo all your changes every time, you can add your CSS overrides to a custom CSS plugin so they’ll be protected after theme updates. Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘static header, scoll bar underneath’ is closed to new replies.