Header Font Colours/Footer Width

  • Unknown's avatar
    pnw2022 · Member ·

    Hi there,

    I am trying to recreate the same link font colours in my header that I do as my footer, and can’t figure out why my code isn’t working.

    I want the font to be 0a3632, but when on hover or selected, I want it to be 0f9083.

    Also – How do I get my footer text/logo to be at the same width as the header text/logo. Right now, the footer info is expanded across the page. I want the light aqua background colour to span across the page, but I want the logo/text to span to the same length as the header logo/text.

    Any help would be greatly appreciated.

    Thank you!!

    The blog I need help with is: (visible only to logged in users)

  • kokkieh · Staff ·

    Hi there,

    I want the font to be 0a3632, but when on hover or selected, I want it to be 0f9083.

    I see you currently have this code:

    /* Header Font Colours */
.main-navigation li.menu-item a {
color: #0a3632;
}

.main-navigation li.menu-item a:hover, .main-navigation li.menu-item a:active, .main-navigation li.menu-item a:focus,
{
color: #0f9083;
}

    Try this instead:

    /* Header Font Colours */
.main-navigation a:link {
	color: #0a3632;
}

.site-header .main-navigation > div > ul > li:hover > a, .site-header .main-navigation > div > ul > li.current-menu-item > a {
	color: #0f9083;
}

    Also – How do I get my footer text/logo to be at the same width as the header text/logo. Right now, the footer info is expanded across the page. I want the light aqua background colour to span across the page, but I want the logo/text to span to the same length as the header logo/text.

    I’m not sure what you mean by the footer content spanning across the page. You have a logo added via an image block in the footer widget area that appears top-left in the footer, and the footer menu is appearing centered below that.

    This is caused by the following custom CSS you added.

    /* Max Width for Footer Elements */
body:not(.fse-enabled) #colophon > * {
  max-width: 500px;
}

    If that’s not the result you’re looking for, can you explain in more detail what you’re trying to do? If you want the footer menu to be right-aligned, like the menu in the header, simply removing that bit of CSS will achieve that.

    Please keep in mind that we’re limited in the kind of CSS support we can provide, and if the change you want is too complex, we’ll not be able to help you with the code:

    https://wordpress.com/support/css-support/

    Also note that your plan gives you access to both live chat and direct email support. You can reach those at any time by clicking the Help icon that appears bottom-right on all the My Sites pages, or else via the direct link at https://wordpress.com/help/contact

  • Unknown's avatar
    pnw2022 · Member ·

    Thank you for the response.

    It looks like the header link code is working, however, e “Vaccine Locator” page is a white font, so you can’t see it… I assume it’s because it’s a page that goes to a different website… Do you know the CSS to change it to match the other links?

    Footer: I will leave it as-is. Thank you for the help!

  • Unknown's avatar
    pnw2022 · Member ·

    Actually, I just looked at the site live, and it looks like all of the links are white. If you hover over them, it’s the appearance that I want. But, they should be the dark green to start.

  • Unknown's avatar
    pnw2022 · Member ·

    Actually, I figured it out… Thank you!

    I changed the first bit of code back to what I had it at, and then added in your new code:

    .main-navigation li.menu-item a {
    color: #0a3632;
    }

    .site-header .main-navigation > div > ul > li:hover > a, .site-header .main-navigation > div > ul > li.current-menu-item > a {
    color: #0f9083;
    }

  • The topic ‘Header Font Colours/Footer Width’ is closed to new replies.