Header Font and Size Issues

  • Resolved behumbleandkind

    (@behumbleandkind)


    4 years, 11 months ago

    This is my 1st post ever. Thanks in advance for your help!

    I’m using the TwentyTwenty Theme. I’m trying to recreate a website I created in 2006 using Frontpage. I’m trying to effect (3) changes to my pages:

    1) Eliminate/hide the Page Name “WELCOME” of the page that appears when you create a new page. There does not seem to be a way to delete/hide this block of text. If you delete the text using (Quick Edit), the page disappears completely.

    2) Change the font size of the Page Name “WELCOME” that appears when you create a new page. I can change the font size of additional text blocks, but not the Header Name.

    3) Reduce the Horizontal Width of the Header Banner so that my Background Image is closer to the Menu Bar at the top of the page.

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

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

  • Everything you are looking for would have to be done using CSS. If you go Theme -> Customize -> Additional CSS you can add in the CSS to make the changes you want.

    Removing the welcome would be:
    .home .entry-title {display: none; }

    To change the size of that text on inside pages, you could try:
    .page .entry-title { font-size: 0.8rem; }

    I hope that helps.

    Thread Starter behumbleandkind

    (@behumbleandkind)

    Hi Malcolm! Can’t thank you enough for providing that coding! I just tried both and they work as advertised! I’ll play around with the font sizing to get an idea of what works best for me.

    One thing I did notice (and I think this falls into Problem #3 above) is that even if I remove the Page Name completely, there is still a significant amount of space between where the Menus are displayed and where my image is. I thought I saw a post in the forum yesterday on how to resize the horizontal “Banner” area, but now I can’t find it anymore. If you have any ideas on this issue, I will be most appreciative! Many Thanks!

    Thread Starter behumbleandkind

    (@behumbleandkind)

    Hi Malcolm!

    I spent a few hours searching the forums and I found the code below which reduced the space between my Menu and the Image. Thanks for your help before!

    .home .entry-header {
    display: none;
    }

    From a live site standpoint, an extra span or div tag with normal font weight styling isn’t anything that a visitor will notice in terms of the page’s design.

    That said, all of these unnecessary extra code snippets add up to negatively impact your website’s functionality. Besides being completely unsightly on the back-end, this bulky code can also slow down page load. Slow page load is awful for SEO, and SEO is the purpose behind a lot of content creation efforts.

    If you are none of the programming then try this TinyMCE, its an Advanced is a free plugin that lets you choose your preferred font size easily. This plugin provides you with a classic editor toolbar on the new Gutenberg editor.
    I am no where related to TinyMCE ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header Font and Size Issues’ is closed to new replies.