Dissappearing header & Blog title customization

  • Hi, I have two issues I can’t seem to figure out on my own. My website is https://www.danlamm.com and I have a child theme all set up already.

    first, I would like to stop the header strip (that contains the site name, social media menu, and navigation menu) from disappearing on all pages when scrolling, I want the bar static at all times.

    Secondly, I would like to customize the appearance of my blog title ‘Thinking in the 21st Century’ so that I can make it stand out from the blog post titles. I understand a bit of CSS, PHP, and HTML on a novice level, but I havnt been able to get any of my custom CSS code to make changes to the site. I have been putting the custom CSS code in the style.css file in my child theme but its not doing anything. Can some one help me please?

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi there,

    It looks like your CSS from the child theme is being applied now. I see that code making the h1 elements smaller.

    Add this to keep the header from moving on pages:

    .page #masthead {
    position: fixed;
}

    I would like to customize the appearance of my blog title ‘Thinking in the 21st Century’

    Here’s something you can start with. Feel free to tweak it to your liking:

    .blog .site-main > header .entry-title {
    font-size: 20px;
}
    Thread Starter dlamm4

    (@dlamm4)

    Thank you so much David! So it turns out, none of my changes were showing up because of something to do with my browser history. It seems I have to clear it every time I upload my child-theme. Everything is working groovy now, but I wanted to share that in case someone else encounters that issue.

    Thread Starter dlamm4

    (@dlamm4)

    David, there are a few things that still are not quite right. I have been trying to figure it out myself but haven’t been able to get it working. first the header strip is fixed on all pages except the blog page. I understand that the blog page is kinda its own animal and doesn’t follow all the rules the other pages do. i tried tweaking your code to apply to the blog page but i must not be doing it right…

    .blog .page #masthead {
    position: fixed;
    }

    The next issue is that the footer behaves differently on all the pages. I want the bar to be fixed to the bottom of the window at all times for all pages. Also, I want to get rid of the text “theme: harmonic by…”. I was able to get rid of it on the main page with the following code:

    #colophon {
    position: fixed;
    }

    #colophon a{
    visibility: hidden;
    }

    #footer-nav-wrapper .site-info {
    visibility: hidden;
    }

    #footer-nav-wrapper .site-info a {
    visibility: hidden;
    }

    but it still appears on the other pages. Also, in this bit of code I attempt to fix the bar to the bottom, albeit unsuccessfully. any suggestions?

    This should take care of everything:

    /* Fix position of header and footer */

header#masthead,
#colophon {
    position: fixed;
}
/* Media query for fixing footer position */

@media only screen and (min-width: 40.063em) {
    body.single #colophon, body.page #colophon {
        position: fixed;
    }
}
/* Hide theme info */

.site-info {
    visibility: hidden;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dissappearing header & Blog title customization’ is closed to new replies.