[Scott HParticipant]

Can you please supply me with the CSS code necessary to remove the headers and all TOP navigation (in the header) for both desktop and mobile. It would be really nice if you all had page options for NO HEADER, FOOTER. I would rather be able to get rid of the header and top menus and keep the footer, on a page basis would be great. In the meantime if you can supply the CSS to do this sitewide that would be very helpful.

Thanks!

[KoryKeymaster]

Scott,

We actually have page templates for just this purpose! Any page you create, you can go to the Page Templates section and select from one of the following Blank templates:

• Blank – Container | Header, Footer
• Blank – Container | Header, No Footer
• Blank – Container | No Header, No Footer
• Blank – No Container | Header, Footer
• Blank – No Container | Header, No Footer
• Blank – No Container | No Header, No Footer

This will allow you to easily accomplish what you’re looking to achieve without any need for coding or updating template files. Let us know if you happen to need anything else, or a further explanation on this matter.

Thanks!

[KoryKeymaster]

Additionally, you can find more information on this subject in our video tutorials section by clicking here.

[Scott HParticipant]

Please read my message more carefully. I want NO HEADER, NO MENUS, but I want to KEEP THE FOOTERS. You do not have an option for that. I need the CCS code to remove the headers site wide while KEEPING THE FOOTERS and FOOTER MENUS. I hope you add the option in the future for this from your page choices but right now you don’t have the one I need.

Thanks for your help. I am enjoying the capabilities of the theme so far and will have more questions as I get further in to it.

Thanks!

[KoryKeymaster]

Scott,

We will certainly add the ability to remove headers but keep the footers in a future release. Just out of curiosity, would you mind sharing your use-case for this type of setup? Before launch we debated the need for this template but couldn’t find one internally, which is why we left it out.

If you’re merely looking to disable the header site wide, this is a very easy fix. Enter the following code in the Custom section of the Customizer in the CSS field, or into your style.css file of your child theme. Do not include this into the style.css file of the main theme, as it will get overwritten when upgrading to a newer version.

.masthead { display: none; }

Let us know if you need anything else!

[Scott HParticipant]

Thanks for the incredibly fast response. You all have the quickest support response I have ever seen. Amazing! This did exactly what I needed. I am having a couple of other minor issues relating to this. First, to answer your question, the need for this is to be able to build your own menu system, for example you could make it out of buttons instead of using the traditional menu, useful for minimalist design, and allows different pages to have different menus.

I am getting a little more padding than I want at the top when using the Icon stack with a page type of: blank container, header and footer, with the above CSS applied. Also, the footer padding is much more than I want. On both computers and mobile devices it’s a lot of white space in the footer. When I use a blank page without a container it takes care of the top space but then my sides become too wide, and the footer padding is still more than I want.

Any help in adjusting this would be greatly appreciated. I may be buying a lot of copies of this theme if I can make it do what I want. It’s the closest so far to give me the control I need. For a brand new theme you all are off to a fantastic start. I can’t wait to see what you add next.

Thanks!

[KoryKeymaster]

Hey Scott,

Depending on what browser you’re using, it’s very easy to inspect these elements and figure out where the extra spacing is coming from. I use Chrome, and to do so, simply right-click on the element you’re wanting to adjust and select Inspect Element. This will bring up the markup for the site in a popup box, which you can explore and see the dimensions of all elements. Padding is highlighted in green, and margin is highlighted in a kind of orange/red color. When you’re found the element you want to adjust, look for it’s class name. If the class is x-colophon, you would use something like this to adjust the dimensions:

.x-colophon {
...CSS here...
}

If it has two class names (or more) separated by a space, and you need further specificity, you can do something like this:

.x-colophon.top {
...CSS here...
}

This is helpful as it will allow you to see what elements you need to adjust and you won’t have to wait on us to provide you with an answer every time, which is helpful especially in time-crunch situations with client work.

If you find that you’re still having a tough time locating what you need to adjust, try taking a screenshot and making some notations of the areas you want fixed. Then you can use a service like Dropbox to get a public link for the image and paste it here for us to see. This assists us greatly in helping you out.

Thanks!

[Scott HParticipant]

If you can help me a little bit for the CSS code for one of these I am sure based on what you mention above I can make the necessary adjustments.

I would like to adjust the footer padding.

In the element: footer.x-colophon.bottom

I see:

<footer class=”x-colophon bottom” role=”contentinfo”>

Then on the right window:

padding: 4% 0;
padding-top: 4%;
padding-right: 0px;
padding-bottom: 4%;
padding-left: 0px;

I want to change the padding to 1% for the top and the bottom.

Based on that information can you tell me what I should specify the code for the custom CSS? I think once I know how to adjust one I can do any others.

Thanks so much!

[KoryKeymaster]

Hey Scott,

No problem at all. You can do the adjustment in a couple ways. You can just use the padding property, or you can be more specific and set one side using something like padding-top. With padding, you can set all sides, top/sides, top/sides/bottom, or top/left/bottom/right. So if you wanted to set all sides of the container to have a 1% padding, you could use this:

.x-colophon.bottom {
  padding: 1%;
}

If you wanted to set your top and bottom to 1% and sides to 0, you could use this:

.x-colophon.bottom {
  padding: 1% 0;
}

Setting top to 1%, sides to 0, and bottom to 4% would look something like this:

.x-colophon.bottom {
  padding: 1% 0 4%;
}

And then finally, we can set the top to 1%, right to 0, bottom to 4%, and left to 5% like so:

.x-colophon.bottom {
  padding: 1% 0 4% 5%;
}

Again, these are all just examples to demonstrate how to set the CSS yourself. Finally, you could only specify one side if you wanted, like the left side like so:

.x-colophon.bottom {
  padding-left: 5%;
}

Hopefully this clears things up for you and gives you a little more freedom in making edits to everything yourself. Let us know if you need anything else! 🙂

[Scott HParticipant]

You all rock!!!! Thanks so much. Best support ever!

[KoryKeymaster]

That’s what we’re here for, Scott! We want to make working with X as enjoyable as possible. 🙂

[Author]

Posts