Header and footer issues and formatting

[jere.toikka]

Hello,

I would like to add a header to my theme with just the site title “Kitaratunnit Turku” that leads to the front page of the website. This should go with all the pages of the site. The site is kitaratunnitturku.com

I think I have from somewhere disabled the headers at a time I didn’t want it, but can’t remember where and what settings or code was used. I’d like to get rid of it and then go to editing the styling of the header and footer.

I would like to edit the background color and text color of both the header and the footer.

I would like to also remove the gap that is currently between the last content area and the footer, and if a similar one were to appear between the header and the first content area, I’d like to get rid of that too.

Also if I can get help with CSS code that can be used to disable the footer menu from pages where I only want the copyright text.

[rad]

Hi Jere,

Thanks for reaching out.

If you plan customizing your header and footer, then I recommend using Pro theme as it’s initially made for that kind of customization. Unfortunately, I can’t provide custom development to the existing X’s header and footer. But, I’ll provide some recommendation to other points you have provided.

1. The header is hidden due to this custom CSS,

.x-navbar-wrap {
    display: none;
    visibility: hidden;
}

Please remove it, then go to Theme Options > Header > LOGO – TEXT to add "Kitaratunnit Turku" as your text logo. It should automatically link to home page.

2. You can change the background colors in Theme Options > Ethos, and to change links color, please go to Theme Options > Typography > Site Links. Or if you just wish to change the link color within header and footer, then please add this CSS with your preferred colors

.x-logobar, .x-navbar, .x-navbar .sub-menu, .x-colophon.top {
    background-color: #292a2c;
}
.x-topbar, .x-colophon.bottom {
    background-color: #292a2c;
}

.x-colophon.bottom .x-nav li a, .x-navbar .x-nav-wrap .x-nav > li > a {
    color: rgba(255,255,255,1);
}

3. Please add this as well,

.site > .x-container>.offset {
 margin-bottom: 0;
 margin-top: 0;
}

4. You can only hide the menu, please add this CSS as well

.page-id-113 .x-colophon.bottom .x-nav {
display: none;
}

The 113 is the page ID you wish to hide the menu from. Please check this about finding the page ID. https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59

Hope this helps.