Making Blog-Title Static

  • zer0blok

    (@zer0blok)


    6 years, 5 months ago

    I’ve changed the appearance of the blog-page to show the blog-title, using the following code added to index.php:

    <header class="entry-header">
	<h1 class="entry-title">Postcards from Outer-Space</h1>
</header

    Is it possible for the blog-title to remain visible /static as you scroll-down the page?

    – The Site-title behaves this way. This is all the css i’ve used for that:

    /* CENTER SITE-TITLE */

.site-branding {
    width: 100%;
    text-align: center;
}

/* TITLE VISIBLE on SCROLL and  White-Space Manipulation*/

.site-header {
	  
    position: fixed;
    top: 0;
    opacity: 1;
    z-index: 1;
    background-color: #FFFDFD;
    padding-bottom: 5px;
    
}

.site-branding {
margin-top: 10px;
}

.entry-header {
    padding-top: 10px;
}

    I appreciate this might be a bit tricky… it would be good to know why it can’t be done, if this is the case, to help my overall understanding.

    With thanks.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    6 years, 5 months ago

    Are you talking about the “Postcards from Outer-Space” text? If so, that text has the same CSS classes as the post titles themselves, which makes this a bit of a challenge. The following sort of does it, but at some screen/window widths, the title is shifted to the left. Working with position: fixed; has some challenges that can be very difficult to overcome. The following fixes the outer space title on 768px and wider screens/windows and allows it to go back to the original scrolling behavior at narrower widths.

    @media screen and (min-width: 768px) {
.blog #primary. .blog #content {
    position: relative;
}
.blog #main > .entry-header {
    position: fixed;
    top: 40px;
    max-width: 700px;
    width: 100%;
}
.blog #main article:first-of-type {
    margin-top: 100px;
}
}
    • This reply was modified 6 years, 5 months ago by sacredpath.
    Thread Starter zer0blok

    (@zer0blok)

    6 years, 4 months ago

    Thanks @sacredpath,
    Yes, “Postcards’ text is what i’m talking about.

    hat text has the same CSS classes as the post titles themselves, which makes this a bit of a challenge.

    I thought so. -Sadly, the code doesn’t quite work: the posts can be seen behind the post-title as u scroll, rather than disappearing uderneath it; i guess because there is no white-space behind the title, like there is in the header (?)

    I tried to make changes to the header-area when i first started with WP /the theme; that was tricky also … in the end i changed the design as different codes i’d been given didn’t quite work.

    I think it’s best i leave this issue for the time being, as i have to have the site ready to go on Friday, and it’s otherwise looking and working well. -Would you tell me though, what’s needed, code-wise, in the theme-files to make this behaviour happen?

    (I appreciate the theme is not designed to do this; i’d like to consider strategies for achieving this in the future, whether that’s identifying a more appropriate theme, or finding a code solutuion).

    With thanks.
    🙂

    • This reply was modified 6 years, 4 months ago by zer0blok. Reason: i realise now that's not going to work
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Making Blog-Title Static’ is closed to new replies.