[ikh1]

Hello,

Our department hired a marketing company to create a layout and several help pages for a new website for us. They used your free Adventurous theme to create it. As they had removed your theme’s credits I recommended that we buy the Adventurous Pro version and we did, so the parent theme was upgraded to the Pro version after a child theme and an extensive style sheet had already been created by the marketing company. I came into this project after the marketing company was almost done and started trying to improve their design after they signed off on it.

Here is what they built for us: http://dev-ciser1.pantheonsite.io/ . Here is the version I’ve been working on to make it look nicer: http://dev-ciser4.pantheonsite.io/ .

At one point our department asked them to line up the second part of the header (with the white background) so it lines up with the body and footer of the page. Instead, they lined up the body and footer to line up with the header which made it too wide. I put the body and footer back to their original width, but I can’t figure out how to make the header line up to it, especially since we need everything to be responsive and I’ve never worked with responsive code before. Even though the CISER logo and top-right menu are on the same horizontal space, it seems they put the CISER logo into the main-wrapper div (in header-featured-image), and the top menu into the masthead div (in header-right).

Do you know how I can fix this? I would attach the child theme style sheet but I don’t see where to do that. It has over 1700 lines (they added lots of responsive code) so it would be too much to copy and paste here.

This width also seems to be affecting the bottom of the footer as it has a thin white background below the copyright and everything I’ve tried to change that background to gray didn’t work without changing the sides of the header to gray as well, but this is less important since I could just change the entire footer background to white.

I also have another unrelated question: How can I fix the footer to stay on the bottom of the page instead of going up to the middle of the browser window when the page has very little content? I tried adding some “sticky footer” CSS I found but so far nothing I tried worked.

[Mahesh]

@ikh1: I don’t quite get the initial part about the logo. Please explain further. And for the footer, go to Dasbhboard=> Appearance=> Customize=> Theme Options=> Cstom CSS box, add the following CSS:

#colophon #site-generator .site-info{
    padding: 0;
}
/* Sticky Footer */
#site-generator {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Regards,
Mahesh

[ikh1]

Hi Mahesh,

Thanks! Your CSS got rid of the white space in the bottom of the footer and it looks much better!

I guess maybe “sticky footer” might not be the right term for what I’m looking for. I just want the footer to be pushed to the bottom of the browser window when the content on the page is short which now causes the footer to be the middle of the browser window. But the footer shouldn’t stay at the bottom when there is enough content to push it to or below the bottom of the browser, and it shouldn’t stay at the bottom when users are scrolling up and down. I’m sorry if I’m not explaining it well. I tried the code from here http://www.cssstickyfooter.com/ but when I put the footer height that works in Firefox, it still doesn’t go all the way to the bottom in IE and Chrome.

As for the logo, the body and the footer of the page each have the same left and right margins. The parent Adventurous Pro theme has it’s header also lined up to the same left and right margins giving the theme a nice uniform appearance. However, when the marketing group created the child theme CSS they added a second header (or divided the header into a second section) so now we have a red header on top followed by a white header right below. We would like content in the white header (the CISER logo on the left and the menu on the right) to have the same left and right margins as the body and the footer, so they all line up nicely like in the parent Adventurous Pro theme. The upper red header can keep wider margins and remain as it is.

[Mahesh]

@ikh1: Try the following for footer to stick to the bottom:

#colophon {
    position: absolute;
    width: 100%;
    bottom: 0
}

I don’t know how you have modified the header, the menu in the header right is visible in the right of the CISER logo in the white header. And you the position is also set to absolute.
If you want to make the white header same as body and footer, you’ll need to have following Custom CSS:

#main-wrapper #header-featured-image {
    max-width: 1250px;
    margin: 0 auto;
}

Note: You’ll need to remove and customize some Custom CSS you have earlier in the Child theme’s CSS.

Regards,
Mahesh

[ikh1]

Hi Mahesh,

It didn’t work, but I’m not surprised because the style sheet in the child theme which the marketing company made for us is so extensive. I’ve made changes in some of their CSS which is clear to me, but with these last 2 issues I don’t know what to do. Thanks anyway for your suggestions, they are much appreciated!

[Mahesh]

@ikh1: Thank you for your appreciation. Have a nice day!

Regards,
Mahesh

[Author]

Posts